Removed div divs parent when a float style is applied

Removed div divs parent when a float style is applied

Hi all

I hope someone is able to help me with the below question.

I'm sorry if the questions I asked lately are really basic, I just teach myself Web design.

I really appreciate the help guys offer, so a big thank you in advance.

I'm puzzled as to why I did not receive my effect desired for the code below. I am creating a Web site for someone and have structured the website in the following manner:

< body >

< div id = "wrap" >

< div id = "title" > < / div > <!-end #title->

< div id = "shopping_cart" > < / div > <!-end #shopping_cart->

< div id = "content_wrap" >

< h2 class = "header" > header goes here </span > < / h2 >

< div id = "nav_bar" >

table < table > goes here < /table >

< / div > <!-end #nav_bar->

< div id = "side_bar" >

Text < h1 > here < / h1 >

table < table > goes here < /table >

< / div > <!-end #side_bar->

< div id = "content" >

Text < p > < /p >

< div id = "content_image" > < / div >

< / div > <!-end #content->

< div id = "footer" >

< div id = "logo" > < / div >

< div id = 'flags' > < / div >

< div id = "v_wd" > < / div >

< / div > <!-end #footer->

< / div > <!-end #content_wrap->

< / div > <!-end #wrap->

< / body >

Now I don't know if I'm structuring my site the right way, it's just the way that seems logical. It doesn't would be not even the source code that is the issue and can be CSS, so I also glued who underneath.

Now, the problems I encounter are:

I want to have my site all wrapped in a div big #wrap so I can centre of the whole of the site. Within this div, I want that all my other divs (which some have div inside those as well).

To start #title seems to be inside #wrap without problem but #shopping_cart move outside #wrap anything inside the tag of opening and closing #wrap.

My next div #content_wrap, it seems to be inside #wrap however the margin-top that I registered to #content_wrap away them to the low #title #shopping_cart even if #content_wrap is less than #shopping_cart not #title.

The second problem seems to be with the divs or purported to be inside of #content_wrap.

H2 .header seems to fit inside #content_wrap with no problems. Now, it gets really confusing, to me anyway. Any div that I put below .header h2 which is inside the #content_wrap does not actually seem to go inside the #content_wrap or #wrap that they get pushed under #wrap while in the source code, they are inside the divs opening and closing.

Also #side_bar and #content together, represent 860px that is the width of their neighbors div #content_wrap, so they'll fit perfectly alongside. I know the links in a previous discussion, I raised in the discussion (http://forums.adobe.com/message/4501038#4501038). Murry advice on this discussion board, I took and tried floating bar just to the left margin and left #side enough for #content clear, I also tried floating both to the left. Nothing has worked.

As I wrote that I went through my code, questions above occur only if I'm floating a div. If I'm floating a div for a reason any it removes this div of any div that surrounds it and it grows under each div. single I don't know how position my divs in the exact spot I want to without them floating but if I float they move out of their parent div and therefore are not in the position I want to be they.

If you are able to help me solve this problem, it will help me with future projects. I appreciate really any help you can give.

Kind regards

Elliot

CSS


I marked where I would float a particular div * / style * / I know would negate this style. The issues I encounter are with div #shopping_cart, #side_bar and #content.

{body

Background: URL(images/body_bg.png) non-repetition fixed Center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover ;}

#wrap {}

height: auto;

Width: 895px;

Auto margin: 0 ;}

#title {}

Background - image: URL(images/title.png);

height: 67px;

Width: 895px;

margin-top: 50px;

margin-left: auto;

margin-right: auto ;}

{#shopping_cart}

background: url(images/shopping_cart.jpg);

height: 46px;

Width: 142px;

margin-top: 15px;

margin-right: 25px;

/ * float: right; * /}

{#content_wrap}

Background: URL(images/content_bg.png) repeat;

border: 2px solid #666;

height: auto;

Width: 862px;

margin-top: 15px;

margin-left: auto;

margin-right: auto ;}

