How to position two divs horizontally within another div

Question

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  gt  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

User · Answer

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.

User · Answer

Something like this perhaps      lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt   lt html gt       lt head gt           lt style gt               container                               width 600px                              head   sub-title                               width 100                               sub-left   sub-right                               width 50                   float left                          lt  style gt       lt  head gt        lt body gt           lt div id  container  gt               lt div id  head  gt                    head              lt  div gt               lt div id  sub-title  gt                   sub-title                  lt div id  sub-left  gt                       sub-left                  lt  div gt                    lt div id  sub-right  gt                       sub-right                  lt  div gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

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     CSS Layouts  Layouts Customization Guide  750 Pixel CSS Layouts  950 Pixel CSS Layouts  100 Percent CSS Layouts     more more more     Layout Gala CSS Layouts  Glish CSS Layouts  Code Sucks CSS Layouts  Max Design CSS Layouts  CSS Play CSS Layouts

User · Answer

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

User · Answer

Instead of using overflow hidden  which is a kind of hack  why not simply setting a fixed height  e g  height 500px  to the parent division

User · Answer

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

User · Answer

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

User · Answer

Instead of using overflow hidden  which is a kind of hack  why not simply setting a fixed height  e g  height 500px  to the parent division

User · Answer

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     CSS Layouts  Layouts Customization Guide  750 Pixel CSS Layouts  950 Pixel CSS Layouts  100 Percent CSS Layouts     more more more     Layout Gala CSS Layouts  Glish CSS Layouts  Code Sucks CSS Layouts  Max Design CSS Layouts  CSS Play CSS Layouts

User · Answer

Something like this perhaps      lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt   lt html gt       lt head gt           lt style gt               container                               width 600px                              head   sub-title                               width 100                               sub-left   sub-right                               width 50                   float left                          lt  style gt       lt  head gt        lt body gt           lt div id  container  gt               lt div id  head  gt                    head              lt  div gt               lt div id  sub-title  gt                   sub-title                  lt div id  sub-left  gt                       sub-left                  lt  div gt                    lt div id  sub-right  gt                       sub-right                  lt  div gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

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

User · Answer

Via Bootstrap Grid  you can easily get the cross browser compatible solution     lt div class  container  gt          lt div class  row  gt       lt div class  col-sm-6  style  background-color lavender   gt        Div1             lt  div gt       lt div class  col-sm-6  style  background-color lavenderblush   gt            Div2      lt  div gt     lt  div gt   lt  div gt    jsfiddle  http   jsfiddle net DTcHh 4197

User · Answer

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.

User · Answer

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

User · Answer

sub-left   sub-right       display  inline-block

User · Answer

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     CSS Layouts  Layouts Customization Guide  750 Pixel CSS Layouts  950 Pixel CSS Layouts  100 Percent CSS Layouts     more more more     Layout Gala CSS Layouts  Glish CSS Layouts  Code Sucks CSS Layouts  Max Design CSS Layouts  CSS Play CSS Layouts

User · Answer

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

User · Answer

You do it like this    lt table gt      lt tr gt         lt td colspan  2  gt TITLE lt  td gt      lt  tr gt      lt tr gt         lt td gt subleft lt  td gt  lt td gt subright lt  td gt      lt  tr gt   lt  table gt    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

User · Answer

This should do what you are looking for    lt html gt       lt head gt           lt style type  text css  gt               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                         lt  style gt        lt  head gt       lt body gt           lt div id  wrapper  gt               lt div id  header  gt  lt h1 gt Head lt  h1 gt  lt  div gt               lt div id  sub-main  gt                   lt div id  sub-left  gt                      Right                  lt  div gt                   lt div id  sub-right  gt                      Left                  lt  div gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt    And you can control the entire document with the wrapper class  or just the two columns with the sub-main class

User · Answer

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    lt div id  sub-title  gt      lt div id  sub-left  gt        sub-left     lt  div gt      lt div id  sub-right  gt        sub-right     lt  div gt      lt div class  clear-both  gt  lt  div gt   lt  div gt    CSS    sub-left      float  left     sub-right      float  right     clear-both      clear  both

User · Answer

This should do what you are looking for    lt html gt       lt head gt           lt style type  text css  gt               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                         lt  style gt        lt  head gt       lt body gt           lt div id  wrapper  gt               lt div id  header  gt  lt h1 gt Head lt  h1 gt  lt  div gt               lt div id  sub-main  gt                   lt div id  sub-left  gt                      Right                  lt  div gt                   lt div id  sub-right  gt                      Left                  lt  div gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt    And you can control the entire document with the wrapper class  or just the two columns with the sub-main class

