CODEWITHSUNDEEP
htmlcss
Peter
Peter

Reputation: 211

Floating a DIV within another DIV

For my webpages I have a container DIV, within that a menu DIV and a content DIV. I am arranging several 'settings' DIVs within the content DIV and I wan them to float left within the content DIV but lower ones end up under the menu DIV.

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

The settings divs have the properties of float:right; but that leaves the last one in the wrong position and if I float:left;, then it goes under 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;
}

Upvotes: 4

Views: 758

Answers (6)

cernunnos
cernunnos

Reputation: 2806

The container of the floated divs should have:

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

The floated divs should be 

float:left

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

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

In case the link dies: Setting overflow to anything other than visible will cause it to establish a new block formatting context (http://www.w3.org/TR/CSS21/visuren.html#block-formatting).

Upvotes: 3

Cody Guldner
Cody Guldner

Reputation: 2886

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

Major Changes

  • I changed a lot of the float properties to display:inline-block. The reason for this is so that all of the elements position themselves correctly.
  • I took off the width for container, so now it should be slightly more responsive
  • I removed the settings_div class and changed the CSS to #content div to save code
  • Added display:inline-block to the ul in the CSS and took it off of the inline styles
  • A rather large problem was you had a property of the content set as width:600, when it needed to be width:600px;. I ended up removing this style.
  • Because you had the #container set to a positioning of relative, then I changed margin-top:-10; to top:-10px;

Small Changes

  • Condensed a lot of properties such as margin and border
  • Removed the width, overflow, and min-height from container because they served no purpose

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

  • Added border-box to every element so that it will display the exact width that you specify
  • Added a fluid width to container so that it will display inline with the menu when needed, but then will drop down when it is too full

Upvotes: 0

Robert Fricke
Robert Fricke

Reputation: 3643

Make all settings_div float:left;, but use another container that floats 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

Upvotes: 0

MarkSmits
MarkSmits

Reputation: 538

Two things are wrong here:

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

In order to make the setting divs behave correctly use:

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

and then float left all setting div's.

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

Upvotes: 2

Jo David
Jo David

Reputation: 1746

There are only small changes to your css rules:

You should add a fixed width to your menu.

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

And your container needs to be "moved" by that value + margin to the right. So add a margin-left to it:

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

Set your #container to overflow: hidden.

And now every settings div should be floated left.

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

Upvotes: 0

Vogel612
Vogel612

Reputation: 5647

Just add a placeholder div before the last div

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

and add css-rule

.placeholder{
visibility: hidden;
}

have a jsfiddle to check: here

Upvotes: 0

Related Questions