Improve company productivity with a Business Account.Sign Up

x
?
Solved

How to stop Div losing left margin in IE7 when 'clear:both' div is added

Posted on 2008-10-10
3
Medium Priority
?
735 Views
Last Modified: 2013-11-19
I have hit a really annoying problem that manifests in IE only.

Essentially, the problem is:

container div containing many post
post div that holds text and floated image, and has a margin to center it within the container
a 'clear:both' div that is meant to clear the floated image, so that it always sits within the post div (otherwise it extends below it if the image is larger than the text

In FF it works fine.  In IE7, when the clear div is added at the bottom of the post div (i.e. where it needs to be) then the post div loses it's left margin.  

Strangely, the clear:both div can be added higher up in the post div without it losing it's margin?

Preview is here: http://experience5elements.com/intranet/

(See bottom post for the problem - the 'clear:both' div has a black border (the 2px by 10px box) for visibility)

Any ideas what's going on, and how to fix it?
Problem div HTML:
 
<div class="wall_post">
<div class="right">by Person D, 6th October</div>
<h2>Wall post with image</h2>
 
 
<p><a href="zensand.jpg"><img src="zensand.jpg" class="wall_image" align="right" /></a>Lorem ipsum dolor sit amet, est aliquam sagittis, volutpat enim rhoncus enim phasellus. Donec sem arcu fringilla ultricies, dolor id eros fames arcu, cras diam mollis, suscipit amet mauris morbi sem quisque. Enim lacus adipiscing eu. Erat eu congue tempus et tortor, euismod convallis lorem enim et scelerisque tristique, tristique justo donec ligula ut ut lacus, massa turpis aliquam sed donec malesuada semper, quis vitae wisi. Velit duis, nulla risus luctus varius sit, sapien lectus vel ultrices, nec adipiscing rhoncus sociis curae risus. Pulvinar mus mauris cras ut fringilla. Vitae lectus a, viverra vestibulum a nec pede vitae, tortor porttitor in placerat mauris nulla, ipsum aliquam, porta nulla volutpat nisl.</p>
 
<p><a href="#">Add a comment</a></p>
<div class="clear">&nbsp;</div>
</div>
 
 
Relevant CSS:
 
.wall_image {
width: 200px;
height: 200px;
padding: 25px;
border: 1px solid #ddd;
margin: 0 15px 15px 15px;
background: #fff;
}
 
.wall_post {
border: 1px #ddd solid;
background: #f0f0f0;
padding: 15px;
margin-left: 15px;
margin-right: 15px;
}
 
.clear {
clear:both; 
height: 2px; 
width: 10px;
border:1px solid #000;
}

Open in new window

0
Comment
Question by:freestate
1 Comment
 
LVL 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 22686389
The quick and dirty fix seems to be to give ".wall_post" width:860px or min-height:1px

A better solution would be to just remove the clearing element and use a better clearing technique. Other than floating the parent of the floated element(s) too (which would be  ".wall_post" in this case), which often isn't a good option, the PIE/Aslett approach is best: http://www.positioniseverything.net/easyclearing.html
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

595 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question