CODEWITHSUNDEEP
csshtml
Mr.Syrax
Mr.Syrax

Reputation: 414

Positioning divs with css using absolute positioning

I know this is a noob question, but I just can't figure this out! I'm laying out a page for our intranet and all I need to do is position some divs side by side. Each container is a different item, but all containers have the same structure, a header, some descriptive text, and an image. I will be adding items as they are given to me. This is basically just a page i'm creating for employees to sell items. Here is my css and an image of what I'm trying to achieve. Please let me know if this doesn't make sense, but as smart as you guys have proven to be in the past, i'm sure you get the idea.

.wrapper {
    width: 1260px;
    height: 900px;
    margin: 0px auto;
    position: relative;
}
.container {
    width: 400px;
    height: 400px;
    margin: 10px;
    position: absolute;
}
.itemText {
    width: 350px;
    height: 190px;
    padding: 0px;
    position: absolute;
    top: 25px;
    left: 25px;
}
.itemHead {
    padding: 0px;
    margin: 0px;
}
.itemDesc {
    padding: 10px;
    margin: 0px;
}
.itemThumb {
    width: 350px;
    height: 150px;
    position: absolute;
    bottom: 25px;
    left: 25px;
}

My HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/text.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <div class="itemText">
                <div class="itemHead">
                    <p>Lorem ipsum.</p>
                </div>
                <div class="itemDesc">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
                </div>
            </div>
            <div class="itemThumb"></div>
        </div>
        <div class="container">
            <div class="itemText">
                <div class="itemHead">
                    <p>Lorem ipsum.</p>
                </div>
                <div class="itemDesc">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
                </div>
            </div>
            <div class="itemThumb"></div>
        </div>
        <div class="container">
            <div class="itemText">
                <div class="itemHead">
                    <p>Lorem ipsum.</p>
                </div>
                <div class="itemDesc">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
                </div>
            </div>
            <div class="itemThumb"></div>
        </div>
    </div>
</body>
</html>

basic layout

Upvotes: 1

Views: 1889

Answers (3)

Trevor
Trevor

Reputation: 16116

I don't know if I understand exactly

but one way to get the containers to line up is to set the .container class to 

.container {
width: 30%;
height: 400px;
margin: 10px;
display: inline-block;
}

Adding the display: inline-block; And removing the position:absolute.

Setting your width for each container to around 30% of the wrapper will ensure that three containers get lined up before they go to a new line.

You will need to take off all the position: settings IN your css file so that all the information stays contained within the div.

e.g.

.wrapper {
    width: 1260px;
    height: 900px;
    margin: 0px auto;
    position: relative;
}
.container {
    width: 30%;
    height: 400px;
    margin: 10px;
    display: inline-block;
    border: 1px solid black;
}
.itemText {
    width: 350px;
    height: 190px;
    padding: 0px;
    top: 25px;
    left: 25px;
}
.itemHead {
    padding: 0px;
    margin: 0px;
}
.itemDesc {
    padding: 10px;
    margin: 0px;
}
.itemThumb {
    width: 350px;
    height: 150px;
    bottom: 25px;
    left: 25px;
}

Upvotes: 1

kramsee
kramsee

Reputation: 309

Absolute positioning is in that case really useless.

try this: 

.container {
    position: relative;
    float: left;
    width: 400px;
    height: 400px;
    margin: 10px;
}

Your divs have the same height, so using float is pretty convenient. By giving your .container the attribute position: relative .itemThumb is positioned correctly.

This should work

Upvotes: 2

user2658774
user2658774

Reputation: 146

Don't position your containers absolutely.

.container { width: 400px; height: 400px; margin: 10px; position: relative; float:left; }

At the end of the last container div, you'll need a div to clear: left; 

<div style="clear:left;"></div>

Now when you add more div's, they will auto float, and the container will get cleared.

Upvotes: 3

Related Questions