Forum Moderators: not2easy
There is one overall container which houses the two columns (left and right). Because the container is set to 100% height, I thought that whatever content I place in those two columns within it would automatically adjust the parent container. What is currently happening is my content, instead of adjust the outside container, it is actually overlapping and my container basically just sticks to whatever height it was when the browser window was opened.
Help Please LOL
<head>
<title>Untitled Document</title>
<style type="text/css">html, body{ margin : 0;
padding : 0;
height : 100%;
min-height : 100%;
font-family : arial, helvetica, sans-serif;
font-size : 12px;
background-color : #b0c6d2; }
#container{ width : 800px;
height : 100%;
min-height : 100%;
margin-top : 0;
margin-left : auto;
margin-right : auto;
margin-bottom : 0;
text-align : left;
vertical-align : middle;
border-left : 1px solid #72931F;
border-right : 1px solid #72931F;
background : #A1C50F; }
#leftcolumn{width : 200px;
min-height : 100%;
position : absolute;
margin : 0;
background : #A1C50F;
border-right : 1px solid #72931F; }
#logo{ width : 100%;
height : 75px;
margin : 0;
background-image : url(_images/logo.gif);
background-repeat : no-repeat;
border-bottom: 1px solid #72931F; }
#rightcolumn {
width : 599px;
position : absolute;
margin-top : 0;
margin-left : 201px;
background : #FFFFFF;
}
#header{margin : 0;
width : 599px;
height : 75px;
position : absolute;
background-color : #a1c50f;
background-image : url(_images/header.gif);
background-repeat : no-repeat;
border-bottom : 1px solid #72931F; }
#photo{width : 599px;
height : 200px;
background-image:url(_images/placeholder.jpg);
margin-top : 76px;
position : absolute;
border-bottom : 1px solid #72931F; }
#content{background : #FFFFFF;
margin-top : 276px; }
#menu {width : 200px;
height : 200px;
background : #F0F6D9;
position : absolute;
padding : 0;
margin : 0;
font-family : arial, helvetica, sans-serif;
font-size : 12px; }
#menu ul { margin: 0;
padding : 0;
list-style : none;
width: 200px;
border-right : none;
border-left : none; }
#menu ul a {display: block;
text-decoration: none;
color: #777;
background: #F0F6D9;
padding: 5px;
border-bottom: 1px solid #72931F;
list-style : none; }
/* Fix IE. Hide from IE Mac \*/
* html #menu ul li { float: left; height: 1%; }
* html #menu ul li a { height: 1%; }
/* End */
#menu ul li { position: relative; }
#menu li:hover ul {display : block; }
#menu li:hover>ul { visibility : visible; }
#menu ul ul {visibility : hidden; }
#menu ul, li { margin: 0 0 0 0; }
#menu ul a:hover { color : #FFFFFF;
background : #6a8a22; }
</style>
</head>
<body>
<div id="container">
<div id="leftcolumn">
<div id="logo"></div>
<div id="menu">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Resources</a></li>
</ul>
</div>
</div>
<div id="rightcolumn">
<div id="header"></div>
<div id="photo"></div>
<div id="content"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam rhoncus. Etiam tincidunt rhoncus dolor. Nulla sollicitudin justo et tortor. Aenean ipsum libero, fermentum id, luctus sed, commodo sit amet, eros. Pellentesque a sapien sit amet est ultrices interdum. Nam ac elit. Quisque erat eros, mollis sit amet, consectetuer ac, adipiscing at, nibh. In hac habitasse platea dictumst. Nunc tempor, est id faucibus feugiat, erat urna convallis erat, sit amet ultrices libero nulla ut ligula. Phasellus ultricies, elit quis dictum adipiscing, quam quam iaculis nulla, at feugiat augue justo id nibh. Mauris eu orci ut quam sollicitudin facilisis. Proin pulvinar, sem sed tempor aliquet, augue quam pretium orci, et commodo turpis erat eget augue.</p>
<p>Quisque malesuada. Vivamus vehicula ultricies sapien. Fusce tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras tempor mauris eget ante. Sed tincidunt. Curabitur molestie commodo nisl. Nullam eleifend bibendum urna. Nullam rhoncus augue eu nibh. Duis lorem. In et velit. Cras tincidunt luctus dui.</p>
<p>Phasellus vel felis et metus porttitor egestas. Cras malesuada aliquam magna. In hac habitasse platea dictumst. Praesent ultricies lacus in massa. Donec ac lectus nec quam porttitor malesuada. Mauris in nulla. Nullam ultricies. Suspendisse vulputate, dolor eget consectetuer ornare, sem dolor lobortis metus, eget ornare nisi enim non enim. Suspendisse potenti. Suspendisse potenti. Vestibulum laoreet. Praesent dictum eleifend orci. Phasellus interdum porttitor orci. Praesent venenatis. Integer semper dui sed urna.</p>
<p>Donec gravida ipsum non eros. Nam a augue. Etiam nisi. Phasellus quis erat. Proin pharetra, tortor non aliquam sagittis, justo lorem laoreet nibh, ac congue ante risus ac nisl. In in lorem. Phasellus blandit, ante et eleifend fringilla, metus velit adipiscing nisi, id commodo lectus est sit amet justo. Donec vel urna. Cras lacinia ultrices tellus. Fusce facilisis, risus vel eleifend ultricies, pede lorem ullamcorper orci, id scelerisque dui enim sit amet turpis. Integer sollicitudin nulla a nulla. Phasellus dolor. Mauris ullamcorper venenatis mi. Mauris nisi eros, suscipit ut, suscipit nec, pretium eu, diam. Integer faucibus libero a est convallis adipiscing.</p>
<p>Maecenas fringilla erat. Etiam varius turpis faucibus velit. Nulla odio velit, posuere eget, pharetra et, porttitor ac, lectus. Nam non neque nec metus scelerisque porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam nonummy. Etiam sit amet est. Donec nibh pede, iaculis ac, porttitor sed, gravida sed, tortor. Pellentesque pellentesque velit quis mi. Quisque nisi lacus, posuere ac, laoreet a, congue vitae, libero. Mauris ullamcorper arcu a lacus rhoncus suscipit. Morbi mattis leo ac velit. Maecenas eleifend lacinia lacus. Cras elementum, arcu non tempus porta, lacus urna volutpat nisi, vel fermentum nulla magna sed mauris. Aenean condimentum, nulla quis laoreet aliquam, eros nibh aliquet sem, ac vulputate diam pede vitae diam. Pellentesque luctus.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam rhoncus. Etiam tincidunt rhoncus dolor. Nulla sollicitudin justo et tortor. Aenean ipsum libero, fermentum id, luctus sed, commodo sit amet, eros. Pellentesque a sapien sit amet est ultrices interdum. Nam ac elit. Quisque erat eros, mollis sit amet, consectetuer ac, adipiscing at, nibh. In hac habitasse platea dictumst. Nunc tempor, est id faucibus feugiat, erat urna convallis erat, sit amet ultrices libero nulla ut ligula. Phasellus ultricies, elit quis dictum adipiscing, quam quam iaculis nulla, at feugiat augue justo id nibh. Mauris eu orci ut quam sollicitudin facilisis. Proin pulvinar, sem sed tempor aliquet, augue quam pretium orci, et commodo turpis erat eget augue.</p>
<p>Quisque malesuada. Vivamus vehicula ultricies sapien. Fusce tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras tempor mauris eget ante. Sed tincidunt. Curabitur molestie commodo nisl. Nullam eleifend bibendum urna. Nullam rhoncus augue eu nibh. Duis lorem. In et velit. Cras tincidunt luctus dui.</p>
<p>Phasellus vel felis et metus porttitor egestas. Cras malesuada aliquam magna. In hac habitasse platea dictumst. Praesent ultricies lacus in massa. Donec ac lectus nec quam porttitor malesuada. Mauris in nulla. Nullam ultricies. Suspendisse vulputate, dolor eget consectetuer ornare, sem dolor lobortis metus, eget ornare nisi enim non enim. Suspendisse potenti. Suspendisse potenti. Vestibulum laoreet. Praesent dictum eleifend orci. Phasellus interdum porttitor orci. Praesent venenatis. Integer semper dui sed urna.</p>
<p>Donec gravida ipsum non eros. Nam a augue. Etiam nisi. Phasellus quis erat. Proin pharetra, tortor non aliquam sagittis, justo lorem laoreet nibh, ac congue ante risus ac nisl. In in lorem. Phasellus blandit, ante et eleifend fringilla, metus velit adipiscing nisi, id commodo lectus est sit amet justo. Donec vel urna. Cras lacinia ultrices tellus. Fusce facilisis, risus vel eleifend ultricies, pede lorem ullamcorper orci, id scelerisque dui enim sit amet turpis. Integer sollicitudin nulla a nulla. Phasellus dolor. Mauris ullamcorper venenatis mi. Mauris nisi eros, suscipit ut, suscipit nec, pretium eu, diam. Integer faucibus libero a est convallis adipiscing.</p>
<p>Maecenas fringilla erat. Etiam varius turpis faucibus velit. Nulla odio velit, posuere eget, pharetra et, porttitor ac, lectus. Nam non neque nec metus scelerisque porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam nonummy. Etiam sit amet est. Donec nibh pede, iaculis ac, porttitor sed, gravida sed, tortor. Pellentesque pellentesque velit quis mi. Quisque nisi lacus, posuere ac, laoreet a, congue vitae, libero. Mauris ullamcorper arcu a lacus rhoncus suscipit. Morbi mattis leo ac velit. Maecenas eleifend lacinia lacus. Cras elementum, arcu non tempus porta, lacus urna volutpat nisi, vel fermentum nulla magna sed mauris. Aenean condimentum, nulla quis laoreet aliquam, eros nibh aliquet sem, ac vulputate diam pede vitae diam. Pellentesque luctus.</p>
</div>
</div>
</div>
</body>
</html>
The issue you are facing is very common. When you have boxes with an absolute positioning in a container, they kinda act independently therefore do not force the main container to adjust its dimensions as needed.
In your case, I do not really see why you are using absolute positioning for the #leftcolumn and #rightcolumn.
By defining a realtive positioning for the two instead, your problem is solved. I also suggest you leave the height of #container to auto to let it stretch as needed by its content.
#leftcolumn{
width : 200px;
height:auto
min-height : 100%;
position : relative;
margin : 0;
background : #A1C50F;
border-right : 1px solid #72931F;
overflow:hidden;
}
#rightcolumn {
position : relative;
width : 599px;
height:auto;
top:0px;
left:0px;
margin-top : 0;
margin-left :1px;
background : #FFFFFF;
}
This choice has 2 benefits.
1- It solves the issue mentioned in your post.
2- #leftcolumn and #rightcolumn are themselves containers for other boxes (i.e. #menu, #header with absolute positioning).
In their current states, #menu and #header are positioned relatively to the main container (#container) instead of beeing in reference to the top left corner of #leftcolumn or #rightcolumn.
