CODEWITHSUNDEEP
css
blueintegral
blueintegral

Reputation: 1271

CSS spacing divs precisely

I have 3 Divs that I want to have precisely spaced to line up under some images. I've tried fiddling with floating them and using margin, but I don't know how to get to the point where I can specify a number of pixels to be from the left margin. 

<div class="cont1" style="margin-left:100px; float:left;"> label </div>
<div class="cont2" style="margin-left:200px; float:left;"> label </div>
<div class="cont3" style="margin-left:300px;"> label </div>

Using float:left seems to screw up a lot of the spacing. Without it, the spacing is right but each div is on a new line instead of a single line.

Upvotes: 1

Views: 985

Answers (3)

Blazemonger
Blazemonger

Reputation: 92983

I think you expect the second div cont2 to be 200 pixels from the left side of the window, when in fact it will be 200 pixels from the left of the first div.

If that's what you want, you should be using absolute positioning instead:

.cont1 {
    background-color: red;
    position: absolute;
    top: 0;
    left: 100px;
    max-width: 100px;
}
.cont2 {
    background-color: blue;
    position: absolute;
    top: 0;
    left: 200px;
    max-width: 100px;
}
.cont3 {
    background-color: green;
    position: absolute;
    top: 0;
    left: 300px;
    max-width: 100px;
}

http://jsfiddle.net/mblase75/vZK7N/1/

Upvotes: 1

Umesh Patil
Umesh Patil

Reputation: 10705

Use Span instead of div, it may work. Div will be always align in new row.

Upvotes: 0

Tim
Tim

Reputation: 1039

<div> is a block level element so float: left; is a great way to get them to sit side by side.

As far as spacing is concerned, your margins will be much smaller after the elements are floated because each <div> will be positioned after the previous one.

Upvotes: 0

Related Questions