Display images underneath each other

HTML & CSS
1

Hey.

Can anyone help me fix my CSS so the images that you will see in the link below appear directly below each other? I am relating to the images that are currently moving towards the right where the comments are…

Check this page out:-

http://csesalford.com/hussainwd9/Default.aspx

Is there a quick fix for this?

Regards

2

Hi,
Yes, a quick fix would be to add clear:left to your floated images. You will probably need to remove the 20px bottom margin from them though and rethink your code a little. Things start getting out of sync with that bottom margin on the image.

You might try setting up a ruleset for the p tags in that div and set the margins there. Or wrap each section (image and text) in a list item for even more control.

[B].comments img[/B]{
    float:left;
    [COLOR=Blue]clear:left;[/COLOR]
    margin-right:10px;
    [COLOR=Red]/*margin-bottom:20px; margins moved to p tag*/[/COLOR]
}
[COLOR=Black][B].comments p[/B][/COLOR]{
   [COLOR=Blue] margin:10px 0; [/COLOR]
    background:yellow;/*testing only*/
}
3

Good Afternoon.

What I would do here is get rid of the width on here

.comments img {
margin-bottom:20px;
margin-right:10px;


}

everything thats inside the p elements put a wrapper around it give it a width and float it left. This will cause the date name read more link to be aligned next to the images.

4

Hmm, I thought it had something to do with the float Ray. I only debugged it for about 2 minutes. Didnt really look over it. Good pick up! :slight_smile:

5

Something like the examples below is what I was referring to. They use a <dl> but it could be done with a standard ul with p tags and spans in the <li>.

http://www.pmob.co.uk/search-this/definition-list3.htm
http://www.pmob.co.uk/temp/definition-list2.htm

That way you are containing your image and text in the same element and you can control the vertical margins for each section there.

6

well i need the float on the img you see as the text will appear towards to the right of the image…

I did try taking the float off but the text then goes underneath the image…

:frowning:

If i try Rays method, what would i need to wrap the <p> elements around?

Regards

7

Hey Rayzur,

I have tried your method, it works but there is one problem.

Take a look at this page:-

http://csesalford.com/hussainwd9/

The images are not in aligned with the text?

Any ideas why this is?

8

That is what I have been saying all along. :slight_smile:

That’s why I said you should rethink your code and wrap each section in list items.

9

Ok il see what i can do…

Thanks
Regards

10

Well, something as simple as this unordered list would serve as a starting point for wrapping your image and text up in a list item. From there you can add some more text formatting elements such as spans.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Image and Text within Lists Items</title>
<style type="text/css">
#blog {
    width:400px;
    margin:20px auto;
    padding:0 5px 5px;
    list-style-type:none;
    background:#777;
    overflow:hidden;/*contain floated li*/
}
#blog li {
    float:left;/*contain floated image*/
    width:100%;/*prevent float from shrinkwrapping*/
    margin:5px 0 0 0;
    padding:5px 0;
    background:#EEF;
}
#blog li p {
    color:#000;
    margin:0 0 0 85px;
    padding:0 2px; 
}
#blog li img{
    float:left;
    margin:0 5px;
}
</style>
</head>
<body>
    <ul id="blog">
        <li><img src="http://www.css-lab.com/demos/vertical-center/images/image-75.gif" alt="test image">
            <p>Lorem ipsum dolor sit amet consectetuer dui porta magnis Morbi egestas. Magna felis commodo 
            pede tellus condimentum pede leo Nulla vel mauris. Purus porttitor In Maecenas at et felis 
            adipiscing vitae Sed eleifend.</p>
        </li>
        <li><img src="http://www.css-lab.com/demos/vertical-center/images/image-75.gif" alt="test image">
            <p>Lorem ipsum dolor sit amet consectetuer dui porta magnis Morbi egestas.</p>
        </li>
        <li><img src="http://www.css-lab.com/demos/vertical-center/images/image-75.gif" alt="test image">
            <p>Lorem ipsum dolor sit amet consectetuer dui porta magnis Morbi egestas. Magna felis commodo 
            pede tellus condimentum pede leo Nulla vel mauris. Purus porttitor In Maecenas at et felis 
            adipiscing vitae Sed eleifend.</p>
        </li>             
    </ul>
</body>
</html>
11

Hey,

Thanks, but i simply added another <div> and set a height 40px and it did the trick…

:wink:

Reagards
Billy