Posted by Els on 11/01/05 19:54

cyber0ne wrote:

> I've been putting together a test page for a re-design of my website,
> focusing as much as I can on standards and portability of code, and I'm
> running into a problem with some text wrapping.
>
> For reference, the page is at http://www.cyber0ne.com/test/css
>
> Note the whitespace after each small image in each article.
> Previously, all of the boxes on the right-hand side of the page were
> contained in a single box. Since this box started above the images in
> the articles on the page, setting the images to float: left worked like
> a charm and text wrapped around them just fine.
>
> However, in the effort to get the right-column objects out of a group
> and on their own, I have removed them from that main box. (That way,
> should I make other designs, I can more easily freely move them about
> the page independantly of one another). But that caused the floated
> images in question to be pushed downward to after the last right-hand
> box.
>
> Removing the float: left tag put them back where they needed to be, but
> now the text starts on the following line, leaving all this whitespace.

Yup, you need to put the float:left back in the styles for .BlogImage.
But don't add clear:left to it.

> Any ideas on how I should fix this, while still keeping the overall
> layout?

If you add the float:left without the clear:left, and the problem
persists, take away any other clear properties that you don't really
need. Looking at your stylesheet, it seems you put clear properties on
every single float. Clearing a float though, means no other floats
will be tolerated next to it.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: 2 Unlimited - Nothing Like The Rain (Spanish Version)

[Back to original message]