CSS positioning issues

[dlannetts]

Hello, i have never been really succesful at positioning items on a page with css, it's taken me a long time but i finally worked it out, buit for some reason with the code i am now using my border will not locate properly, i have attached an image, you will see what i mean when you see it, and here is my html:

            <div class="colRight">
                <p>Newest Articles</p>
                <div id="article">
                <div class="article_image"><a href="..."><img src="..." width="80" height="80" alt="" title="" border="0" /></a></div>
                <div class="article_name"><a class="more" href="...">Article #1</a></div><br/>
                <div class="article_text">help help help help help help help help help hep help help <a class="more" href="...">Read More</a></div>
                </div>
            </div>

And here is my CSS:

#article {
    color: #000;
    font-family: verdana, arial, sans-serif;
    font-size: 1em;
    line-height: 1.5em;
    text-align: left;
    border-style: solid;
    border-width: 1px;
    padding: 10px;
}



.article_image { position:absolute; z-index:0; }
.article_name { position:absolute; padding-left: 95px; z-index:1; text-align:left; width:334px; }
.article_text { position:absolute; padding-left: 95px; z-index:2; text-align:left; width:334px; }

Can anybody help explain to me why my border isnt working correctly? While your reading through my code, let me know if you see anything that could be done better please...

David...

[JorgeM]

I believe that at least one of your issues deals with the fact that you are using the position property with a value of absolute. An abosulte position will remove the element from the normal flow. If you are going to use absolute in inner divs, you should probably assign the "Article" div a position of relative. Take a look at this article, it may help you understand the position property a little better.

http://www.itgeared.com/articles/1292-css-styling-formatting-position-property/

Your border doesnt go around the other DIVs basically because of the abosolute positioning and the fact that your Outer div has a heigth of 1.5em.

[JorgeM]

Try this CSS, then modify it to your needs...

#article {
color: #000;
font-family: verdana, arial, sans-serif;
font-size: 1em;
line-height: 1.5em;
text-align: left;
border-style: solid;
border-width: 1px;
padding: 10px;
overflow:hidden;
width:500px;

}

.article_image {z-index:0; float:left;}
.article_name {padding-left: 95px; z-index:1; text-align:left; width:334px;}
.article_text {padding-left: 95px; z-index:2; text-align:left; width:334px;}

[dany12]

Try the css reset method on google and don't use positioning if you want to make your code cross browser with out hacks my personal opinion

[mapetshi]

try to add float:left to #article

[jwmollman]

You could simply float two <div>s within the <div id="article">, and then clear them both.

<div class="colRight">
    <p>Newest Articles</p>
    <div id="article">
        <div id="article_image">
            <p>Image or text here...</p>
        </div>
        <div id="article_content">
            <p>Content fills in here...</p>
        </div>
        <div class="clear"></div>
    </div>
</div>

I've added some borders to show the boundries of the <div>s, but you can remove these.

#article {
    width: 500px;
    margin: 0;
    padding: 5px;
    border: 1px solid #000;
}
#article_image {
    width: 50px;
    margin: 0;
    padding: 0;
    border: 1px solid #bdbdbd;
    float: left;
}
#article_content {
    width: 431px;
    margin: 0 0 0 15px;
    padding: 0;
    border: 1px solid #bdbdbd;
    float: left;
}
.clear { clear: both; }

You can make adjustments to the widths, margins, or padding to fit your needs, but I think that's mainly what you're going for. Hope that helps!