Setting a div s height in HTML with CSS

Question

I am trying to lay out a table-like page with two columns   I want the rightmost column to dock to the right of the page  and this column should have a distinct background color   The content in the right side is almost always going to be smaller than that on the left   I would like the div on the right to always be tall enough to reach the separator for the row below it   How can I make my background color fill that space    x000D   x000D   rightfloat   x000D    color  red  x000D    background-color   BBBBBB  x000D    float  right  x000D    width  200px  x000D    x000D   x000D   left   x000D    font-size  20pt  x000D    x000D   x000D   separator   x000D    clear  both  x000D    width  100   x000D    border-top  1px solid black  x000D    x000D   lt div class  separator  gt  x000D     lt div class  rightfloat  gt  x000D      Some really short content  x000D     lt  div gt  x000D     lt div class  left  gt   x000D      Some really really really really really really x000D      really really really really big content x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  separator  gt  x000D     lt div class  rightfloat  gt  x000D      Some more short content  x000D     lt  div gt  x000D     lt div class  left  gt   x000D      Some really really really really really really x000D      really really really really big content x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      Edit   I agree that this example is very table-like and an actual table would be a fine choice   But my  real  page will eventually be less table-like  and I d just like to first master this task   Also  for some reason  when I create edit my posts in IE7  the code shows up correctly in the preview view  but when I actually post the message  the formatting gets removed   Editing my post in Firefox 2 seems to have worked  FWIW     Another edit  Yeah  I unaccepted GateKiller s answer   It does indeed work nicely on my simple page  but not in my actual heavier page   I ll investigate some of the links y all have pointed me to

User · Answer

Just trying to help out here so the code is more readable.
Remember that you can insert code snippets by clicking on the button at the top with "101010". Just enter your code then highlight it and click the button.

Here is an example:

<html>
    <body>
    <style type="text/css">
        .rightfloat {
            color: red;
            background-color: #BBBBBB;
            float: right;
            width: 200px;
        }

        .left {
            font-size: 20pt;
        }

        .separator {
            clear: both;
            width: 100%;
            border-top: 1px solid black;
        }
    </style>

User · Answer

x000D   x000D   rightfloat   x000D    color  red  x000D    background-color   BBBBBB  x000D    float  right  x000D    width  200px  x000D    x000D   x000D   left   x000D    font-size  20pt  x000D    x000D   x000D   separator   x000D    clear  both  x000D    width  100   x000D    border-top  1px solid black  x000D    x000D   lt div class  separator  gt  x000D     lt div class  rightfloat  gt  x000D      Some really short content  x000D     lt  div gt  x000D     lt div class  left  gt   x000D      Some really really really really really really x000D      really really really really big content x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  separator  gt  x000D     lt div class  rightfloat  gt  x000D      Some more short content  x000D     lt  div gt  x000D     lt div class  left  gt   x000D      Some really really really really really really x000D      really really really really big content x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I had the same problem on my site  shameless plug    I had the nav section  float  right  and the main body of the page has a background image about 250px across aligned to the right and  repeat-y   I then added something with  clear  both  to it  Here is the W3Schools and the CSS clear property   I placed the clear at the bottom of the  page  classed div  My page source looks something like this   body  - gt  header  big blue banner   - gt  headerNav  green bar at the top   - gt  breadcrumbs  invisible at the moment   - gt  page      - gt  navigation  floats to the right       - gt  content  main content           - gt  clear  the quote at the bottom           - gt  footerNav  the green bar at the bottom       - gt  clear  empty but still does something   - gt  footer  blue thing at the bottom    I hope that helps

User · Answer

It s enough to just use the css property width to do so   Here is an example    lt style type  text css  gt       td           width 25           height 100           float left         lt  style gt

User · Answer

I gave up on strictly CSS and used a little jquery   var leftcol       leftcolumn    var rightcol       rightcolumn    var leftcol height   leftcol height    var rightcol height   rightcol height     if  leftcol height  gt  rightcol height      rightcol height leftcol height   else     leftcol height rightcol height

User · Answer

No need to write own css  there is an library called  Bootstrap css  by calling that in your HTML head section  we can achieve many stylings Here is an example  If you want to provide two column in a row  you can simply do the following    x000D   x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D   x000D   lt div class  row  gt  x000D     lt div class  col-md-6  gt Content lt  div gt  x000D     lt div class  col-md-6  gt Content lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here md stands for medium device  you can use col-sm-6 for smaller devices and col-xs-6 for extra small devices

User · Answer

