PDA

View Full Version : Lining up divs


alihandford
12-04-2009, 06:36 PM
I want all my divs to be lined up like -
x x x

Two of them do this, but the other doesn't how do I fix this?

Here is my code
<style type="text/css">
<!--
#apDiv1 {
position:relative;
width:200px;
height:115px;
z-index:1;
float:left;
background-color:#000000;
color:#FFFFFF;


}
#apDiv2 {
position:relative;
width:200px;
height:115px;
z-index:2;
margin-left:200px;
background-color:#000000;
color:#FFFFFF;

}
#apDiv3 {
position:relative;
width:200px;
height:115px;
z-index:3;
float:right;
background-color:#000000;
color:#FFFFFF;

}
-->
</style>
<div id="apDiv1">hello</div>
<div id="apDiv2">bye</div>
<div id="apDiv3">lol</div>

My second question is, I want padding around the divs but when I do this, through css, the padding is black because my background is black. Is there a way of making the padding white and still keeping the background of the div black?

domedia
12-04-2009, 06:45 PM
I want all my divs to be lined up like -
x x x Then don't use absolutely positioned DIV's. They are not meant for layout.
My second question is, I want padding around the divs but when I do this, through css, the padding is black because my background is black. Is there a way of making the padding white and still keeping the background of the div black? No, padding is outside the content area and is going to use the background of it's own element. So you have to find another way of doing it. Do you have a link?

alihandford
12-04-2009, 06:47 PM
The link is http://www.lannia.com/inspiration/

What divs should I use?

gentleone
12-04-2009, 06:54 PM
What divs should I use?

Div tags and position them purely with floats.

domedia
12-04-2009, 07:03 PM
What divs should I use?
<div> and make sure you don't use absolute positioning.

alihandford
12-04-2009, 07:07 PM
^ Can you give me an example please? Because I'm going to want more than one div like -

x x x x

but I don't know how to do this?

gentleone
12-04-2009, 08:06 PM
<div class="wrapper">
<div class="col1">hello</div>
<div class="col1">bye</div>
<div class="col1">lol</div>
<div class="col2">fun</div>
</div>


CSS

.col1 {float:left}
.col2 {float:right}
.col1, .col2 {width:200px;height:115px;background-color:#000000;color:#FFFFFF}