CODEWITHSUNDEEP
htmlcss
DiegoDD
DiegoDD

Reputation: 1665

how to center a div between another two (left and right) divs?

what i want to achieve is something like THIS, that is, to have 3 buttons, one to the left, one in the center, and one to the right, and in the same "line", but using css and divs, since I know using tables for laying out pages is just wrong.

I guess i need to use floats, and i already achieved to have the left and right divs correctly, but I can't get the center div to be, well, centered, it just jumps out of the line of the other two.

My attempt:

html: 

<div class="left" ><input type="button" value="left" /></div>
<!--<div class="center" ><input type="button" value="center" /></div>-->
<div class="right" ><input type="button" value="right" /></div>

<!-- If I uncomment the center div, the right one appears in another block, below the others-->

css: 

.left {
    float:left;
}
.right {
    float:right;
}
.center{
    /*what do i put here??*/
}

here is a fiddle with that, to mess up with.

How can I achieve it, and get the closest to the table layout example?

Note: I've looked in other similar questions, but I couldn't find one with the exact same issue.

Upvotes: 4

Views: 10957

Answers (3)

Marc Audet
Marc Audet

Reputation: 46785

This will do the trick (2nd revision).

Move the .center div after the two floated elements:

<div class="left">
    <input type="button" value="left" />
</div>
<div class="right">
    <input type="button" value="right" />
</div>
<div class="center">
    <input type="button" value="center" />
</div>

for the CSS, you can simply use text-align: center to center the input button since it is an inline element.

.left {
    float:left;
}
.right {
    float:right;
}
.center {
    text-align: center;
    outline: 1px dotted blue; /* to show content box limits */
    margin: 0 150px;
}

How This Works

Floated elements are positioned to either the left or right edge of the parent container with the top edge either adjacent to the top of the parent container OR the bottom edge of the closest block element before the floated element.

If you want the left and right floated elements to appear on the same horizontal line, they need to be adjacent to each other, which is why the .center element appears after the left and right floats.

The content from the .center element (in this case, the input button) wraps around the left and right floated elements, which means that the length of the inline box (an imaginary box that holds the content) is shortened to make room for the floated elements, which means that the content line extends from the right edge of the left element to the left edge of the right element. When you use text-align: center, the input button is centered on this shortened inline box, which is why the element appears off center if the left and right buttons have different lengths.

To work around that, you need to allow some room for the floats. One simple way of doing this is to set equal left and right margins, for example, margin: 0 150px.

If the labels are known ahead of time, the margin value is easy enough to figure out.

However, for this to work, the length of the three labels must be less than the length of the line, otherwise, the centering is impossible.

Please see updated demo.

Fiddle Demo

Upvotes: 1

William
William

Reputation: 1527

Take a look at http://oocss.org/grids_docs.html

I use this for everything. It's extremely easy and extensible.

Short-term answer:

.unit {
    float: left;
}
.last-unit {
    float: none;
    display: table-cell;
    width: auto;
}
.size1of3 {
    width: width:33.33333%;
}
.pull-content-right {
    text-align: right;
}
.pull-content-left {
    text-align: left;
}
.center-content {
    text-align: center;
}

<div class="line">
    <div class="unit size1of3 pull-content-left">
    </div>
    <div class="unit size1of3 center-content">
    </div>
    <div class="unit size1of3 last-unit pull-content-right">
    </div>
</div>

Upvotes: 0

ChrisP
ChrisP

Reputation: 5942

How about this:

.left {
    float:left;
    width: 33.3%
}
.right {
    float:right;
    width: 33.3%;
    text-align: right;
}
.center{
    float: left;
    width: 33.3%;
    text-align: center;
}

DEMO

Edit in response to comment

If you want to include borders, you'll need to update the widths accordingly. CSS uses a box model in which total width is margin + border + padding + content (controlled by width property). Here is a DEMO that adds 1px borders to each div and updates the width accordingly.

Upvotes: 1

Related Questions