How to position two divs horizontally within another div

Css Problem Overview

I haven't played with CSS for too long a time and am without references at the moment. My question should be fairly easy but googling isn't bringing up a sufficient answer. So, adding to the collective knowledge...

|#header---------------------------------------------------------------|
|                               TITLE                                  |
|#sub-title------------------------------------------------------------|
|bread > crumb                    |                  username logout   |
|#sub-left                        |                          #sub-right|
|---------------------------------|------------------------------------|

That's what I'm wanting my layout to be. The heading anyways. I wanted sub-title to contain sub-left AND sub-right. What css rules do I use to ensure a div is bound by the attributes of another div. In this case, how do I ensure that sub-left and sub-right stay within sub-title?

Css Solutions

Solution 1 - Css

Its quite a common misconception that you need a clear:both div at the bottom, when you really don't. While foxy's answer is correct, you don't need that non-semantic, useless clearing div. All you need to do is stick an overflow:hidden onto the container:

#sub-title { overflow:hidden; }

Solution 2 - Css

When you float sub-left and sub-right they no longer take up any space within sub-title. You need to add another div with style = "clear: both" beneath them to expand the containing div or they appear below it.

HTML:

<div id="sub-title">
   <div id="sub-left">
      sub-left
   </div>
   <div id="sub-right">
      sub-right
   </div>
   <div class="clear-both"></div>
</div>

CSS:

#sub-left {
   float: left;
}
#sub-right {
   float: right;
}
.clear-both {
   clear: both;
}

Solution 3 - Css

This should do what you are looking for:

<html>
	<head>
		<style type="text/css">
			#header {
				text-align: center;
			}
			#wrapper {
				margin:0 auto;
				width:600px;
			}
			#submain {
				margin:0 auto;
				width:600px;
			}
			#sub-left {
				float:left;
				width:300px;
			}
			#sub-right {
				float:right;
				width:240px;
				text-align: right;
			}
		</style>

	</head>
	<body>
		<div id="wrapper">
			<div id="header"><h1>Head</h1></div>
			<div id="sub-main">
				<div id="sub-left">
					Right
				</div>
				<div id="sub-right">
					Left
				</div>
			</div>
		</div>
	</body>
</html>

And you can control the entire document with the wrapper class, or just the two columns with the sub-main class.

Solution 4 - Css

I agree with Darko Z on applying "overflow: hidden" to #sub-title. However, it should be mentioned that the overflow:hidden method of clearing floats does not work with IE6 unless you have a specified width or height. Or, if you don't want to specify a width or height, you can use "zoom: 1":

#sub-title { overflow:hidden; zoom: 1; }

Solution 5 - Css

This answer adds to the solutions above to address your last sentence that reads:

how do I ensure that sub-left and sub-right stay within sub-title

The problem is that as the content of sub-left or sub-right expands they will extend below sub-title. This behaviour is designed into CSS but does cause problems for most of us. The easiest solution is to have a div that is styled with the CSS Clear declaration.

To do this include a CSS statement to define a closing div (can be Clear Left or RIght rather than both, depending on what Float declarations have been used:

#sub_close {clear:both;}

And the HTML becomes:

<div id="sub-title">
<div id="sub-left">Right</div>
<div id="sub-right">Left</div>
<div id="sub-close"></div>
</div>

Sorry, just realized this was posted previously, shouldn't have made that cup of coffee while typing my reply!

@Darko Z: you are right, the best description for the overflow:auto (or overflow:hidden) solution that I have found was in a a post on SitePoint a while ago Simple Clearing of FLoats and there is also a good description in a 456bereastreet article CSS Tips and Tricks Part-2. Have to admit to being too lazy to implement these solutions myself, as the closing div cludge works OK although it is of course very inelegant. So will make an effort from now on to clean up my act.

Solution 6 - Css

Seriously try some of these, you can choose fixed width or more fluid layouts, the choice is yours! Really easy to implement too.

IronMyers Layouts

http://layouts.ironmyers.com">CSS Layouts
http://layouts.ironmyers.com/customize/">Layouts Customization Guide
http://layouts.ironmyers.com/750_pixel_Layouts/">750 Pixel CSS Layouts
http://layouts.ironmyers.com/950_pixel_Layouts/">950 Pixel CSS Layouts
http://layouts.ironmyers.com/100_percent_Layouts/">100 Percent CSS Layouts

more more more

http://blog.html.it/layoutgala/">Layout Gala CSS Layouts
http://www.glish.com/css/">Glish CSS Layouts
http://www.code-sucks.com/css%20layouts/">Code Sucks CSS Layouts
http://maxdesign.com.au/presentation/page_layouts/">Max Design CSS Layouts
http://www.cssplay.co.uk/layouts/index.html">CSS Play CSS Layouts

Solution 7 - Css

You can also achieve this using a CSS Grids framework, such as YUI Grids or Blue Print CSS. They solve alot of the cross browser issues and make more sophisticated column layouts possible for use mere mortals.

Solution 8 - Css

Best and simple approach with css3

#subtitle{
/*for webkit browsers*/
     display:-webkit-box;
    -webkit-box-align:center;
	-webkit-box-pack: center;
     width:100%;
}

#subleft,#subright{
     width:50%;
}

Solution 9 - Css

Something like this perhaps...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            #container
            {
                width:600px;
            }

            #head, #sub-title
            {
                width:100%;
            }

            #sub-left, #sub-right
            {
                width:50%;
                float:left;
            }

        </style>
    </head>

    <body>
        <div id="container">
            <div id="head">
                 #head
            </div>
            <div id="sub-title">
                #sub-title
                <div id="sub-left">
                    #sub-left
                </div>

                <div id="sub-right">
                    #sub-right
                </div>
            </div>
        </div>
    </body>
</html>

Solution 10 - Css

#sub-left, #sub-right
{
    display: inline-block;
}

Solution 11 - Css

Via Bootstrap Grid, you can easily get the cross browser compatible solution.

<div class="container">     
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
      Div1       
    </div>
    <div class="col-sm-6" style="background-color:lavenderblush;">
          Div2
    </div>
  </div>
</div>

jsfiddle: http://jsfiddle.net/DTcHh/4197/

Solution 12 - Css

You do it like this:

<table>
   <tr>
      <td colspan="2">TITLE</td>
   </tr>
   <tr>
      <td>subleft</td><td>subright</td>
   </tr>
</table>

EASY - took me 1 minute to type it. Remember the CSS file needs to be downloaded to the client, so don't worry about the waffle about extra tags, its irrelavent in this instance.

Content Type	Original Author	Original Content on Stackoverflow
Question	Josh Smeaton	View Question on Stackoverflow
Solution 1 - Css	Darko Z	View Answer on Stackoverflow
Solution 2 - Css	foxy	View Answer on Stackoverflow
Solution 3 - Css	csexton	View Answer on Stackoverflow
Solution 4 - Css	Justin Lucente	View Answer on Stackoverflow
Solution 5 - Css	James Piggot	View Answer on Stackoverflow
Solution 6 - Css	Ian G	View Answer on Stackoverflow
Solution 7 - Css	csexton	View Answer on Stackoverflow
Solution 8 - Css	kongaraju	View Answer on Stackoverflow
Solution 9 - Css	Jack Ryan	View Answer on Stackoverflow
Solution 10 - Css	Kevin	View Answer on Stackoverflow
Solution 11 - Css	Razan Paul	View Answer on Stackoverflow
Solution 12 - Css	Tim Black	View Answer on Stackoverflow