How do I align two divs horizontally without the left one floating left?

Question

I have 2 div elements I want centered in my page. The outter div is 100% width and text-align: center. Like so:

    div.centerpanel {
    font-size: 28px;
    width:100%;
    height:100%;
    text-align: center;
}

The two elements contained within it should appear next to each other but centered (they're both simply divs with text content). Simply put, I want a centered title on my page, each of the two words of the title being a seperate div. I read that you do the following to accomplish this:

float: left;
clear: none;

As far as I can tell, the 'clear' does not have any visible effect. When I add the float: left, to the first of the two elements, it simply causes that element to slide all the way to the extreme left of the outer .centerpanel while the element that follows it remains out in the middle where it should be. So it's definitely aligning it properly but inexplicably sends it all the way to the left.

How do I make it stay vertically aligned with it's following element but keep obeying the outer div's text-align: center?

Add `clear: both;` to the parent div. Floating the element breaks it out of the flow of the page — pourmesomecode, Apr 16 '15 at 14:52
`display: inine-block;` on the `div`'s you want to center. Remove the float and clear. — Ruddy, Apr 16 '15 at 14:54

hyde · Answer 1 · 2015-04-16T15:02:24.927

3

If I understand your question correctly, something like this is what you want to have. And of course there are more than one ways to skin a cat.

HTML:

<div class="centerpanel">
        <div class="left">L</div>
        <div class="right">R</div>
    <div class="clearfix"></div>
</div>

CSS:

.centerpanel {
    font-size: 28px;
    width:100%;
    height:100%;
    text-align: center;
}

.centerpanel div{
    width: 50%;    
}

.left{
    float: left;
}

.right{
    float: right;
}

.clearfix{
    clear: both;
}

jsFiddle: http://jsfiddle.net/nfpdpmze/2/

Since there are only two divs here, you could also set them display: inline-block without using any flotation.

Side note:

There are of course more modern ways of clearing floating. One of them is by setting up the overflow property on the container of the divs that get floated. More about that here: https://css-tricks.com/all-about-floats/

edited Apr 16 '15 at 15:02

answered Apr 16 '15 at 14:58

hyde

2,525
4
27
49

I would have add the clearfix class to the right div and use clearfix::after instead of use an empty div. – Mehdi Brillaud Apr 16 '15 at 15:01
You beat me to the inline-block response but I posted an example of how it could be accomplished without the use of floats below. – Kinburn101 Apr 16 '15 at 15:09
Thanks for the answer -- there's great info here. The only difference here is that the elements were not next to each other, they were spaced apart. It turns out the use of display: inline-block fixed the issue. – screenglow Apr 16 '15 at 15:18

Kinburn101 · Accepted Answer · 2015-04-16T15:20:59.727

You can also use display:inline-block; on your child elements. View this Fiddle for an example of how to accomplish this.

HTML:

<div class="centerpanel">
<div class="leftpanel">Left</div><div class="rightpanel">Right</div>
</div>

CSS:

div.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
.leftpanel {
background:red;
display:inline-block;
width:50%;
}
.rightpanel {
background:blue;
display:inline-block;
width:50%;
}

score 1 · Answer 3 · answered Jul 27 '17 at 02:02

Here you go:

<div style="display:flex">
                <div style="text-align:center">
                    <span>Content1</span>
                </div>
                <div style="text-align:center">
                    <span>Content2</span>
                </div>
            </div>

How do I align two divs horizontally without the left one floating left?

3 Answers3