Jump to content

Streching div height


Recommended Posts


I want to make a two columns website, where the right column and the left column stretch to height of the main content div, and basically if one div is higher than the other I want the shorter column to stretch with it (just like if I do it with a table, then both of the tds have the same height)


here is a simple code of what I'm trying to do, also I was wondering if this is possible without setting height to the main div?


thanks for any help


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
margin:0 auto;

<div id="main">blah
<div id="left"> </div>
   <div id="right">blah<br />blah<br />blah<br />blah<br /></div>


here is a simple code where I tried to do it...

Edited by yaniv81
Link to comment
Share on other sites

Unfortunately divs don't work that way. You have a couple options:


-- manually set a height on the columns

-- use Javascript to find the height of #main, and then set all columns to the same height

-- "fake" the columns, but adding a repeating background image that has the same background as #left and #right to #main so that it appears that the columns continue down the page

Link to comment
Share on other sites

If you are only concerned about the background colors for the #left and #right divs, and because your divs have a fixed width, the easiest method is faux columns


where you make a fixed width image with the two colors across the width and perhaps only 1px high, then repeat it with repeat-y as a background image in the parent div (the example has a more complicated image with side shadows). Clear the floats before closing the #main div by adding overflow: hidden; to the style for #main. The divs don't need heights, they will be as high as the div with most content.


If you have a fluid with page you can't use faux columns with a fixed width image, so use this tutorial which has % widths


which is a lot more complicated.

Link to comment
Share on other sites


<div style:"clear:both; height:1px"> </div>

option after floated columns.


Overflow: hidden; in the parent div style does the same as the div with clear:both; so with my code the clear div is unnecessary. Your code above should be style= not style:


The "clear" div is item 2b here:-


while the overflow: hidden; method is item 2d


Item 18 is faux columns; item 16 is another method of nesting divs similar to the http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks solution but mine only works if the right column has most content and has simpler code for nesting the divs while his works if any column has most height and is more complicated.

Edited by Wickham
Link to comment
Share on other sites

Couldn't you use jQuery to do something like that? Get the height of the #main div and have it equal both the #left and #right? Or set them all equal to each other?

Yeah, that's one way to approach it using Javascript. If this is the only thing you use jquery for, that seems a bit overkill, and probably should be done with straight Javascript, but if you're using jquery for other parts of the project as well, jquery makes a lot of sense.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...