A 2 column layout is a little bit tough to get working in CSS  at least until CSS3 is practical    Floating left and right will work to a point  but it won t allow you to extend the background  To make backgrounds stay solid  you ll have to implement a technique known as  faux columns   which basically means your columns themselves won t have a background image  Your 2 columns will be contained inside of a parent tag  This parent tag is given a background image that contains the 2 column colors you want  Make this background only as big as you need it to  if it is a solid color  only make it 1 pixel high  and have it repeat-y  AListApart has a great walkthrough on what is needed to make it work   http   www alistapart com articles fauxcolumns

User · Answer

This should work for you  Set the height to 100  in your css for the html and body elements  You can then adjust the height to your needs in the div   html       height  100      body       height  100     div       height  100      Set Div Height

User · Answer

I can think of 2 options   Use javascript to resize the smaller column on page load  Fake the equal heights by setting the background-color for the column on the container  lt div  gt  instead   lt div class  separator   gt   with repeat-y

User · Answer

Ahem        The short answer to your question is that you must set the height of 100  to the body and html tag  then set the height to 100  on each div element you want to make 100  the height of the page    Actually  100  height will not work in most design situations - this may be short but it is not a good answer  Google  any column longest  layouts  The best way is to put the left and right cols inside a wrapper div  float the left and right cols and then float the wrapper - this makes it stretch to the height of the inner containers - then set background image on the outer wrapper  But watch for any horizontal margins on the floated elements in case you get the IE  double margin float bug

User · Answer

Some browsers support CSS tables  so you could create this kind of layout using the various CSS display  table-  values   There s more information on CSS tables in this article  and the book of the same name  by Rachel Andrew  Everything You Know About CSS is Wrong  If you need a consistent layout in older browsers that don t support CSS tables  you need to do two things    Make your  table row  element clear its internal floated elements   The simplest way of doing this is to set overflow  hidden which takes care of most browsers  and zoom  1 to trigger the hasLayout property in older versions of IE   There are many other ways of clearing floats  if this approach causes undesirable side effects you should check the question which method of  clearfix  is best and the article on having layout for other methods  Balance the height of the two  table cell  elements   There are two ways you could approach this   Either you can create the appearance of equal heights by setting a background image on the  table row  element  the faux columns technique  or you can make the heights of the columns match by giving each a large padding and equally large negative margin   Faux columns is the simpler approach and works very well when the width of one or both columns is fixed   The other technique copes better with variable width columns  based on percentage or em units  but can cause problems in some browsers if you link directly to content within your columns  e g  if a column contained  lt div id  foo  gt  lt  div gt  and you linked to  foo    Here s an example using the padding margin technique to balance the height of the columns    x000D   x000D  html  body   x000D    height  100   x000D    x000D   x000D   row   x000D    zoom  1              Clear internal floats in IE    x000D    overflow  hidden     Clear internal floats    x000D    x000D   x000D   right-column  x000D   left-column   x000D    padding-bottom  1000em      Balance the heights of the columns    x000D    margin-bottom  -1000em                                            x000D    x000D   x000D   right-column   x000D    width  20   x000D    float  right  x000D    x000D   x000D   left-column   x000D    width  79   x000D    float  left  x000D    x000D   lt div class  row  gt  x000D     lt div class  right-column  gt Right column content lt  div gt  x000D     lt div class  left-column  gt Left column content lt  div gt  x000D   lt  div gt  x000D   lt div class  row  gt  x000D     lt div class  right-column  gt Right column content lt  div gt  x000D     lt div class  left-column  gt Left column content lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    This Barcamp demo by Natalie Downe may also be useful when figuring out how to add additional columns and nice spacing and padding  Equal Height Columns and other tricks  it s also where I first learnt about the margin padding trick to balance column heights

User · Answer

The short answer to your question is that you must set the height of 100  to the body and html tag  then set the height to 100  on each div element you want to make 100  the height of the page

User · Answer

Here s an example of equal-height columns - Equal Height Columns - revisited  You can also check out the idea of  Faux Columns  as well - Faux Columns  Don t go the table route   If it s not tabular data  don t treat it as such   It s bad for accessibility and flexibility

User · Answer

Give this a try    x000D   x000D  html  body  x000D   left   right   x000D    height  100  x000D    x000D   x000D   left   x000D    float  left  x000D    width  25   x000D    x000D   right   x000D    width  75   x000D    x000D   lt html gt  x000D     lt body gt  x000D       lt div id  left  gt  x000D        Content x000D       lt  div gt  x000D       lt div id  right  gt  x000D        Content x000D       lt  div gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

[html] Setting a div's height in HTML with CSS

Examples related to html

Examples related to css