CODEWITHSUNDEEP
csslayouthtml
Josh Smeaton
Josh Smeaton

Reputation: 48730

How to position two divs horizontally within another div

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?

Upvotes: 56

Views: 134768

Answers (12)

Darko
Darko

Reputation: 38860

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

Upvotes: 65

Razan Paul
Razan Paul

Reputation: 13848

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/

Upvotes: -1

Kevin
Kevin

Reputation: 1122

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

Upvotes: -1

kongaraju
kongaraju

Reputation: 9596

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

Upvotes: 0

Tim Black
Tim Black

Reputation: 9

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.

Upvotes: -6

James Piggot
James Piggot

Reputation: 417

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.

Upvotes: 5

Justin Lucente
Justin Lucente

Reputation: 1171

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

Upvotes: 9

foxy
foxy

Reputation: 2168

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

Upvotes: 35

Ian G
Ian G

Reputation: 30234

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

more more more

Upvotes: 3

csexton
csexton

Reputation: 24793

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.

Upvotes: 0

csexton
csexton

Reputation: 24793

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.

Upvotes: 9

Jack Ryan
Jack Ryan

Reputation: 8472

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>

Upvotes: -1

Related Questions