{#nav_bar}

Width: 809px;

height: 59px;

margin-left: 26px ;}

{#side_bar}

height: auto;

Width: 285px;

margin-top: 20px;

border-right: 1px solid #666;

/ * float: left; * /}

#content {}

height: auto;

Width: 575px;

margin-top: 20px;

/ * float: left; * /}

{#content_image}

background - image: URL(images/couple.jpg);

height: 184px;

Width: 271px;

Auto margin: 0 ;}

#footer {}

background-color: #0F0;

Width: 860px;

height: 200px ;}

{#kejo_logo}

background - image: URL(images/kejo.png);

height: 100px;

Width: 227px ;}

{#flags}

{#viscari_wd}

#copyright {}

{#pp_tu}

. Header {}

color: #FFF;

font-size: 44px;

do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

margin-left: 10px ;}

{.header_small}

color: #FFF;

do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font size: 25px;

margin-left: 10px ;}

#content_wrap #side_bar h1 {}

do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

color: #4b4a4a;

font-size: 20px;

padding-left: 15px ;}

#content_wrap #content p {}

color: #484747;

text-align: center;

do-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 20px;

padding-right: 15px ;}

Everything goes well with your code and css, a few minor added adjustments:

Add overflow: hidden; the css "wrap" and get rid of height: auto; (I've never used height: auto; never). Infact, I can't think of any good use where it should be used.

#wrap {}

/ * height: auto; * /

Width: 895px;

Auto margin: 0;

background-color: #9F3;

overflow: hidden;

}

Add overflow: hidden; AND especially clear: both; the "content wrap" and new tray height: auto; (clear: both; a clear "shopping_cart")

who is floating right or it will be when you remove the attribute of the css.

{#content_wrap}

Background: URL(images/content_bg.png) repeat;

border: 2px solid #666;

/ * height: auto; * /

Width: 862px;

margin-top: 15px;

margin-left: auto;

margin-right: auto;

background-color: #0FF;

overflow: hidden;

Clear: both;

}

Then delete what you have previously commented that is,-the properties of float "shopping_cart', 'side_bar' and 'content '.

Tags: Dreamweaver

