|
Posted by Hymer on February 9, 2008, 12:50 pm
Please log in for more thread options > You seem to be putting a 25px top margin on "Ergonomics Store"
> hoping
> that that will make it go all the way to the right and underneath
> the
> other right floats (User Experience, Mobile Site, etc.)
>
> But it's always the "outer edge" or "margin edge"-- i.e. the box
> outside
> all the margins-- that's used for floats, so that won't work. All
> you're
> doing is making Ergonomics Store's outer box an extra 25px high. It
> won't start going under the floats that are already there until
> there's
> no more horizontal space available. Note that the presence of the
> absolutely positioned USERNOMICS image on the left doesn't in any
> way
> affect the space available-- it's absolutely positioned and "out of
> the
> flow".
>
> Now you _could_ put clear: right on Ergonomics Store (instead of the
> top
> margin), but that's not a good solution. It's a bit like manually
> inserting a carriage return-- but you don't know that the series of
> images will naturally want to "break" onto two lines at that point
> in
> all viewport widths.
>
> Better is to make the big USERNOMICS thing on the left float: left
> instead of position: absolute. Then just lose the extra top margin
> on
> Ergonomics Store-- the right floats should now flow into the space
> to
> the right of the left float, instead of slipping underneath the
> USERNOMICS image.
Hi Ben,
I tried your last suggestion but was not sure how to handle making the
Usernomics image float left. There was no image map on it so I added
one (imgmap6) and floated it left. But that did not work. You can see
this version at http://www.usernomics.com/user-experienceTEST.html .
As you can see, I don't really know what I am doing here.
Note that I removed the 25px from the top by making all of the images
imgmap4. Can you see how I should handle the Usernomics image?
Thanks a lot Ben,
Bob
|