clear:both issue

Forum Moderators: not2easy

Message Too Old, No Replies

clear:both issue

vivalasvegas

9:12 am on Nov 4, 2010 (gmt 0)

I've been spending several hours trying to figure this out. It's probably not a complicated issue for an experienced html programmer:

I use the "clear:both" css command to force the footer below the left column (when this column extends down beyond the content box). This works well with an adsense skycraper in the left column, but when replacing it with an image of the same size, the image overlaps with the footer links.

Any suggestions?

alt131

11:19 am on Nov 4, 2010 (gmt 0)

Hi vivalasvegas,

Not sure if I quite understand your html stucture, but keep in mind that clear only applies to block elements (and an image is inline).

My other thought is that if you have the left column and footer as block elements (perhaps divs), then you should be able to clear. However is the left column actually expanding to contain the contents (like the image), or is the image protruding out the bottom of the container so the footer is clearing the left column, but not the image? Something like:
|---------|
|---------| Left column
|---------|
|*******| Image
|*******|
|---------| End left column
|*******|-Footer start------||
|*******|-------------------||

rocknbil

4:33 pm on Nov 4, 2010 (gmt 0)

Also if you're doing this,

<p>some stuff</p>

<div id="footer" style="clear: both">

try this instead.

<p>some stuff</p>

<div style="clear: both"></div>

<div id="footer">

There are situations where the clearing element needs to be a separate element.

vivalasvegas

9:55 am on Nov 5, 2010 (gmt 0)

alt131:
The image is indeed protruding out of the left column div.

Rocknbill:
I tried your suggestion and it doesn't work.

rocknbil

3:46 pm on Nov 5, 2010 (gmt 0)

Well, I tried to fix it for you, but couldn't emulate the behavior. Didn't even need a clearing element, see below (test code.) I suggest you start removing elements until you find the culprit.

Since it only happens on an image, I'd look for anything that changes the inline default of an image (block? float? not sure.)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
<style type="text/css"> 
/* borders just for exercise */ 
 #wrapper { width: 804px; margin: auto; border: 1px solid #000; } 
 #content { width: 675px; float: left; border: 1px solid #ff0000; } 
 #sidebar { width: 120px; float: left; margin-left: 5px; border: 1px solid #0000ff; } 
 /* this line added ONLY to try and break it. */ 
 #footer { width: 400px;  border: 1px solid #00ff00; } 
 #footer ul, 
 #footer ul li { margin:0; padding:0; text-align: center; } 
 #footer ul li { display: inline; list-style: none; } 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="content"> 
<p>Shallow content. Shallow content.  
Shallow content. Shallow content. </p> 
</div> <!-- content --> 
<div id="sidebar"> 
 <!-- this is a 160 X 600 image. I intentionally 
 left the size attributes off trying to break it. 
 it didn't. --> 
 <img src="sidebar.jpg" alt="test"> 
 </div> <!-- sidebar --> 
 <div id="footer"> 
 <ul> 
 <li><a href="#">Home</a></li> 
 <li><a href="#">About</a></li> 
 <li><a href="#">Blah</a></li> 
 <li><a href="#">Contact</a></li> 
 </div> 
</div> <!--wrapper --> 
</body> 
</html>

clear:both issue

vivalasvegas

alt131

rocknbil

vivalasvegas

rocknbil

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week