Similar Questions

  • How can I remove the silent mode when my phone is locked

    How can I remove the silent mode when my phone is locked?

    Settings - do not disturb = Off.

  • How can I remove AVAST4 antivirus program when it is not listed in the list to add or REMOVE a PROGRAM?

    original title: help

    How can I remove AVAST4 antivirus program when it is not listed in the list to add or REMOVE a PROGRAM?

    Hello

    Avast uninstall utility
    http://www.avast.com/uninstall-utility

    If you need more help contacting Avast support and forums

    Avast - Support
    http://support.avast.com/

    Avast Forums
    http://Forum.avast.com/

    I hope this helps.

  • The files and settings to remove the old computer when you make a file and the transfer settings Wizard?

    The files and settings to remove the old computer when you make a file and the transfer settings Wizard?

    Hi KaraDay,

    When you use the files and Settings Transfer Wizard in Windows XP, it only transfers a copy of the files and settings on the computer.

    How to use the "files and Settings Transfer Wizard" in Windows XP

    http://support.Microsoft.com/kb/293118

  • How can you stop safely remove hardware to appear when there is nothing connected to the USB ports?

    Orifginal title: Aggrevation

    How can you stop safely remove hardware to appear when there is nothing connected to the USB ports? It is causing my screen lock and give an error does not.

    Hi ElginCarelock,

    You can try to restart the computer and check.

    Uninstall all USB device manager entries

    a. Click Start and typedevmgmt.msc and press ENTER.

    b. expand Bus USB controllers.

    Note: You will need to scroll down to find this point.

    c. the first USB controller under Bus USB controllers right click and then click on uninstall to remove it.

    d. Repeat steps above for each controller USB is listed under Bus USB controllers.

    e. restart the computer and check.

    Hope this information is useful.

  • Is it possible to blackBerry smartphones can remove the BBM5.0 when using OS5.0?

    Is there a way to remove the BBM5.0 when using OS5.0? I tried using DM6.0 but BBM is marked as a component of basic impossible to remove.

    I hate BBM in general because it is always on. I don't want to install an older version.

    If anyone can help me, thanks in advance.

    lusilveira wrote:

    Is there a way to remove the BBM5.0 when using OS5.0? I tried using DM6.0 but BBM is marked as a component of basic impossible to remove.

    I hate BBM in general because it is always on. I don't want to install an older version.

    If anyone can help me, thanks in advance.

    • with a few OSes 5.0.X.X, BBm is a basic application and cannot be deleted.
    • BUT the other OSes, the BBm 5.0.X.X became an addon application and can be removed. (i.e. 5.0.0.43 6 and 5.0.0.462)

    If you have the first category OS, I suggest you try and install BBm for example using AppWorld. Perhaps by upgrading BBm, it will become an add-on.

  • Is there a link to re - install CC2014 æ? I let the Setup program to remove the previous version when installing CC2015 AE and now also wish to have CC2014 installed.

    I let the Setup program to remove the previous version when installing CC2015 AE and now also wish to have CC2014 installed.

    Thanks in advance,

    James Edmunds

    When you open the Panel creative cloud, on the section "Find additional Apps", click on "All Apps" (right side) and select "Previous Versions".

  • Hello!! I need your help - I lost the second Activation of my CS5 apps. (probebly didn't remove my apps properly when I upgeaded my computer.) It would be greate if someone from Adobe could reset my SN. I do not know who to contact... in the support line

    Hello!! I need your help-

    I lost the second Activation of my CS5 apps. (probebly didn't remove my apps properly when I upgeaded my computer.)

    It would be greate if someone from Adobe could reset my SN. I do not know who ask in the support line, they told me that I must seek help in the chat...

    TNX.

    Michal

    To the link below, click on the still need help? the option in the blue box below and choose the option to chat...

    Serial number and activation support (non - CC) chat
    http://helpx.Adobe.com/x-productkb/global/Service1.html ( http://adobe.ly/1aYjbSC )

  • I am facing a problem when working in the Muse... The problem is that I can't remove my package page, when I try to delete it showing an error and the application terminates. I'm working on an emergency project which, I have to present tomorrow I hope y

    I am facing a problem when working in the Muse... The problem is that I can't remove my package page, when I try to delete it showing an error and the application terminates. I'm working on an emergency project which, I have to present tomorrow I hope you find a solution for the same. Help with the help of Adobe Muse CC

    Liston Hi,

    Steps to follow:

    1. Try to make a new complete site structure in MUSE and try to add a few pages and tries to remove it, just to check its not having not problem
    2. If the problem persists even, check if your site is stored on the external hard drive. Note: site should be registered on internal hard drives.
    3. Try to revive the MUSE, if the problem remains the same, we will refresh the preferences of MUSE.

    Hope it will work.

    Thank you

    Prabhakar Kumar

  • That part of my character style will apply when it is used in a number format.

    I created a NOTE: format. I used a numbering format to create it in the balls and the section number of the paragraph styles dialog box as follows:

    Type from the list: Numbers of

    Format: None

    Number:   NOTE: ^ t

    Character style: My Style of special character

    And here's my character style:
    Stress: WE
    Weight: 15 pt
    Offset:-4
    Color: Black
    Tint: 20%
    And here's the problem:
    Underscore does not show upward when the character style is used since then in the bullets and numbering section of the paragraph style. I can apply the character to plain old text and t style will work fine. But the part of the character style does not appear upward when it is referenced on the bullets and numbers of the screen. Curiously, bar has the same problem. The rest of my work of style attributes (font, color, etc.) of fine character. But underscore does not apply.
    Any ideas as to why?
    Screen shot 2010-03-24 at 2.42.42 PM.png

    Kelly Vaughn wrote:

    I created a NOTE: format. I used a numbering format to create it in the balls and the section number of the paragraph styles dialog box as follows:

    Type from the list: Numbers of

    Format: None

    Number:   NOTE: ^ t

    Character style: My Style of special character

    And here's my character style:
    Stress: WE
    Weight: 15 pt
    Offset:-4
    Color: Black
    Tint: 20%
    And here's the problem:
    Underscore does not show upward when the character style is used since then in the bullets and numbering section of the paragraph style. I can apply the character to plain old text and t style will work fine. But the part of the character style does not appear upward when it is referenced on the bullets and numbers of the screen. Curiously, bar has the same problem. The rest of my work of style attributes (font, color, etc.) of fine character. But underscore does not apply.
    Any ideas as to why?

    In my view, it is a bug known; Notes does not work in this situation, although other attributes of text, such as "BOLD", color, italic, do.

    This forum and Google search terms as to highlight auto-numbering indesign paragraph style to see some beyond the discussions on this topic.

    HTH

    Kind regards

    Peter

    _______________________

    Peter gold

    Know-how ProServices

  • DW cc has widgets &amp; auto Jwho &amp; jQ controls mobile? When adding the Jwho auto apply controls &amp; widget

    installation of dw cc cs6 need to UN / reinstall? DW cc has widgets & auto Jwho & jQ controls mobile? When adding the Jwho auto apply controls and widgets?

    It is as expected. The CS6 (build 6006) version only have mobile JQ. JQ UI is introduced in DW CC(build 6390).

    You must install the CC version to access the functionality as well. DW CC was released on June 17, 2013.

  • Styles are applied automatically

    I have a document with a number of object, character styles and paragraph put in place.

    Suddenly, every time I take the text tool and draw a text box, a particular set of styles is applied where I don't want. I need to reset the default to no style, but I don't see where.

    Select the text tool, and then before you create a framework the styles you want. They will become the default values for the documetnuntil you change them again.

  • A paragraph style that applies to all other paragraph styles?

    Hello

    How do you add a paragraph style that applies to all other paragraph styles?

    I tried to apply my master styles desired to [standard paragraph] and then from all the other paragraph styles [standard paragraph], with styles that apply indirectly, for example title 1 is based on [standard paragraph] but section 2 is based on heading 1 and so on.

    This does not work as well as I expected.

    Is there anything else I can do?

    Much obliged!

    A rule of thumb is to leave the only standard paragraph. Otherwise you can mess up other styles based on that.

    To set up your new style - which may by default based on the standard paragraph - and formatting you wish. Then base on that other styles.

    k

  • Remove "&lt; div" Excel file when exporting to CSV format

    Hello
    I have a report has the following properties:
    Export of reports
    Activate the output CSV = > Yes
    Bind the Label = > export to CSV format

    but when I run the report and press the link, I get an excel sheet indicating the reeport data, but the problem is that the report began with
    < div id = "report_11749113153378136_catch" >, Iam if you're wondering how to solve the problem.
    Thank you
    Abdul Alkhateeb

    Published by: dtabed on March 18, 2009 07:58

    Hi Adam,.

    What version of APEX are you running? I think that this has been fixed in 3.1.2. If you disable partial-page refresh, that should get rid of your problem.

    Martin

    -----
    [http://apex-smb.blogspot.com/]

  • Animation of edge doesn't scale to the width and height div parent

    We have an existing site that was built in 2007, but has been designed to fit perfectly with sensitive css, there were a few hiccups, but this was by far the biggest problem that I have encountered. I'm working on replacing a flash animation with animation that onboard animate cc 2014, I did, and everything went fine until I asked to play well with my existing Web page.

    I was playing with my files for a few days now, and I was wondering if anyone else has this problem. (I've been placing the code manually in html format, and not as a .oam) It seems that my animation of the edge, on the appropriate settings available, insists on the evolution of the size of the port view rather than the size of the parent div I put it in. I came with a difficulty of brute that changes javascript code so that the animation looks at 90% of the display window, but as soon as you resize the window, it goes back to 100%. Which is annoying because I need to be at 90% with a 5% margin/padding on each side (that's what the content div is set to of anyway, so when the edge host is set to 100% width, only go to 100% width of the content div that it is in) and even more embarrassing as that does not even begin to solve my problems with the desktop version of the site. As much as I love the sarcastic musings of my friend in HIM during the afternoon, I think we're both willing to entirely renounce this aspect of the project.

    When I tried to import a media file .oam that he just doesn't appear at all, no code, no javascrip, nothing shows the parent div and empty the stage in development tools (I check the code for troubleshooting purposes through google chrome).

    I'm really at the point where I hope I did something terribly wrong and I'll be able to save this new way to add in the animation. That would be the best case scenario at this point.

    Help, please!

    Here's how I solved the problem

    Configure the animation as w 100% and 100 hour

    You will need to exit mode suitable for it, also uncheck the option to stage at the centre.

    Then, I put a container around my scene in the html code. I call it class = "stagewrap".

    I then added javascript so that stagewrap would retain a certain aspect ratio but the scale to 100% width.

    That's what looked like my html

    My CSS looked like this:

    {.stagewrap}

    margin-top: 20px;

    Width: 100%;

    position: relative;

    overflow: hidden;

    margin-bottom: 30px;

    float: left;

    font size: 2.5vw;

    }

    Some of these styles will have to modify according to your needs or according to your needs.

    x is going to be your ration, which matches your width divided by your height, you can just divide the number of pixels, the units cancel out and that the ratio works for any other unit.

    There is the width to which your animation is 100% resolution without the scale upwards or downwards. It is a VERY important number to keep your overall percentages correctly.

    And z is probably 1, unless you want your text is larger or smaller, you can play with it yourself.

    "In my code, I wanted to also set it so that after a certain width of the window, the animation went to a static size so I did that."

    function setRatio() {}

    If ($(window) () .width)<= s)="">

    SW.height (sw.width () * thisRatio);

    }

    else {}

    SW.height (sh);

    }

    }

    s = the width of the window to which you want the size to go static LESS 1px

    SH = static height that you want the picture to stay in, this number automatically sets the width through the report.

    As insurance, you css for the size of the window, you want the static image to organize at all, the size of the .stagewrap in px

    I hope this helps!

