Floating div one beside the other - 2 column layout

Question

How can I position the main content div in the middle without it collapsing to the left, when left sidebar is shorter than the content? Is that possible? I don't want to use a fixed height for the navigation, but can I somehow say "sidebarleft height = content height", or is there an easier way?

Thanks!

Mr. Alien · Accepted Answer · 2013-12-16T12:13:27.293

2

Actually you are floating only elements to the left without any wrapper element, so what happens is this..

enter image description here

Instead, wrap the other 2 elements inside a wrapper element and than float it to the left

enter image description here

.left_wrap {
    float: left;
    width: 30%;
}

.right_wrap {
    float: left;
    width: 70%;
}

.right_wrap > div {
    border: 3px solid #ff0;
    height: 100px;
}


<div class="main">
    <div class="left_wrap">
        Hello
    </div>
    <div class="right_wrap">
        World
        <div></div>
        <div></div>
    </div>
</div>

Demo

Better Demo

If you want even a better one, I would suggest you to wrap the boxes inside the parent containers, and instead of floating the child elements, float the parent.

enter image description here

Demo

Also, don't forget to clear your floated elements, just make sure you clear them, you can use a self clearing parent CSS like

.clear:after {
   content: "";
   clear: both;
   display: table;
}

And call the above class on the element containing floated elements as their children, where in this case, it's <div class="main"> so it should be now

<div class="main clear">
   <!-- Floated Elements -->
</div>

edited Dec 16 '13 at 12:13

answered Dec 16 '13 at 12:02

Mr. Alien

153,751
34
298
278

1

Hey, thanks for the advice! I actually had the right divs, but I just used the float:left on the node itself instead of using it on the "article" div... Thanks! Wow, after reloading the page there was tons of pictures, thanks for the huge explanation! It's working now, thank you :-) – Frederik Witte Dec 16 '13 at 12:10
How do I have to understand the last part? The "Clear the floated elements"? What does happen when I use ".clear:after"? – Frederik Witte Dec 16 '13 at 12:16
@user2885690 Take some time and read this or you will endup in more mess :) http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734 – Mr. Alien Dec 16 '13 at 12:18
@Mr. Alien wow... You are really awesome! And the I can use it on the div I float because I use ":after" and this will clear it after the close tag of the div, right? One last question: Why do you use "content:"";" and "display: table" instead of just using "clear:both" ? – Frederik Witte Dec 16 '13 at 12:29
@user2885690 that's a clear fix, just to notify here, `:after` pseudo won't work in IE <= 7, so make sure you use it wisely and no, you shouldn't use it on the `div` you float, you should use it on the parent element containing your floated divs, will throw you an example, wait for a while :) – Mr. Alien Dec 16 '13 at 12:33
@user2885690 see, here in this example - http://jsfiddle.net/c4MLL/ am assigning `background` to the parent element having `class` `main` but you won't see it, so inorder to `clear` your floated elements, call the `clear` `class` on the parent element containing floated elements like - http://jsfiddle.net/c4MLL/1/ – Mr. Alien Dec 16 '13 at 12:36
@Mr. Alien ... man... I have no words for this, you are awesome! You should be a teacher or something or do tutorials on youtube! I've never understood something so fast! Can you lastly tell me, why to use the 'content:""' and the "display:table"? It seems to work without those aswell? – Frederik Witte Dec 16 '13 at 12:47
@user2885690 lol thanks for appreciating, and no, you are missing something there, when you use only `clear: both;` so if you read my answer carefully, I place `clear: both;` before closing parent element, so in that case you won't need those properties, but here, we are calling a class on the parent element, so using `:after` it creates a virtual block after the floated elements and thus it clears them, for more info on clearfix, you can read this :) http://stackoverflow.com/questions/8554043/what-is-clearfix – Mr. Alien Dec 16 '13 at 12:53
@user2885690 some might also suggest you to use `overflow: hidden;` on the parent element but that's a bad trick, you can read my comment here http://stackoverflow.com/questions/20609362/place-buttons-on-each-side-of-scrollable-div/20609477#comment30840419_20609470 – Mr. Alien Dec 16 '13 at 12:54
Hey, I'm a little busy at the moment, don't think I will not read through this :-P! I will as soon as I have the time again :-)! – Frederik Witte Dec 17 '13 at 15:49

score 0 · Answer 2 · answered Dec 16 '13 at 12:01

0

I'm not quite sure if this is what you mean but try:

 #node-29{
    float: right;
    clear: left;
    margin-left: 0;
 }

This will position the div's next to each other and keep the main content to the right.

answered Dec 16 '13 at 12:01

jansmolders86

5,449
8
37
51

score 0 · Answer 3 · answered Dec 16 '13 at 12:03

This can be quite complex depending on your existing theme.

I wrote this page a while back to shows you how you can do that.

http://linux.m2osw.com/3columns

More or less you need a first div that encompasses the left column and the content. That div is the one that gets centered.

To make it simpler you can set a specific width to the div and you get something like this:

div.page
{
  width: 900px;
  margin: 0 auto;
}

That will center the main div.

For the column and the content, both are float: left; div's. In order to "close" the lot, you want another div just before closing the main div. That one has a style that ensures that the main div has the correct size: clear: both;.

score 0 · Answer 4 · answered Dec 16 '13 at 12:11

we can use margins to set the div position .we can either specify fixed margins or we can give percentage value ,so that it will based on the total size of the screen.

<!DOCTYPE html>
    <html>
    <head>
    <style>
    #main
    {
    background-color:yellow;
    }
    #main
    {
    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;
    }
    </style>
    </head>

    <body >
    <div id="main">
    this is how we can display main div in centre
    </div>
    </body>

    </html>

enter image description here

Floating div one beside the other - 2 column layout

4 Answers4