?
Solved

CSS Float Left Problem With Multiple Images

Posted on 2007-07-30
7
Medium Priority
?
1,176 Views
Last Modified: 2008-01-09
I'm working on a mock social network like MySpace and it has a page that displays "friends" by showing their photo and username.

View it by clicking here and then clicking on the "Contacts" tab when it loads.

http://www.purrrnce.com/index.php?L=users.profile&id=1

This is a PHPizabi package I installed, and I've tried tweaking the CSS, but I can't fix the overflow problem you see there. It has one row of 4 contacts, then a row of 1 contact that gets hung (it floats left) because the row above it has picture of varying size.

I'd like to have it cleanly display rows of 4. How do I make that second row (and every even row after it) fall down further in to line?

Any help is appreciated.
0
Comment
Question by:sketchetch
  • 4
  • 3
7 Comments
 
LVL 4

Expert Comment

by:DigitalTyrant
ID: 19594989
if the images are to be different heights, I would create a table.  I ran into the same problem in a similar situation.  a Div tag that contains only objects that are floating will have a height of 0. So, even though I only had 4 images per div, the layout was not right.  I switched to a table and then I didn't have to float the images.  It seems to work well now.  

NOTE:  I HATE TABLES :-)  I only use them when absolutely necessary
0
 

Author Comment

by:sketchetch
ID: 19595012
There's no way to get around this with CSS?
0
 
LVL 4

Expert Comment

by:DigitalTyrant
ID: 19595187
if your images have a value for the height that is a "max"  you could use:

<div style="height:[MAXHEIGHT];">
<img src="[path to image]" style="float:left;margin-right:10px;height:[MAXHEIGHT];" />
<img src="[path to image]" style="float:left;margin-right:10px;height:[MAXHEIGHT];" />
<img src="[path to image]" style="float:left;margin-right:10px;height:[MAXHEIGHT];" />
<img src="[path to image]" style="float:left;height:[MAXHEIGHT];" />
</div>
<div style="height:[MAXHEIGHT];">
<img src="[path to image]" style="float:left;margin-right:10px;height:[MAXHEIGHT];" />
<img src="[path to image]" style="float:left;margin-right:10px;height:[MAXHEIGHT];" />
<img src="[path to image]" style="float:left;margin-right:10px;height:[MAXHEIGHT];" />
<img src="[path to image]" style="float:left;height:[MAXHEIGHT];" />
</div>

and that should display two rows of 4 pictures.  The problem that I was running into was that the images would be different dimensions so it created a pretty sloppy layout.

for example, each set of "::::" represent an image...
:::: :::: :::: ::::::
:: :::: :::::: ::
::: :::::: ::::: ::::

a table made it more uniform, like
::::    ::::    ::::    ::::::
::      ::::    ::::::  ::
:::     ::::::  :::::   ::::

not perfect but setting the tablecells to align center would clean it up a lil more.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:sketchetch
ID: 19595211
I'm not hardcoding in the pictures. It's a loop and unfortunately it's not something I can make close a div after every 4 images. i need it to just flow no matter how many images are there.
0
 
LVL 4

Expert Comment

by:DigitalTyrant
ID: 19595353
I assumed you would be using a loop, and the HTML above would be an example of what the loop would produce.  here's a better example.

ie:
<div class="imgRow">
<?
$countvar = 0;
while($img = mysql_fetch_array($results))
{
  if($countvar%4)
  {
    echo "</div><div class=\"imgRow\">";
  }
  echo "<img src=\"".$row[src]."\" alt=\"".$row[alt]."\" style=\"float:left;height:".$row[height].";\" />";
  $countvar+=1;
}
echo </div>;
0
 

Author Comment

by:sketchetch
ID: 19596073
It's not a loop that I can setup like that. It's complicated unless you're familiar with the software. As I said before I can't set it to close and open a new div every 4 pictures.

I need another solution.
0
 
LVL 4

Accepted Solution

by:
DigitalTyrant earned 375 total points
ID: 19596192
try placing each of the pictures in a div with width:25%, a fixed Height Value and float:left;  don't float the pictures tho.  after the fourth one, it should wrap automatically, in theory...
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question