Help with Clear:both required [Archive]

Typhoon101

04-15-2009, 09:47 AM

Hi. I have stripped out most of the code from my page, and left in the essentials to demonstrate my problem.

<!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-gb" lang="en-gb" >
<head>
<style type="text/css" media="screen">
div#leftPanel {
float:left;
width:200px;
height:100px;
background:yellow;
}

div#mainPanel {
margin-left:250px;
background:red;
}

div#innerPanel {
background:green;
width:200px;
height:50px;
float:left;
}

</style>
</head>
<body>
<div id="leftPanel"></div>
<div id="mainPanel">
<div id="innerPanel"></div>
<div style="clear:both"></div>
Here is some more text
</div>
</body>

</html>

The clear:both style in the inner div is pushing the subsequent text to below the height of the left panel. If i remove the doctype, the problem goes away, but obviously i don't want be doing that.

I found it a bit difficult to explain in words, so i attach an image of how it should look and how it does look.

Can anyone help me out?

Fang

04-15-2009, 10:24 AM

Remove <div style="clear:both"></div> and the float:left; from #innerPanel

Typhoon101

04-16-2009, 04:08 AM

I can't do that. As i said, i have stripped out most of the code and left only enough to demonstrate the problem. In reality, I need those there.

I nee help changing the CSS to fix the problem.

Coyotelab

04-16-2009, 05:04 AM

<!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>
<style type="text/css" media="screen">
div#container {
width: 98%;
margin: 0 auto;
}
div#leftPanel {
width:20%;
height:100px;
background:yellow;
float: left;
margin-right: 50px;
}
div#mainPanel {
background:red;
width: 75%;
float: left;
}
div#innerPanel {
background:green;
width:200px;
height:50px;
float:left;
}
div#text {
padding-top:50px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftPanel"></div>
<div id="mainPanel">
<div id="innerPanel"></div>
<div id="text"> Here is some more text </div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>

Typhoon101

04-16-2009, 06:42 AM

Hmm. I thought stripping out the unnecessary code would make things simpler, but I appear to have just confused things a little. Here is a better example.

The output of this page is almost as I want. The only thing wrong is the main content appears below the left panel. As the text explains, removing the clear:both style pushes the text inbetween the two upper boxes.

I need a liquid layout. I cannot define heights as they will be different on each page.

<!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-gb" lang="en-gb" >
<head>
<style type="text/css" media="screen">
div#container {
width:900px;
margin:auto;
}

div#leftPanel {
float:left;
width:200px;
border:1px dashed red;
}

div#mainPanel {
margin-left:210px;
border:1px dashed green;
padding:10px;
}

div#topLeftPanel {
border:1px dashed orange;
width:250px;
padding:3px;
float:left;
}

div#topRightPanel {
border:1px dashed orange;
width:250px;
padding:3px;
float:right;
}

div#mainContent {
clear:both;
}

</style>
</head>
<body>
<div id="container">
<div id="leftPanel">
<p>This panel contains content of an undefined height.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>

</div>
<div id="mainPanel">
<div id="topLeftPanel">
This panel is a placeholder for text. The content is varies in size from page to page, so a height cannot be defined for it.
</div>
<div id="topRightPanel">
This panel is a placeholder for text. The content is varies in size from page to page, so a height cannot be defined for it.
</div>

<div id="mainContent">
<p>This is where the main content starts. If i do not add a clear:both style, the text appears in between the above two boxes. Adding the clear:all style moves the content to below the left hand panel</p>
<p>Because the height of the above two boxes is undefined, I cannot just add padding to the top of this containing div.</p>
</div>
</div>
</div>
</body>

</html>

Typhoon101

04-20-2009, 06:56 AM

Anyone able to help?

Fang

04-20-2009, 07:17 AM

div#topRightPanel {
border:1px dashed orange;
width:250px;
padding:3px;
margin-left:150px;
float:right;
}

div#mainContent {
}