Left / right aligning an image to allow text wrapping without float

Looking for best practice method

[JamieCon]

Hi All,

I'm working on creating a front page for a site which I visualise as having a standard 'magazine' type layout with links to stories consisting of a couple of sentences, an image and a headline in a grid type layout. Some with span across two columns, other rows will have two stories.

My problem is this. I have my 'news stories' wrapped in a <div>. I then follow the div with an <img...>, a <h3> and then short text in a <p>. I then close the div.

I have two different style sets for a spanned story, and one that sits in one column. At present, to align the image in the story and wrap the text around it, I use float: left / right for the <img>.

This causes a problem because it lifts the image out of the hierachy, so I can't put borders round the news snippets if I need do, and strange things start happening below them if there is space after the text.

Can anyone suggest a better way of wrapping the text around the image that doesn't include float?

<div class="articlelink-fullwidth">
<img src="img_hotel.jpg" width="120" height="111">
<h3>Hotels in Dubai</h3>
<p>Dubai is famous throughout the world for its luxury hotels. The breathtaking architecture employed in the building of much of its acommodation is a tourist attraction in itself. Vist our <a href="dubai-hotels.asp">Hotels</a> section to see pictures and reviews of <a href="dubai-hotels.asp">Hotels in Dubai</a>.
</div>

.articlelink-fullwidth {
margin: 10px 0 0 0;
border: 1px dashed black;
}
.articlelink-fullwidth img {
float: left;
border: 1px solid black;
margin: 0 5px 0 0;
}
.articlelink-fullwidth h3 {
margin: 0;
font-size: 14px;
}

Many thanks in advance for any help,

Jamie

[Span]

This causes a problem because it lifts the image out of the hierachy, so I can't put borders round the news snippets if I need do, and strange things start happening below them if there is space after the text.

What you need is a 'clearing' element right before your closing div tag:

.clear {
clear:both; // both, left or right
}

... Hotels in Dubai</a>.</p>
<div class="clear">
</div>
</div>

That will make the div encompass it's content, so you can give it a border.

[JamieCon]

Hi Span,

Thanks for your suggestion.

I'm aware of this workaround, and I did consider it, but I was wondering if there was an alternative to this - it seems a little annoying to have to add that to my markup after each div - plus, I wouldn't easily be able to put two of those elements next to each other if I wanted to.

What i'm really looking for is a way to get the images to look as they do now floated, but without using a float.

As before, i'm grateful for any input.

- Jamie

[Span]

Clearing a float is not a hack, it is in the specs and is as old as html. Clear is the CSS equivalent of the HTML clear attribute (clear="all").

If you want text wrapping around an image.. well, I think floating and clearing is the only way to do it. Like we used to align and clear.

Or maybe someone else has an idea?

[JamieCon]

I realise it's not a hack, but I do think that it's not a very elegant way of doing things since it requires extra markup in the content file.

Floats are very useful in many contexts, but what I am after is a way of getting my desired layout while containing everything within a single div - something that floating the image denies me.

I thought about maybe using left margins on p and h3 tags, but I couldn't get anything to work. I'd be grateful for any ideas.

Roll on CSS tables!

- Jamie

[Span]

Jamie,

there is a way to clear floats without extra markup, although it does not work in IE - but IE autoclears floats I've been told... (I'm a Mac user.)

div.articlelink-fullwidth p:after {
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}

[JamieCon]

Span,

Thanks for all your help. I've decided to go for the safe solution and your first suggestion.

Cheers,

Jamie

[quiet_man]

Using XHTML, you can align the img within the <p>:

<p><img src="img_hotel.jpg" width="120" height="111" align="right" />Dubai is famous throughout the world ... </p>

If there is sufficient text it will wrap around the image. Use hspace and vspace to add appropriate padding.

[JamieCon]

Hi quiet_man,

Thanks very much for your suggestion. However, i'm trying to go for a pure CSS layout. Although to be honest, at the moment XHTML is looking like the easiest method!

[createErrorMsg]

Clearing a float is not a hack

If you allow that a hack is using something to a purpose for which it was not originally intended (admittedly, this is my definition), then using a clearing element is a hack. Using clear is not, but adding a non-semantic element to the source code in order to have something to apply clear to, is.

This does not, however, in my book, disqualify it as a useful technique. ;)

Float clearing methods include:

1) a clearing element (Spans suggestion #1)
2) float clearing with semantic markup (Spans suggestion #2)
3) float the container
4) apply overflow:auto to the container (buggy)

Personally, I use option 3 whenever I can and option 1 when I can't (simple = good, IMO).

cEM