Hi there,
Divs not sizing as people wish, seems a topic that's discussed very often, so this is probably very uninteresting. I haven't found a solution for my problem though in all those topics, so it would really help me :)
Okay, here we go:
I have this three-column, fixed-width website with a wrapper to center the whole thing. The leftmost and rightmost columns are nothing special. The middle column consists of two separate divs, a menu-div and a main-div (where the mail content is shown).
Relevant HTML looks like this (nothing too special):
<html>
<body>
<div id='wrapper'>
<div id='left'>
[left-column content]
</div> <!--- END LEFT --->
<div id='menu'>
[menu]
</div> <!--- END MENU --->
<div id='main'>
[main content]
</div> <!--- END MAIN --->
<div id='right'>
[right-column content]
</div> <!--- END RIGHT --->
</div><!--- END WRAPPER --->
</body>
</html>
Now, the relevant CSS looks like this: (widths aren't correct, because I removed margins for the troubleshooting ;) )
#wrapper{
position:relative;
margin-left:auto;
margin-right:auto;
margin-top:90px;
margin-bottom:66px;
width:960px;
background-color:#fdfefd;
}
/* Left-column */
#left{
position:absolute;
padding-left:16px;
padding-right:18px;
width:109px;
}
/* Right-column */
#right{
position:absolute;
left:759px;
top:15px;
width:166px;
height:540px auto;
}
/* Menu */
#menu{
position:absolute;
top:47px;
left:143px;
width:616px;
}
/* General page */
#main{
position:relative;
top:160px;
left:143px;
width:455px;
}
The problem here is, that nor the relative, nor the absolute elements (right, left and main) are pushing the background of the wrapper (and thus the wrapper itself, I suppose) down as the content of those elements increases. When I put the position to default, it does push it down and, for example, in the case I put the position of the right-column to relative, it does push down...
It's really mysterious in my eyes, but it's probably obvious :p
Well, thanks a lot already! :D
TeaMan
