Clever Geek Handbook

Swimming a DIV in another DIV

For my web pages, I have a DIV container that has a DIV menu and a DIV content inside it. I place a few DIV "settings" in the DIV content, and I make them float to the left in the DIV content, but the bottom ones are in the DIV menu.

Check this jsfiddle to see clearly: http://jsfiddle.net/4KUTy/5/

settings

divs

have properties float:right;

, but leave the latter in the wrong position, and if I float:left;

, then it goes to the menu.

Please, help.

jsfiddle html code here:

<html>
<head/>
<body>
<div id="container">
    <div class="menu">
        <ul>
            <li>menu option 1</li>
            <li>menu option 2</li>
            <li>menu option 3</li>
            <li>menu option A</li>
            <li>menu option B</li>
            <li>menu option C</li>
        </ul>
    </div>
    <div id="content">
        <div class="settings_div">Project Settings<br/>
    <ul style="display:inline-block">
        <li>language</li>
        <li>currency</li>
        <li>mark up</li>
    </ul>
</div>     
<div class="settings_div">Your Company Settings<br/>
    <ul style="display:inline-block">
        <li>company details</li>
        <li>bank details</li>
        <li>contact details</li>
    </ul>
</div>
<div class="settings_div">Output Settings   <br/>
    <ul style="display:inline-block">
        <li>company logo</li>
        <li>date format</li>
        <li>fonts etc</li>
    </ul>
</div>
<div class="settings_div">Graphical Settings<br/>
    <ul style="display:inline-block">
        <li>colors</li>
        <li>text size</li>
        <li>more</li>
    </ul>
</div>
<div class="settings_div">I WANT THIS ONE ON THE LEFT!<br/>
    <ul style="display:inline-block">
        <li>But NOT under the menu</li>
        <li>float:left puts it under the menu</li>
        <li>should be under graphical settings</li>
    </ul>
</div>
    </div>            
 </div>
</body>
</html>

jsfiddle css here:

.settings_div {
    text-align:left;
    display:inline;
    width:300px;
    height:80px;
    padding:20px;
    padding-top:10px;
    margin:20px;
    margin-top:0px;
    margin-bottom:20px;
    border-color:#33CCCC;
    border-style:solid;
    border-width:thick;
    float:right;
}

#content {
    width:600;
    min-height:620px;
    vertical-align:top;
    display: inline;
}

.menu { 
    padding:5px;
    background-color:#33CCCC;
    float:left;
    text-align:left;
    width:auto;
}

#container {
    margin-bottom:10px;
    background-color:#eee;
    width:950px;
    min-height:620px;
    border-radius:0px;
    position:relative;
    margin-top:-10;
    margin-right:auto;
    margin-left:auto;
    overflow: visible;
}
+3


source to share


6 answers


A container with floating divs should have:

overflow: hidden; /* Makes the container actually "contain" the floated divs */
display: block;

Floating divs should be

float:left


script: http://jsfiddle.net/4KUTy/5/

I found a good post that tries to explain why overflow: hidden works the way it does: http://colinaarts.com/articles/the-magic-of-overflow-hidden/

In case the link freezes: setting overflow to anything other than visible will create a new block formatting context ( http://www.w3.org/TR/CSS21/visuren.html#block-formatting )

+2


source


Two things are missing here:

  • The wrapper div.content is set to display: inline.
  • The wrapper div.content does not scale correctly as all child elements are out of flow.

For the divs settings to work properly:



 .content { display: block; overflow: hidden; }

and then the float will leave all div settings.

See the updated fiddle: http://jsfiddle.net/4KUTy/7/

+2


source


Just add a placeholder div before the last div

<div class="settins_div placeholder">placeholder</div>

and add css rule

.placeholder{
visibility: hidden;
}

there is a jsfiddle to check: here

0


source


Do everything settings_div

float:left;

, but use another container that floats to the right and is wide enough:

<div id="setting-container" style="float:right;width:800px;">
    <div class="settings_div">Your Company Settings<br/>
        <ul style="display:inline-block">
            <li>company details</li>
            <li>bank details</li>
            <li>contact details</li>
        </ul>
    </div>
    <div class="settings_div">Output Settings   <br/>
        <ul style="display:inline-block">
            <li>company logo</li>
            <li>date format</li>
            <li>fonts etc</li>
        </ul>
    </div>
    <div class="settings_div">Graphical Settings<br/>
        <ul style="display:inline-block">
            <li>colors</li>
            <li>text size</li>
            <li>more</li>
        </ul>
    </div>
    <div class="settings_div">I WANT THIS ONE ON THE LEFT!<br/>
        <ul style="display:inline-block">
            <li>But NOT under the menu</li>
            <li>float:left puts it under the menu</li>
            <li>should be under graphical settings</li>
        </ul>
    </div>
</div>

jsfiddle

0


source


Small changes made to your css rules:

You have to add fixed width to your menu.

.menu { 
    padding:5px;
    background-color:#33CCCC;
    float:left;
    text-align:left;
    width:150px;
}

And your container should be "moved" with this + margin value to the right. So add margin-left

to it:

#content {
    width:600;
    min-height:620px;
    vertical-align:top;
    margin-left: 160px;
}

Install #container

on overflow: hidden

.

And now all div settings should be placed on the left.

Updated version of your jsfiddle: http://jsfiddle.net/4KUTy/8/

0


source


Here is my result http://jsfiddle.net/burn123/4KUTy/10/

Major changes

  • I changed many properties float

    to display:inline-block

    . The reason for this is that all elements are positioned correctly.
  • I removed the width for container

    so it should now be a little more responsive.
  • I removed the class settings_div

    and changed the CSS to #content div

    to keep the code
  • Added display:inline-block

    in ul

    CSS and removed from inline styles
  • Quite a big problem was that you had the content property set as width:600

    when it needed to be width:600px;

    . I ended up deleting this style.
  • Since you set #container

    to position relative

    I changed margin-top:-10;

    totop:-10px;

Small changes

  • Compression of many properties such as margin

    andborder

  • Removed containers width

    , overflow

    and min-height

    due to missing target

Update - http://jsfiddle.net/burn123/4KUTy/12/

  • Added border-box

    for each element to display the exact width you specified
  • Added the width of the liquid to container

    so that it appears in the menu bar when needed, but then drops out when it was too full.
0


source






More articles:


All Articles