ansaurus

Question

CSS Layouts - How to position two divs horizontally within another div

Answer 1

A:

Something like this perhaps...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<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>

Jack Ryan 2008-11-27 12:34:15

That's very similar to what I'm currently using. However, say I wanted the 'container' in your example to draw a border around the sub-left and sub-right divs, it won't work.

Josh Smeaton 2008-11-27 12:40:04

Answer 2

A:

Or if you want to ditch older browsers, try css tables.

dylanfm 2008-11-27 12:38:55

Answer 3

+4 A:

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.

csexton 2008-11-27 12:39:33

Answer 4

+1 A:

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.

csexton 2008-11-27 12:41:54

Answer 5

+5 A:

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

foxy 2008-11-27 12:46:29

Answer 6

A:

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

DrG 2008-11-27 12:51:55

Answer 7

+3 A:

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.

James Piggot 2008-11-27 12:59:33

Answer 8

+11 A:

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 unsemantic, useless clearing div. All you need to do is stick an overflow:hidden onto the containing div like so:

#sub-title { overflow:hidden; }

Darko Z 2008-11-27 19:50:23

Thank you very much! I remember chasing this problem down around 2 years ago and now I remember using overflow:hidden. I'll try this as soon as I get back to my laptop and make this the correct answer.

Josh Smeaton 2008-11-28 02:52:58

Not a problem, let me know how it pans out

Darko Z 2008-11-28 03:40:56

"Common misconception" is a bit harsh, since a clearing div is the w3c recommended method, but this is a neat trick. For more on that, see http://www.quirksmode.org/css/clearing.html

itsadok 2009-06-16 06:24:20

the common misconception is that you *need* a clearing div, not that its wrong or wont work or isn't recommended. personally i think it shouldn't be recommended as its unsemantic (though i have used it before when no other way was available)

Darko Z 2009-06-17 07:56:05

Answer 9

+4 A:

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

Justin Lucente 2008-11-28 23:52:58

ansaurus

tags:

views:

answers:

CSS Layouts - How to position two divs horizontally within another div

IronMyers Layouts

more more more

related questions