Three column layout not working

Question

I am trying to make a three column layout with right/left sidebars and main content.

I am floating the left sidebar to the left and right sidebar to the right hoping for the main content to wrap around the right sidebar as it comes after the right sidebar in the HTML. When all three elements have a width of 25% of the main div, then the content wraps below the left sidebar div and doesn't wrap around the right sidebar div. However, when I increase the width of main to something like 75%, it seems to be staying in the middle.

.left-sidebar {
    background: red;
    width: 25%;
    float: left;
}

.right-sidebar {
    background: blue; 
    width: 25%;
    float: right;
}

.main {
    background:yellow;
    width: 25%;
}

<body>
    <div class="left-sidebar">Lorem ipsum dolor sit amet, </div>
    <div class="right-sidebar">Filler</div>
    <div class="main">Text</div>
</body>

Can someone please tell me what causes this?

Possible duplicate of [How to float 3 divs side by side using CSS](http://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css) — TylerH, Nov 15 '16 at 15:28

score 1 · Accepted Answer · answered Nov 15 '16 at 15:11

Now you should center .main class. Simply add margin:0 auto; to your css code

.sidebar-left {float:left; width:25%; background:cyan;}
.sidebar-right {float:right; width:25%; background:lime;}
.main {width:50%; background:tomato; margin:0 auto;}

<div class="sidebar-left">left</div>
<div class="sidebar-right">right</div>
<div class="main">main</div>

score 0 · Answer 2 · answered Nov 15 '16 at 15:04

0

you need to float all the elements:

.left-sidebar, main, .right-sidebar { float: left; width: 25%;}

and and re-oder the html:

<div class="left-sidebar">Lorem ipsum dolor sit amet</div>
<div class="main"></div>
<div class="right-sidebar"></div>

answered Nov 15 '16 at 15:04

Malte Schulze-Boeing

1,055
10
14

.left-sidebar, main, .right-sidebar { float: left; }
Lorem ipsum dolor sit amet,

– Malte Schulze-Boeing Nov 15 '16 at 15:04

score 0 · Answer 3 · answered Nov 15 '16 at 15:06

All elements need to be labelled with float:

Demo

HTML

<div>
    <h2 align="center">responsive solution optional title</h2>
    <div align="center" class="float-left">utmost left column</div>
    <div align="center" class="float-left">centre column</div>
    <div align="center" class="float-left">right sidebar</div>
</div>

CSS

.float-left {
float:left;
width:33%;
}

score 0 · Answer 4 · answered Nov 15 '16 at 15:08

your right-sidebar and main divs also need height specified in css, or some content , to be visible or else will have 0px height.

Also .main class needs to have float:left

.left-sidebar {
    background: red;
    width : 25%;
    float :left;
     }
.right-sidebar {
    background: blue; 
    width : 25%;
    float: right ;
    height:10px;
    }

.main { 

    background:yellow;
    width : 25%;
    height:10px;
    float:left;

}

score 0 · Answer 5 · answered Nov 15 '16 at 15:09

I don't fully understand what you wanna do but here is an idea. You should first wrap everything on a div and give a specific width. Also if you want the main in the middle change the position of your main div. For example:

<div class="mainWrap">
  <div class = "left-sidebar">Lorem ipsum dolor sit amet </div>
  <div class = "main">Lorem ipsum dolor sit amet</div>
  <div class = "right-sidebar">Lorem ipsum dolor sit amet</div>
</div>

Then the css. If you float everything to the left, you ll have your inline 3 column layout.

.mainWrap {
   width:100%;
}
.left-sidebar { background: red;
  width : 33%;
float :left; }
.right-sidebar {background: blue; 
  width : 33%;
float: right ;}
.main { background:yellow;
width : 33%;}

Here is the example Demo

Hope it helped

Three column layout not working

5 Answers5