Code: Select all
#sidebar {
width: 200px;
float: left;
}
#content {
margin-left: 200px;
}Basically, on one of my pages I want to split the #content panel directly in half at 50% vertically. This will happen in more than one place on the same page.
Here's a (colorful) example:
http://localhost/~d11wtq/layout-baff.html
Code: Select all
<!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" xml:lang="en" lang="en">
<head>
<style type="text/css">
div#page_container {
width: 100%;
}
div#sidebar {
width: 200px;
background: red;
float: left;
}
div#content_pane {
margin-left: 200px;
background: yellow;
}
div.left50 {
float: left;
/* cannot use 50% since IE is crap at calculating it */
width: 49%;
background: green;
}
div.right50 {
/* see comment regarding 50% above */
margin-left: 51%;
}
div.clearer {
clear: both;
}
</style>
<title>Layout Baff</title>
</head>
<body>
<div id="page_container">
<div id="sidebar">
LEFT<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Really long sidebar
</div>
<div id="content_pane">
RIGHT
<div>
<div class="left50">
INNER LEFT TOP<br />
<br />
<br />
Long sentence.
</div>
<div class="right50">
INNER RIGHT TOP
</div>
</div>
<div class="clearer"> </div>
<div>
<div class="left50">
INNER LEFT BOTTOM
</div>
<div class="right50">
INNER RIGHT BOTTOM
</div>
</div>
</div>
</div>
</body>
</html>

