Solved

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

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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

707 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