IE7 not displaying my margin-bottom: 4px;

[braves07]

My main area is called - "content" I have a 1px border going around it.

Inside content I have 2 columsn - "content_left" and "content_right" They both have a 1px border on them as well. With a margin: 4px 2px 4px 4px;

For some reason IE7 is not putting the 4px bottom margin between - "content" border and "content_right, content_left border. Instead the borders from the inside div's are appearing on top of the outside border. It displays correctly in firefox and IE6 (imagine that) but not IE7.

#content {
width: 632px;
height: auto;
border-top: #C1C1C1 1px solid;
border-left: #C1C1C1 1px solid;
border-right: #000000 1px solid;
border-bottom: #000000 1px solid;
margin: 5px 0px 10px 0px;
overflow: hidden;
}

#content_left {
width: 442px;
float: left;
display: inline;
border-top: #000000 1px solid;
border-left: #000000 1px solid;
border-right: #C1C1C1 1px solid;
border-bottom: #C1C1C1 1px solid;
margin: 4px 2px 4px 4px;
height: 525px;
}

#content_right {
width: 174px;
float: left;
display: inline;
border-top: #000000 1px solid;
border-left: #000000 1px solid;
border-right: #C1C1C1 1px solid;
border-bottom: #C1C1C1 1px solid;
margin: 4px 4px 4px 2px;
height: 525px;
}

I need content_left and content_right bottom borders to line up so I added height: 525px; because I can't figure a way for them to line up any other way. Ideally they would line up without me having to specify height.. so they could change with content...

Any help would be appreciated.

 

[Vragabond]

What are you using to clear the floats? Since floated elements do not contribute to the height of their parent, I would expect (without any noticeable clearing technique) the container to be at 0 height.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[braves07]

I'm confused. I'm not sure what you mean... or how to achieve the clearing. the html is setup like this.

<div id="content">
  <div id="content_left">
    <p>Information</p>
  </div>
  <div id="content_right">
    <p>Information</p>
  </div>
</div>

 

[Vragabond]

Clearing floats needs to be done to make the container element embrace the floated children. See link for more.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[braves07]

Hi, thanks for the link. That was a good read, I was unaware of that. But it says that solution does not work in IE7. I already had a width and overflow defined in my container. Also, my border isn't stuck at the top. It displays correctly at the top and both sides and the border is there at the bottom. For some reason it just isn't adding the 4px margin at the bottom from the inside elements. Thanks for your effort and help. It is much appreciated.

 

[BillyRayPreachersSon]

I normally use the markup found here, which does work in IE7:

http://www.positioniseverything.net/easyclearing.html

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]