14 replies [Last post]
Jeronimo
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-22
Posts: 9
Points: 0

I have this problem with aligning an image container with some information (title, description, stats)

here is an image how it should be:

What do I have:
HTML

<div class="container">
   <div class="image"><img src="image" border="0" align="left" class="thumb"></div>                    
    <div style="clear: right;">
        <div class="title">Title of the image</div>
        <div class="info">Here the description of the image</div>
        <div class="stats" align="left">Stats, comments, views</div>
    </div>
</div>

CSS

.container
{
    padding:            8px;
    width:              268px;
    height:             116px;    
    margin-right:       10px;
    margin-bottom:      10px;
    background-color:   #000000;
    border:             1px solid #FFF;
    float:              left;
    display:            inline;   
    position:           relative;   
}
.thumb
{
    background-color:   #FFFFFF;
    padding:            3px;
    margin-right:       4px;
}
.image
{
    float:      left;
    display:    block;
    position:   fixed;
    height:     118px;
    border:     1px solid #000;
}
.title
{
    margin-top:         -3px;
    font-weight:        bold;
}
.info
{
    margin-top:         0px;                     
}
.stats
{
    bottom:             0px;
    position:           absolute;
    top:                110px;
}

In IE everything seems to be ok, but in FireFox the three DIV's on the right side are aligned to the left. Over the image...
They "fill" the whole container...

Does anyone has a solution?[/code]

Jeronimo
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-22
Posts: 9
Points: 0

DIV problems with image container

I'm using the following doctype:

xhtml1-transitional.dtd

Jeronimo
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-22
Posts: 9
Points: 0

DIV problems with image container

Is there nobody with a solution?

In the attachment I have a preview.

On the left: Internet Explorer
on the right: FireFox

As you can see, the DIV's on the right have a width of 100%...

Does anyone knows how to "fix" this.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 hours 7 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

DIV problems with image container

Have you read up on clearing floats?

Verschwindende wrote:
  • CSS doesn't make pies

Jeronimo
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-22
Posts: 9
Points: 0

DIV problems with image container

No I haven't
I've just played with it again, but the "clear" DIV does nothing.

So what do I miss?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 hours 7 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

DIV problems with image container

Could you post all the HTML and CSS?

Verschwindende wrote:
  • CSS doesn't make pies

Jeronimo
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-22
Posts: 9
Points: 0

DIV problems with image container

Ofcourse, here's a stripped down version with 3 image containers:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        
<html>
<head>
<style>
.container
{
    padding:            8px;
    width:              268px;
    height:             116px;    
    margin-right:       10px;
    margin-bottom:      10px;
    background-color:   #000000;
    border:             1px solid #FFF;
    float:              left;
    display:            inline;   
    position:           relative;   
}
.thumb
{
    background-color:   #FFFFFF;
    padding:            3px;
    margin-right:       4px;
}
.image
{
    float:      left;
    display:    block;
    position:   fixed;
    height:     118px;
    border:     1px solid #000;
}
.title
{
    margin-top:         -3px;
    font-weight:        bold;
    color: #FFF;
}
.info
{
    margin-top:         0px;  
    color: #FFF;                   
}
.stats
{
    bottom:             0px;
    position:           absolute;
    top:                110px;
    color: #FFF;
}
</style>
</head>

<body>

<!-- CONTAINER -->
<div class="container">
    <div class="image"><img src="test.gif" height="85" border="0" align="left" class="thumb"></div>                    
    <div style="clear: right;">
        <div class="title">Title of the image</div>
        <div class="info">Here the description of the image</div>
        <div class="stats" align="left">Stats, comments, views</div>
    </div>
</div>

<!-- CONTAINER -->
<div class="container">
    <div class="image"><img src="test.gif" width="85" border="0" align="left" class="thumb"></div>                    
    <div style="clear: right;">
        <div class="title">Title of the image lorem ipsum</div>
        <div class="info">Here the description of the image</div>
        <div class="stats" align="left">Stats, comments, views</div>
    </div>
</div>