Maybe you are looking for

  • OptiPlex 3020 TSRI support

    Hello Optiplex 3020 supports the technology Intel Rapid Storage Technology. Is it possible to create a volume RAID-1 with TSRI added a 2nd HARD drive? If so, is it mandatory to reinstall Windows 7 from scratch?

  • Application all-in-one scanner HP B210e crashes on Mac OS x 10.6.8 (Snow Leopard)

    I have a HP Photosmart B210e all-in-One printer/scanner. I'm on a MacBook Pro with Mac OS x 10.6.8 (Snow Leopard). A few months ago, HP Scan 3 (scanner app) crashed when I did a scan of the computer. When I have opened the app, it crashed almost imme

  • HP 530 Downgrade to XP Pro

    First of all, let me say hello, I'm new to this forum and hope I can get help. Google has not just been nice to me on this issue. I have a laptop HP 530 business model # H530FFUC shipped with Windows Vista Home Basic Edition. I upgraded the memory to

  • BlackBerry voice recognition issue Z10

    It is actually more a teach my Z10 how to say a name correctly... My daughters name is Ciara Celtic pronouciation (R a key ') however my Z10 refuses to acknowledge the crrrect pronunciation and stress I say call (sigh ra), which is embarrassing. I wa

  • New OEM Windows Ultimate 64 bit SP1. but can not activate.

    Salvation; Have installed a Dell OEM W7 Ultimate 64-bit SP1 Version.   Here in Germany ANY OEM can be installed on ANY computer - regardless of manufacturing.  (law since 2000)  Activation failure.  Although the product key is correct - have checked