I would like to be able to line up 4 images in a row along with their 1

[WotNow]

Hi all,

I would like to be able to line up 4 images in a row along with their corresponding h2 tags. This is what I have, which lines up the images but not quite

<div id="??">

<h2>??</h2>
<a href="??.html"><img src="??" /></a>

<h2>??</h2>
<a href="??.html"><img src="??" /></a>

<h2>??</h2>
<a href="??.html"><img src="??" /></a>

<h2>??</h2>
<a href="??.html"><img src="??" /></a>

</div><!--END of ??-->


The CSS - the borders and the backgrounds are just so I can see whats going on. The images are 200 x 150.


#??
width:860px
margin:0 auto;
padding:0;
background-color:#669933;
overflow:hidden;}



#?? a img
float:left
border:2px solid red;
padding:0 10px 0 0;
margin:0;

#?? h2
font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
padding:0;
margin:0;}

This is the layout I am getting

 

[vacunita]

While links and images are inline elements and will naturally sit side by side, headings such as h2 are block level elements and have by default line breaks that precede and follow them.

The simplest solution is to Use divs to wrap each of your images and h2s sets and float them.

 .imageBlock{
float:left;
}

...

<div class="imageBlock">
<h2>...</h2>
<a href...>...</a>
</div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech