| SitePoint Sponsor |
On http://amaranth.mine.nu/css/ I have floated the right <div> but it goes below the left one. If I float the left one or move the right one above the left in the HTML it works fine. This seems like it would be really simple but I'e never figured it out. Any ideas?
Thats how floats work, you need to put it before the content you want to the side of it. If you put it after it will just go below the last block element.
I think that the better wya to do it might be to use float:left; in your left div and float: right; in you right div, then perhaps try using display: inline;
try that and see if it helps
My postings are a natural product.
The slight variations in spelling and grammar enhance its
individual character and beauty and in no way are to be
considered flaws or defects - http://www.guinnesspig.net
Sorry but that's not the way to do itthen perhaps try using display: inline
Gambling Harry was exactly right. Floats will float as far and as high as they can unless there is content in the way. They will not float up over content.
Therefore content that needs to wrap around a float must follow the float.
So all that was needed in your example was to move the elements in your html around.
Quite simple really and obvious once you think about it
PaulCode:<body> <div id="right"> Test </div> <div id="left"> Foobar </div>
Yeah, I knew it worked like that but I was hoping I didn't have to. Oh well, I guess I'll have to toss a "Skip Nav" link in there and be done with it.
Hi,
Well it all depends what comes next doesn't it ?
If your nav is to be down the left or down the right then I usually place it absolutely and then clear it with margins for the main content.
That way the content comes first in the html and the nav can go right at the end. Of course it does depend what else you want to follow etc.
If you float it then the order has to be correct in the html for it to work.
Paul
Posting Permissions
Bookmarks