User · Answer

sub-left   sub-right       display  inline-block

User · Answer

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

User · Answer

Something like this perhaps      lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt   lt html gt       lt head gt           lt style gt               container                               width 600px                              head   sub-title                               width 100                               sub-left   sub-right                               width 50                   float left                          lt  style gt       lt  head gt        lt body gt           lt div id  container  gt               lt div id  head  gt                    head              lt  div gt               lt div id  sub-title  gt                   sub-title                  lt div id  sub-left  gt                       sub-left                  lt  div gt                    lt div id  sub-right  gt                       sub-right                  lt  div gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

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

User · Answer

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.

User · Answer

This should do what you are looking for    lt html gt       lt head gt           lt style type  text css  gt               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                         lt  style gt        lt  head gt       lt body gt           lt div id  wrapper  gt               lt div id  header  gt  lt h1 gt Head lt  h1 gt  lt  div gt               lt div id  sub-main  gt                   lt div id  sub-left  gt                      Right                  lt  div gt                   lt div id  sub-right  gt                      Left                  lt  div gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt    And you can control the entire document with the wrapper class  or just the two columns with the sub-main class

User · Answer

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    lt div id  sub-title  gt      lt div id  sub-left  gt        sub-left     lt  div gt      lt div id  sub-right  gt        sub-right     lt  div gt      lt div class  clear-both  gt  lt  div gt   lt  div gt    CSS    sub-left      float  left     sub-right      float  right     clear-both      clear  both

User · Answer

Something like this perhaps      lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt   lt html gt       lt head gt           lt style gt               container                               width 600px                              head   sub-title                               width 100                               sub-left   sub-right                               width 50                   float left                          lt  style gt       lt  head gt        lt body gt           lt div id  container  gt               lt div id  head  gt                    head              lt  div gt               lt div id  sub-title  gt                   sub-title                  lt div id  sub-left  gt                       sub-left                  lt  div gt                    lt div id  sub-right  gt                       sub-right                  lt  div gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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    lt div id  sub-title  gt      lt div id  sub-left  gt        sub-left     lt  div gt      lt div id  sub-right  gt        sub-right     lt  div gt      lt div class  clear-both  gt  lt  div gt   lt  div gt    CSS    sub-left      float  left     sub-right      float  right     clear-both      clear  both

User · Answer

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

User · Answer

This should do what you are looking for    lt html gt       lt head gt           lt style type  text css  gt               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                         lt  style gt        lt  head gt       lt body gt           lt div id  wrapper  gt               lt div id  header  gt  lt h1 gt Head lt  h1 gt  lt  div gt               lt div id  sub-main  gt                   lt div id  sub-left  gt                      Right                  lt  div gt                   lt div id  sub-right  gt                      Left                  lt  div gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt    And you can control the entire document with the wrapper class  or just the two columns with the sub-main class

User · Answer

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    lt div id  sub-title  gt      lt div id  sub-left  gt        sub-left     lt  div gt      lt div id  sub-right  gt        sub-right     lt  div gt      lt div class  clear-both  gt  lt  div gt   lt  div gt    CSS    sub-left      float  left     sub-right      float  right     clear-both      clear  both

User · Answer

You do it like this    lt table gt      lt tr gt         lt td colspan  2  gt TITLE lt  td gt      lt  tr gt      lt tr gt         lt td gt subleft lt  td gt  lt td gt subright lt  td gt      lt  tr gt   lt  table gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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     CSS Layouts  Layouts Customization Guide  750 Pixel CSS Layouts  950 Pixel CSS Layouts  100 Percent CSS Layouts     more more more     Layout Gala CSS Layouts  Glish CSS Layouts  Code Sucks CSS Layouts  Max Design CSS Layouts  CSS Play CSS Layouts

User · Answer

Via Bootstrap Grid  you can easily get the cross browser compatible solution     lt div class  container  gt          lt div class  row  gt       lt div class  col-sm-6  style  background-color lavender   gt        Div1             lt  div gt       lt div class  col-sm-6  style  background-color lavenderblush   gt            Div2      lt  div gt     lt  div gt   lt  div gt    jsfiddle  http   jsfiddle net DTcHh 4197

[css] How to position two divs horizontally within another div

Examples related to css

Examples related to layout

Examples related to html