Help with Clear:both required

@Typhoon101Apr 15.2009

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

[code=html]<!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>[/code]

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?

~~[upl-file uuid=defefbd9-69d1-42b3-a07e-a302d83c5ca6 size=6kB]~~demo.gif[/upl-file]

to post a comment

CSS

6 Comments(s) _↴

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

@Typhoon101authorApr 16.2009 — #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.

@CoyotelabApr 16.2009 — #

[code=html]<!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>
 [/code]

@Typhoon101authorApr 16.2009 — #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.

[code=html]<!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>[/code]

@Typhoon101authorApr 20.2009 — #Anyone able to help?

@FangApr 20.2009 — #

 div#topRightPanel {
 border:1px dashed orange;
 width:250px;
 padding:3px;
 [COLOR="Blue"]margin-left:150px;[/COLOR]
 float:right;
 } 
 
 <i>    </i>    div#mainContent {
 <i>    </i>    }

Also in #CSS _↴

[RESOLVED] Automagically resizing site Side panel issues in IE7 and a generally useless scrollbar Help me decipher this template...

Success!

Help @Typhoon101 spread the word by sharing this article on Twitter...

Tweet This

Help with Clear:both required

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Help with Clear:both required

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