• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1179
  • Last Modified:

CSS Float Left Problem With Multiple Images

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
sketchetch
Asked:
sketchetch
  • 4
  • 3
1 Solution
 
DigitalTyrantCommented:
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
 
sketchetchAuthor Commented:
There's no way to get around this with CSS?
0
 
DigitalTyrantCommented:
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
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
sketchetchAuthor Commented:
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
 
DigitalTyrantCommented:
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
 
sketchetchAuthor Commented:
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
 
DigitalTyrantCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now