Solved

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

Posted on 2008-10-10
3
724 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
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

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Error on link 14 48
CSS z-index issue 3 32
two div layout one vertical other horizontal. 5 28
php mysql check email already in database. (second check) 7 28
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

777 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