Forum Moderators: not2easy
I'm trying to build a typical 3-column page with the following containers:
- Outer container (id=outerDiv)
- Fixed size banner (id=bannerDiv)
- Container for three columns (id=threeColDiv)
- Left container (id=leftBlocks)
- Center container (id=centerBlocks)
- Right container (id=rightBlocks)
- Footer (id=footerDiv)
and the following layout:
- body contains outerDiv
- outerDiv contains (stacked vertically)
- bannerDiv
- threeColDiv
- footerDiv
- then threeColDiv contains the three *Blocks divs,
arranged as three columns.
Other requirements:
- outerDiv should 'contain' visually all its inner elements
- threeColDiv should 'contain' all its elements
- threeColDiv, and hence outerDiv, should expand so that their borders continue to contain the *Blocks, whenever the content of any of the columns expands vertically.
The problem is that I can't get this last part to work on some of the browsers (I can get IE to do it, but that may be because IE is rendering my code incorrectly).
If I don't use float:left then the columns remain in block mode, but all the divs contain each other correctly. If I use float:left/right to get the column divs side by side than the outerDiv and threeColDiv no longer visually contain the columns - they shrink so that the various divs overlap.
My whole page is here:
-------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Blocks</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="distribution" content="global">
<style type="text/css" media="screen">
html{
padding:10px;
border:2px solid green;
}
body {
border:1px solid red;
height:100%;
margin:5px;
padding:10px;
}
p {display:block;padding:0px;margin:0px}
#outerDiv{
border:1px solid black;
height:100%;
margin:50px;
}
#bannerDiv{
display:block;
height:150px;
border:1px solid green;
margin:5px;
}
#threeColDiv{
display:Block;
position:relative;
height:100%;
border:1px solid blue;
margin:5px;
}
#leftBlocks{
border:1px dotted red;
margin:5px;
width:150px;
height:auto;
}
.leftBlock{
width:100%;
}
#centerBlocks{
border:1px dotted red;
margin:5px;
width:500px;
height:auto;
}
#rightBlocks {
border:1px dotted red;
margin:5px;
width:50px;
height:50px;
}
.textDiv{
display:block;
height:auto;
border:1px solid green;
margin:5px;
}
</style>
</head>
<body>
<div id="outerDiv">
<div id="bannerDiv">
bannerDiv is what would be the banner<br />
html=Green, body=red, outerDiv=black<br />
</div>
<div id="threeColDiv">
<div>
<div id="leftBlocks">
<div class="leftBlock">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="centerBlocks">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="rightBlocks">
</div>
</div>
</div>
</div>
</body>
</html>
The css
html, body {margin:0px; padding:0px; background:#eee; font-family:verdana; font-size:12px;}
/* The header and footer */
.headfoot {display:block; height:70px; background:#08a; color:#fff; text-align:center; padding:5px;font-size:30px;}/* This bit does all the work */
#container {position:relative; display:block; background:#0ac; border-left:200px solid #aa8; border-right:200px solid #a8a;}
#inner {display:block; margin-left:-200px; margin-right:-200px; padding:5px;}
#left {float:left; position:relative; width:200px; left:0px;}
#right {float:right; position:relative; width:190px; right:0px;}
#center {margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;}
.clear {clear:both;}/* Just to extend each column */
#inner a:visited, a {color:#000; text-decoration:none; cursor:default;}
#inner a span {display:none;}
#inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;}
#inner a:active span, #inner a:focus span {display:block;}a:visited, a {text-decoration:underline; cursor:pointer;}
a:hover {text-decoration:none; cursor:pointer;}em {font-weight:bold;}
The html:
<div class="headfoot">Header</div><div id="container">
<div id="inner">
<div id="left"><a href="#"><em>CLICK</em> here to make the left column the longest<span>this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column</span></a></div><div id="right"><a href="#"><em>CLICK</em> here to make the right column the longest<span>this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br /></span></a></div>
<div id="center"><a href="#"><em>CLICK</em> here to make the middle column the longest<span>this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br /></span></a></div>
<div class="clear"></div>
</div></div>
I'll sticky the URL
<div class="headfoot">Footer<br />NOTHING could be simpler...!</div>
I think my problem is resolved by the appropriate use of the extra 'inner' container around the columns and the relative positioning.
I'll use that as a starting point.
Cheers.
