floating divs

Zaphan58 · 9 Sep 2007 at 20:48

I have a problem which is most likely pretty straight forward.

What I am trying to do is have have an image and then along side the image on the right hand side some text.

I created two divs and floated them left, one for the image and another for the text which has worked and given the desired affect.

The problem is I want to duplicate this but a few lines below for another set of images and text. What I have currently done obviously floats the next set along side the first set.

Ideas?

SooTyLaD · 9 Sep 2007 at 21:48

hi mate,

you could either make sure the container can only fit 2 columns (i.e. have the floated divs 200px wide and the containter < 600px, alternatively stick each two in another div with clear:both; to make sure nothing gets floated along side?

just some ideas mate, hopefully one can be of help

ultim · 9 Sep 2007 at 21:55

have a look at some of the tutorials

http://css.maxdesign.com.au/floatutorial/

Zaphan58 · 9 Sep 2007 at 22:15

Cheers guys, after a bit of fiddling I came up with this:

Code:

<div class="artThumbs">

    <a href="images/big1.jpg" rel="lightbox"><img src="images/thumb1.gif" alt="electronic hand" title="electronic hand" width="120" height="85" border="0" class="artwork" /></a> 
	<span class="artText">test text</span>	
	
	</div>

CSS:

Code:

.artThumbs{
margin-bottom:5px;
float:left;
clear:left;
}

.artText{position:absolute;}

It works fine but does this look like a good way of doing it? It breaks my footer for some reason but I'm sure I can figure that out.

SiriusB · 9 Sep 2007 at 23:05

You don't really need to give the span a class as you can use a selector to target it. This works because there is only one span element inside your artThumbs divs.

div.artThumbs span {

#code
}