4 replies [Last post]
hoofdvolchips
Offline
newbie
Last seen: 16 years 7 weeks ago
Joined: 2004-08-10
Posts: 3
Points: 0

I'm trying to make a general paragraph-with-picture-alongside layout, and using the following tactic:

<div class="art">   <!--For a single article-->
<h1>title</h1>
<div class="floatright"><img src="blah.jpg" alt=""><br>Caption</div> <!--For an image w caption floating right-->
<p>Paragraph text</p>
</div>

Now, given a large picture, the article look like this:

---------
Text |  |
-----|  |

That is, the picture flows over to the next article (giving an ugly effect is that article also contains a picture)

This is my first project with CSS, and from my logic, the picture should be contained within the division (which it is not). Is there an easy way of making the "art" division stretch in such a way that the picture is contained within?

(For an example, check www.phys.uu.nl/~beer/twinkamp/test.html)

Edit: Hmm, seems the spell checking doesn't work very well on post titles, sorry about that...

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 36 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Flaoting pictures and alignment with paragraphs

Before closing "art" div add ~

<br clear="all" />

for example ~

<div id="art">
<h1>16-07-2004 Bokker verslaat Bellekom</h1>
<div id="picleft"><img src="wendy.jpg"><br>
Wendy Bokkers, voor de
rit</div>
<p>Het eerste dagsucces om de Mont Ventoux staat op naam van Wendy
Bokkers, de nieuwste aanwinst van Team Giant. Wendy wist in een
spannend duel met Merijn Bellekom de laatste zes kilometer voor de
finish definitief af te schudden, om vervolgens onder de
twee-en-een-half uur de top te bereiken. Opvallend detail is dat
de renner als enige niet voor een triple koos om naar boven te
rijden, maar gewoon de standaard twee bladen voor meenam. Alleen
een mietje steekt een drietje, blijkt weer.</p>
<br clear="all" />
</div>

Strictly speaking you should change your id="art" to class="art" as it occurs more than once on your page.
The same applies to "picright" and "picleft".

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

hoofdvolchips
Offline
newbie
Last seen: 16 years 7 weeks ago
Joined: 2004-08-10
Posts: 3
Points: 0

Flaoting pictures and alignment with paragraphs

Thank you. I've changed the id's into classes now (did that before, just forgot to upload it). It looks great (or at least, decent) in Opera and IE, but Firefox doesn't seem to pick it up. Is the <br clear="all" /> IE/Opera specific?

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 36 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Flaoting pictures and alignment with paragraphs

Looks ok in my version of FF.

You could try using ~

Style
.clear {clear:both;}

html (instead of <br clear="all" />)

<div class="clear"></div>

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

hoofdvolchips
Offline
newbie
Last seen: 16 years 7 weeks ago
Joined: 2004-08-10
Posts: 3
Points: 0

Flaoting pictures and alignment with paragraphs

I haven't tried out the .clear option yet, but it seems that mozilla will do it right when I include size specification in images (as I should according to web standards). Now, where did I put my ruler again....