Clearing only the last DIV

[LB]

Apologies if this sounds like a very newbie question.

I'm putting together a 3 column layout at the moment, the left 2 columns
are effectively menus and the third one is the 'content'.

Now, the content within the third column is brought in via a database,
and the problem I'm having is if an image file is 'taller' than the
text, the following article also wraps around the image. What I would
like to do is have that article, and its image, completely seperate.
So, if the image is taller, the next article will only display after the
image. Best way to describe this would be if you were using tables,
each article would be contained within it's own row.

I have tried using clear:both, clear:left etc - but in all instances the
next set of data is being put at the bottom of the whole page (i.e
under the menus aswell, rather than just under the last article within
the 3rd column).

I hope I've explained this clearly enough - the code isn't currently
hosted so I can't point you to it to clarify, but any pointers or tips
for tags I should investigate further would be much appreciated.

LB

[Els]

LB wrote:

I'm putting together a 3 column layout at the moment, the left 2 columns
are effectively menus and the third one is the 'content'.

Now, the content within the third column is brought in via a database,
and the problem I'm having is if an image file is 'taller' than the
text, the following article also wraps around the image. What I would
like to do is have that article, and its image, completely seperate.
So, if the image is taller, the next article will only display after the
image. Best way to describe this would be if you were using tables,
each article would be contained within it's own row.

I have tried using clear:both, clear:left etc - but in all instances the
next set of data is being put at the bottom of the whole page (i.e
under the menus aswell, rather than just under the last article within
the 3rd column).

I hope I've explained this clearly enough - the code isn't currently
hosted so I can't point you to it to clarify, but any pointers or tips
for tags I should investigate further would be much appreciated.

The thing is, that a clear:both or clear:left, will clear /any/
previous floats, including the ones in other 'columns'.
I haven't checked, but a clear:right may help in your case, if the
image would be floated right instead of left.

Otherwise you may consider making the 3rd column a float too, as
floats inside floats don't 'touch' floats outside their own (floated)
box.

Hmm.. that's a lot of floats in one sentence - I hope it still makes
sense?

If you're pursuing liquid design, obviously, you can't make the third
column a float, as floats need widths. However, you can float the two
left columns, set a margin-left on the third column (as I assume you
currently have it), and then inside the third column, you add another
<div> which will contain all the contents, and which you give a 100%
width and float:left.

You must be aware though, that in IE, the paddings and borders are
added to the width, so you can't give the floated inner div any
padding or border on top of the 100% width, as it won't fit in its
place that way. You'll need to either set the paddings on the
paragraphs, or insert yet another div inside the float, which you can
give paddings and borders to your liking :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Velvet Underground - I'm Waiting For The Man

[Jasper de Vries]

LB wrote:

Apologies if this sounds like a very newbie question.

I'm putting together a 3 column layout at the moment, the left 2 columns
are effectively menus and the third one is the 'content'.

Now, the content within the third column is brought in via a database,
and the problem I'm having is if an image file is 'taller' than the
text, the following article also wraps around the image. What I would
like to do is have that article, and its image, completely seperate. So,
if the image is taller, the next article will only display after the
image. Best way to describe this would be if you were using tables,
each article would be contained within it's own row.

I have tried using clear:both, clear:left etc - but in all instances the
next set of data is being put at the bottom of the whole page (i.e
under the menus aswell, rather than just under the last article within
the 3rd column).

I hope I've explained this clearly enough - the code isn't currently
hosted so I can't point you to it to clarify, but any pointers or tips
for tags I should investigate further would be much appreciated.

LB

Try overflow:auto on the container

--

Jasper
http://browservulsel.blogspot.com/

[LB]

Els wrote:

The thing is, that a clear:both or clear:left, will clear /any/
previous floats, including the ones in other 'columns'.
I haven't checked, but a clear:right may help in your case, if the
image would be floated right instead of left.

Otherwise you may consider making the 3rd column a float too, as
floats inside floats don't 'touch' floats outside their own (floated)
box.

Hmm.. that's a lot of floats in one sentence - I hope it still makes
sense?

If you're pursuing liquid design, obviously, you can't make the third
column a float, as floats need widths. However, you can float the two
left columns, set a margin-left on the third column (as I assume you
currently have it), and then inside the third column, you add another
<div> which will contain all the contents, and which you give a 100%
width and float:left.

You must be aware though, that in IE, the paddings and borders are
added to the width, so you can't give the floated inner div any
padding or border on top of the 100% width, as it won't fit in its
place that way. You'll need to either set the paddings on the
paragraphs, or insert yet another div inside the float, which you can
give paddings and borders to your liking :-)

Thanks Els, I managed to follow that!

I tried a few variations, and in the end found the best route was to
create a container for the third column, then have each article within a
div set with overflow:auto - seems to have done the trick nicely.

Thanks again

LB

[LB]

Try overflow:auto on the container

Thanks Jasper, managed to sort it using that combined with some of Els
advice.

LB