<!-- CONTAINER -->
<div class="container">

    <div class="image"><img src="test.gif" height="110" border="0" align="left" class="thumb"></div>                    

    <div class="title">Title of the image lorem ipsum</div>
    <div class="info">Here the description of the image</div>
    <div class="stats" align="left">Stats, comments, views</div>

</div>

</body>

</html>

jlhaslip
Offline
Enthusiast
Last seen: 12 years 28 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

DIV problems with image container

<div style="clear: right;"> 
        <div class="title">Title of the image lorem ipsum</div> 
        <div class="info">Here the description of the image</div> 
        <div class="stats" align="left">Stats, comments, views</div> 
    </div> 

Try giving this div a class with a margin-left equal to ( or greater than ) the floated div that is on the left side. Similar to this

I haven't tried it multiple times on a page such as it appears you want to do, but at least tihis will give you a starting point.

I'm having a good day...so far.

Jeronimo
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-22
Posts: 9
Points: 0

DIV problems with image container

Thats the problem...

I don't know the width of the floated left DIV.

I tried to put 2 DIV's in the container, a left side and a right side.
In the left I put the image, the right I tried to devide in 3 DIV's:

title, description and stats.

Title and description goes ok, but stats ... everytime is alligns to the left. "Under" the image DIV.

Is it just not possible to create a container like the image in the opening-post?

I tried "clear", "position", "display', top, left, margin ...

Every DIV does not have a fixed width or height (only the container has, and the image DIV is always max-height/width: 110)

Any Idea's?

jlhaslip
Offline
Enthusiast
Last seen: 12 years 28 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

DIV problems with image container

Try This Out For Your Problem

Validated strict. Html and css are both validated.

I don't have an IE6 Browser to check it, but I have looked at it with IE5, IE5 mac, Mozilla, NN7, and Opera 8.

Should be okay. You'll have to alter the classes and some labels for height, etc.

Let us know if it will work or if you run into problems.

Here is another sample using 50% of the width of the screen. Any smaller and it will start getting hard to read.
Problem with this approach is that it works at 800 px width, but it will look different at 1024. I've tried adjusting the pictures sizes using %'ges, ems, px, etc, but the same problem rears up. Adjusting the font sizes (which the client can control, not you) will change the presentation as well. There are lots of things which can blow this apart. Notice the last two pictures. One leaves a bottom space due to the extra text , and one overlaps the bottom of the div and will affect the layout of the next image.
The greatest unknown is the size and shape of the Images you intend to use on this.

Good luck with it.

Second sample page

I'm having a good day...so far.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

DIV problems with image container

Jeronimo wrote:
In the left I put the image, the right I tried to devide in 3 DIV's:
title, description and stats.

You don't need 3 separate divs for those. They're text elements, you should use hx or p tags for those. You don't even need a separate div for your image. Just float the image itself.
Unfortunately, you're going to need to know the width of the floated element to be able to push the right container out of the way.
Is it because all the images are going to be different sizes? Can you not standardise on a few different sizes and then create different classes to accommodate the different widths?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jlhaslip
Offline
Enthusiast
Last seen: 12 years 28 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

DIV problems with image container

Sorry folks. That sucked in IE mac, so I'm pulling it off the shelf.

I'm having a good day...so far.

Anonymous
Anonymous's picture
Guru

DIV problems with image container

jlhaslip wrote:
Sorry folks. That sucked in IE mac, so I'm pulling it off the shelf.
Who cares about IE/Mac?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

DIV problems with image container

You might also want to consider using an unordered list to contain your image/text combinations because if you have more than a couple, that's what it is really - a list of images and associated text.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Jeronimo
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2006-02-22
Posts: 9
Points: 0

DIV problems with image container

I'm sorry for the late reply...

In the image containers I don't know the exact width or height. Only the max-width/height i know.

If there's not another solution I think i have to use tables...

<table height="110">
 <tr>
  <td rowspan="3">image here</td> 
  <td valign="top">title</td>
 </tr>
 <tr>
  <td valign="top">description</td>
 </tr>
 <tr>
 <td valign="bottom">stats</td>
 </tr>
</table>