Internal Server Error

what the voices in my head tell me to write

Wednesday, August 31, 2005

finally got floats tamed in all browsers for Connect and customised versions of it

For a long time I have been using a clearing <p> to sort out floats with connect. This works in all browsers for connect itself as it uses absolute positioning to position things like the navbar so there is no issue with clearing <p>'s interferring with one another the layout in all good browsers.

I have been working on a customised version of the site for a client that needs to have floats to get the menu and content plus headers etc working properly. There was no way to get it done using absolute positioning due to the layout contraints. (sorry you cant see the site... still developement only).

I spent ages messing around with

clear: none

etc to try and sort things out but to no avail.

Then I found this tutorial on quirksmode. Apparently this trick is not a hack but how things really are meant to be.

After a bit more head scratching this is how I applied it to the new site.

#content > #main-content-container p.hidden {
 display: none;
}
#main-content-container > div {
 overflow: auto;
}

The first rule gets rid of the clearing paragraphs in every browser but IE. The second targets the outer containers for the floats in the same browers (some of the layouts ended up with 5 levels of <div>'s to get some things to work.

Bingo! In theory I could go through all the jsp's for connect and get rid of <p class="hidden">> </p> now but I think I will save that for a very rainy day.

Permanent link and Comments posted by Rob Cornelius @ Wednesday, August 31, 2005

Comments: Post a Comment