Thread

Hello,

I’m trying to import a design to EE and am having a slight problem.

I’ve got the design to look “nearly” right in FF, but its still fairly off in IE.

I’ve attached a screenshot taken in IE. 

The border that encompasses the first row, with 3 columns (2 article columns, and a column comprised of thumbnails) appears fine - But the second row (containing the same as above) appears outside of the border.  I’m trying to get the border to encompass it all.

The footer of the page also appears just under the bottom border of the first row (so appears in the middle of the vertical page).

In FF, the same border problem occurs, but the footer appears correctly (at the very bottom of the page).

I had this working fine originally but I moved the EE tags around and I think I’ve messed some some div up some where and/or the placement of the EE tags.

If anyone could take a look at this for me I’d really appreciate it.

Thanks,

Tom

Hi Tom,

You are dealing with the classic problem of float clearing. Rather than explain it…. have a nice read here: http://www.positioniseverything.net/easyclearing.html

Essentially place a

below all your floated elements to force the enclosure to stretch out. (And DON’T forget to remove the height from your CSS:

#bottomcontent {
border-left:1px solid #C5C5C5;
border-right:1px solid #C5C5C5;
height:300px;  // remove this!!!
width:898px;
}

Or use the CSS clearfix hack as described in the link above.

Cheers

asozzi,

Thank you very much, that fixed it perfectly.

Funnily enough, just removing the height from bottomcontent fixed the IE issue, but created a minor “border” issue in FF (which clearing fixed).

Many thanks again,

Tom

double post.