Solved

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

Posted on 2008-10-10
3
728 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 500 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
MediaWiki - Move a site 4 50
Top Aligning Inner Divs 5 32
object method as an event handler 8 69
Wordpress Responsive Web design and iPads 11 35
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

734 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