|
Posted by Fister on 01/04/08 19:28
Hello Ben,
> Put another div around #something-else, with clear: both and
> padding-top: 1px set on it.
Thank you very much for the code. At first it worked but now I've added another
two columns to the left and right which causes problem with clear: both.
Could you / anyone help me? I think this should be easy to solve but I can't
figure out how :-/
Here is the code:
http://www.bullamanka.dk/test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="dk">
<head xmlns="">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Test</title>
<style type="text/css">
body
{
margin: 10px 0 10px 0;
padding: 0;
text-align: center;
}
#page
{
background-color: #FFFFFF;
margin: 0 auto;
text-align: left;
width: 740px;
}
#page-left-column
{
background-color: #E2E2E2;
float: left;
height: 300px;
width: 200px;
}
#page-center-column
{
margin: 0 210px 0 210px;
}
#page-right-column
{
background-color: #E2E2E2;
float: right;
height: 300px;
width: 200px;
}
#page-center-column-left-column
{
background-color: #B9B9B9;
float: left;
width: 100px;
}
#page-center-column-right-column
{
background-color: #B9B9B9;
float: right;
width: 100px;
}
#page-center-column-center-column
{
background-color: #E2E2E2;
margin: 0 110px 0 110px;
width: 100px;
}
#page-another-container
{
background-color: #D9D9D9;
height: 100px;
margin-top: 24px;
}
#clear
{
clear: both;
padding-top: 1px;
}
</style>
</head>
<body>
<div id="page">
<div id="page-left-column">
left
</div>
<div id="page-right-column">
right
</div>
<div id="page-center-column">
<div id="page-center-column-container">
<div id="page-center-column-left-column">
left left left left left left left left left left left left left left
left left left left left left
</div>
<div id="page-center-column-right-column">
right right right right right right right right right right right right
right right right right right right right right
</div>
<div id="page-center-column-center-column">
center center center
</div>
</div>
<div id="clear">
<div id="page-another-container">
another
</div>
</div>
</div>
</div>
</body>
</html>
[Back to original message]
|