stretch div with no content

[nate2099]

Hi,

This page:

xxxxx

has a div containing the mic stand image on the left, and another holding the images on the right. Is it possible to have the left div stretch vertically to match the right one?

Also, With the image layout, can I have the second row of images clear the row above it, so there's 5 images on each row??

Thanks,

Nathan.

[karinne]

First question) Look into the Faux Columns method

Second question) You really shouldn't be using the paragraph element (<p>) for those boxes ... the aren't paragraphs. I would wrap them individually in <div> and float them. To clear float for this type of thing I would add a clearing div where you want to change lines

Code: Select all

.clear {
    clear: both;
}

....

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

HTH

[Lchad]

I believe if you add a large enough height to each div.float, you'll get what you want:

Code: Select all

div.float {

  float: left;

  padding-left:10px;

  text-align: center;

  color: #333333;
  height: 250px;*/or whatever you want/*

  }

Can you make the background mike image longer?

[nate2099]

Thanks for that, the faux coloumn method works a treat!!

For the clear div, do you mean I should do somethig like

if (images printed is a multiple of 5) echo <div id = 'clear'>

And in the clear div set clear: ??? (is there an attribute "all"??)


Setting the height does work, but considering there may be up to 12 lines of text with each pic, I'd prefer if they were only as high as they needed to be!!

[karinne]

Originally Posted by nate2099

For the clear div, do you mean I should do somethig like

Sure ... i guess that would work

Originally Posted by nate2099

And in the clear div set clear: ??? (is there an attribute "all"??)

It's clear: both; ... like I already stated above.