3 column html template - content overflows though there is clear both and height is 100%

Question

I have 3 divs within a wrapper:

<div id="wrapper">

<div id="leftbar">
Lorem ipsum dolar sit amet
</div><!--LEFTBAR-->

<div id="middle">
Lorem ipsum dolar sit amet
</div><!--middle-->

<div id="rightbar">
Lorem ipsum dolar sit amet
</div><!--RIGHTBAR-->

</div><!--wrapper-->

Both 'leftbar' and 'middle' are floating left, whilst 'rightbar' is floating right. 'wrapper' has height:100%; clear:both; set.

However, if there is a large amount of text or content in 'middle' it overflows the 'wrapper' div. I am struggling to figure out why this is occurring.

My CSS is:

#wrapper {
    width: 1000px;
    height: 100%;
    margin:auto;
    padding: 30px;
    margin-top: 40px;
    background-color:#FFF;
    color:#000;
    border: 2px solid #828fc4;
    clear:both;
}

#leftbar {
    float:left;
    width: 150px;
    min-height: 450px;
    padding: 5px;
}

#middle {
    float:left;
    height: 100%;
    width: 580px;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px dotted #2B308C;
    border-left: 1px dotted #2B308C;
}

#rightbar {
    float:right;
    width: 200px;
    min-height: 450px;
    padding: 5px;
}

Any advice is appreciated!

score 2 · Answer 1 · answered Dec 10 '12 at 05:08

2

Add overflow:auto to #textcontent and remove height:100% form #textcontent and #maincontent

answered Dec 10 '12 at 05:08

Musa

96,336
17
118
137

Mr. Alien · Accepted Answer · 2012-12-10T05:13:15.150

1

As you edited your question, I just came to know how it was overflowing, it is because you are using height: 100%;, so your div wont exceed the viewport, so use height: auto; instead and also use overflow: auto; for #textcontent instead of clear: both; as Musa told you to do..(Checked with firebug)

edited Dec 10 '12 at 05:13

answered Dec 10 '12 at 05:01

Mr. Alien

153,751
34
298
278

score 1 · Answer 3 · answered Dec 10 '12 at 05:37

This is the css file with some minor additions:

Text-align for your bar's
Width in the wrapper was set to 1000px so all the px were distributed equally among the bar's.

#wrapper {
width: 1000px;
height: auto;
margin:auto;
padding: 30px;
margin-top: 40px;
background-color:#FFF;
color:#000;
border: 2px solid #828fc4;
clear:both;
overflow:auto;
}

#leftbar {
float:left;
width: 250px;
padding: 5px;
text-align:center;
}

#middle {
float:left;
width: 400px;
padding-left: 20px;
padding-right: 20px;
border-right: 1px dotted #2B308C;
border-left: 1px dotted #2B308C;
text-align: center;
}

#rightbar {
float:right;
width: 250px;
padding: 5px;
text-align:center;
}

Just my two cents

score 0 · Answer 4 · answered Dec 10 '12 at 05:02

0

If you need that for text only, try using CSS3 column.

answered Dec 10 '12 at 05:02

Nutic

1,407
4
16
31

score 0 · Answer 5 · answered Dec 10 '12 at 05:09

Add overflow property and change height to auto.

#wrapper {
    width: 1000px;
    height: auto;
    margin:auto;
    padding: 30px;
    margin-top: 40px;
    background-color:#FFF;
    color:#000;
    border: 2px solid #828fc4;
    clear:both;
    overflow:hidden;
}
#middle {
    float:left;
    width: 580px;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px dotted #2B308C;
    border-left: 1px dotted #2B308C;
}

3 column html template - content overflows though there is clear both and height is 100%

5 Answers5

Linked