Layout woes in Webkit - DIV wont expand to find contents

HTML & CSS
1

The front page of my site works fine in Firefox and even Internet Explorer, but in webkit browsers (Safari & Chorme), it’s broken:

[URL=“http://www.electricdenim.co.uk”]http://www.electricdenim.co.uk

The lead graphics area uses an absolutely positioned DIV inside of a relative positioned one. This is necessary so the base of the text lines up with the base of the image. For some reason, in webkit the container (relative) DIV wont grow to fit the contents.

The featured products area in the footer also seems to have growing problems, even though it is regular DIV with no positioning applied.

Bizarrely, everything works fine in IE8. Even IE7 manges to render most of without being too broken!

I’ve tried hard to solve these problems, but I can’t find a solution. I’m kind of stumped, as I usually spend most of time trying to get things to work in Internet Explorer - Webkit normally behaves!

Any pointers would be most appreciated.

2

Hi,

Because #main has overflow applied the margins are not sliding under the float and shortening the amount of space available. Remove the margin-left from #main and instead use a right margin on the sidebar.


#main{
overflow:hidden;
min-height:0;/* ie7*/
}
* html #main{zoom:1.0}/* ie6*/
#sidebar {
  float: left;
[B]  margin: 0 30px 0 0;[/B]
  width: 128px;
}

The floats in your featured products aren’t the same height and will snag when they wrap. Either set them to be the same height or instead use display:inline-block.


.featured {
[B]  display: inline-block;[/B]
[B]float:none;[/B]
  font-size: 14px;
  padding: 5px;
  vertical-align: top;
  width: 128px;
}
* html .featured{display:inline}/* ie6 inline block hack - keep separate*/
*+html .featured{display:inline}/*ie7 inline block hack - keep separate*/