CODEWITHSUNDEEP
htmlcss
John 'Mark' Smith
John 'Mark' Smith

Reputation: 2614

Left and right align on same line

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.

Upvotes: 28

Views: 53247

Answers (5)

Pearl
Pearl

Reputation: 178

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; }

Upvotes: 13

josh_bailey4
josh_bailey4

Reputation: 111

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;
}

Upvotes: 0

Arnelle Balane
Arnelle Balane

Reputation: 5487

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.

Upvotes: 1

Mehmet Eren Yener
Mehmet Eren Yener

Reputation: 2036

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?

Upvotes: 3

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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

Upvotes: 17

Related Questions