Left and right align on same line

Question

I want to create a div that has a header containing two pieces of text. One piece of text will be aligned left and one right. The header will have a gray background that will expand with the text:

<div id="expand-box">
   <div id="expand-box-header">
      <span style="float: left;">Top left header</span> 
      <span style="float: right;">Top right header</span>
   </div>
   Lorem ipsum dorem nori seota ostiy
</div>

CSS:

#expand-box
{
    width: 100%;
    padding: 0;
    border: 2px solid #BBB;
    margin: 7px 0 0 0;
}

#expand-box-header
{
    background-color: #BBB;
    margin: 0;
    color: #FFF;
    padding: 0 0 3px 2px;
}

While this works, the two spans float over the expand-box-header gray background and the Lorem Ipsum text floats higher than it should.

score 17 · Answer 1 · answered Mar 10 '14 at 13:33

You just need to add clear:both div

Or

Just create a class clear with property

.clear{
    clear:both;
}

<div id="expand-box-header">
      <span style="float: left;">Top left header</span> 
      <span style="float: right;">Top right header</span>
      <div style="clear:both;"></div> <!-- Here we go --> OR <div class="clear"></div>
</div>

Demo

score 13 · Accepted Answer · answered Mar 10 '14 at 15:53

The reason your code wasn't working is because floating divs don't affect the size of the surrounding element. The problem you get with inline-block on your left side float is that you lose one of your headers as the screen is made smaller. I shrank the screen size on the JSfiddle Mehmet Eren Yener provided and the right header disappears. If your headers are long, and the screen is small - the right header will vanish.

I think the better approach would be to either use a clearfix class or to use the overflow tag. There's also the Empty Div Method - but I'm not really a fan of that one. If you use one of these methods instead the left header will stack on top of the right header when they get too close.

Here are examples of using Clearfix and Overflow:

Clearfix: http://jsfiddle.net/ATP33/

HTML:

 <div id="expand-box">
 <div id="expand-box-header" class="clearfix">
  <span style="float: left;">Top left header</span> 
  <span style="float: right;">Top right header</span>
 </div>
 <div id="expand_box_sub_header">Lorem ipsum dorem nori seota ostiy</div>
 </div>

CSS:

#expand-box {
width: 100%;
padding: 0;
border: 2px solid #BBB;
margin: 7px 0 0 0;}

#expand-box-header {
background-color: #BBB;
margin: 0;
color: #FFF;
padding: 0 0 3px 2px;}

#expand_box_sub_header { clear: both; }

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}  
.clearfix{ display: inline-block;}  
html[xmlns] .clearfix { display: block;}  
* html .clearfix{ height: 1%;}  
.clearfix {display: block}

Overflow: http://jsfiddle.net/RL8ta/

HTML:

<div id="expand-box">
<div id="expand-box-header">
  <span style="float: left;">Top left header</span> 
  <span style="float: right;">Top right header</span>
</div>
<div id="expand_box_sub_header">Lorem ipsum dorem nori seota ostiy</div>
</div>

CSS:

#expand-box {
width: 100%;
padding: 0;
border: 2px solid #BBB;
margin: 7px 0 0 0;}

#expand-box-header {
background-color: #BBB;
margin: 0;
color: #FFF;
padding: 0 0 3px 2px;
overflow: auto;}

#expand_box_sub_header { clear: both; }

Floating is kind of becoming a dying art and is getting more and more discourage in it's use, but if you do use it often this article is useful in understanding float behavior: http://css-tricks.com/all-about-floats/ — Pearl, Mar 10 '14 at 15:55

score 3 · Answer 3 · edited May 23 '17 at 12:18

3

You can do for the left side

display:inline-block;

Here is the JSFIDDLE http://jsfiddle.net/erenyener/MBwJq/

But first of all, you have inline css code, it is a good practice to not write inline css code at all

clearfix is an old technology, it works but, inline block is to stop using clearfix

Here is the link : What is a clearfix?

edited May 23 '17 at 12:18

Community

1
1

answered Mar 10 '14 at 13:34

Mehmet Eren Yener

2,006
1
23
37

score 1 · Answer 4 · answered Mar 10 '14 at 13:36

1

Try adding overflow: hidden; to the styles for the #expand-box-header element. This will automatically clear the floated span elements inside it without the need for additional HTML markup.

answered Mar 10 '14 at 13:36

Arnelle Balane

5,437
1
26
32

score 0 · Answer 5 · answered Mar 10 '14 at 14:56

0

To contain floats use the micro-clearfix.

So your css for the container will look like this:

#expand-box:before, #expand-box:after {
    contents: "";
    display: table;
}
#expand-box:after {
    clear: both;
}

answered Mar 10 '14 at 14:56

josh_bailey4

111
1
11

Left and right align on same line

5 Answers5