Hello, I have been busy building a website for one of my schools organizations. I ran into a problem with my 3 row div structure. Now my problem is with the middle row. It will only go stretch and fill up the page when there is an overflow of text inside it. http://i50.tinypic.com/2m7tafl.png As you can see I have been putting in some dumb block at the top with useless text up until now in order to make the div stretch. But when removed you get this... http://i48.tinypic.com/ayrdau.png My question is how do I fix this? I want it to stretch to the end of the page without having to fill it with useless "fill" text. This is my .css for the 3 divs. #middle{ margin: 0 200px 20px 200px; position: absolute; z-index: 3; top: 210px; left: 0px; } #left{ position: absolute; top: 210px; left: 0px; } #right{ position: absolute; z-index: 1; top: 210px; right: 0px; } Code (markup): I tried to add width:100%; to the middle column but then it goes too far and I get this. http://i48.tinypic.com/kd68zm.png Changing it to a lower percentage like 75% works for my resolution. But when i take my window and shrink it overlaps the right column again. So I'm guessing width with a %% is out of the question, unless im doing something wrong?
This should Fix it : #middle { margin : 0 10px; width: 50%; float:left; } #left { width:20%; float: left; } #right { width:20%; float: right; } change widths , margins to whatever you want , i just don't know what sizes you want and keep in mind that the div 'left should be before #middle
are you looking for the holy grail??? http://www.alistapart.com/articles/holygrail this one is really simple to follow and quite matches your markup... some more resources http://css-discuss.incutio.com/wiki/Three_Column_Layouts and yes what i believe you could have avoided - is using the absolute positioned elements!!