Problems with float:left float:right

Hey all,

I'm a new member here, just wanted to know a good way to layout a site in css for browser resolutions over 800 x 600 . I have made one, but when viewed in 1260 x whatever becomes completely screwed up.


=-Jo

You need to start by thinking about whether the design of a site lends itself to a fluid width or whether it is better with a fixed width. If it's going to be a fixed width design, then you need to design for 800px wide less scrollbar etc. typically 760px max.

If you decide you are going for a fluid design then you need to structure things in such away that this flexibility doesn't break the design at certain widths.

Just to clarify a point from your question, you don't layout a site in css. you layout (structure) a site in (x)html and use css to control the 'look-n-feel' of the site.

Yeah,

I was making my design fluid with the float:left float:right clear:both. Designing 760px. How do I get it to show up on higher resolutions?

I don't know if this will help but i just had an alignment problem with floats.
see my site www.skiaustralia.abshost.net . The floats weren't sitting next to each other when assigned these properties.

Code: Select all

#sidebar    {padding: 0 10px 10px 10px;
                   float: left;
                   width: 110px;
}

#insidemain    {width: 550px;
                        float: right;
}

so i had to put this in my html under the floats. and it fixed them up

HTML: Select all

<!-- CLEAR BOTH FLOAT. THIS IS IMPORTANT! IF YOUREMOVE THIS LINE, YOU'LL END UP SCREWING THE CONTENT AND THE SIDEBAR COLUMN -->
<div style="clear: both;">
</div>
<!-- END FLOAT CLEANER -->    

hope this will help

I've written an article about clearing floats. Simply clear: both; won't work in all browsers. The links at the top of this forum in the sticky.

what browsers won't support clear: both; ?

It's not that they don't support clear: both; it's just that they don't all see a <div> as being wide enough to cover the whole area. Sometimes just the single propery will work, but most likely not in all browsers and certainly not in all instances of its application.

In my opinion, clear and float are the two most misused properties in CSS.

fair enough

it works for me in IE and FF, for other browsers however, i don't know. Also i'm only fixing two divs, that may make a difference to the outcome.