Define all DIVs at same length with Java or CSS? - Web Design & Web Development Forum: HTML, CSS, JavaScript, PHP

turbulentfluid · #1 16 May 2007, 06:37 AM

I replaced my table layout with a layout with DIV tags+CSS. It's a simple Header +RightNavBar+MainContent+LeftNavBar+Footer design.

However, when the main content DIV extends longet than NavBar DIVs, the NavBar DIV's don't follow. This is essential to the looks of the page, so how do I make all the NavBar DIV's "follow" the main content DIV's length?

Thanx a bunch!

Wickham · #2 16 May 2007, 09:33 AM

You can't actually get the side divs to be the same length as the Main Content (possibly done with very complicated javascript to find the height of a div and relate others to it but beyond my capabilities); if they have no height specified they will be as high as they need to be.

However, you can put a wrapper around the two Nav divs and the Main Content and put any background color or image in that and it will cover the full height of the side and content divs; provided you put a clearer div under floated divs to drag the background down to the full extent of the shorter divs.

See http://www.wickham43.supanet.com/for...uid070516.html

If you want to have different background colors or images in the side Navs which follow the height of the Main Content and be flexible for whatever text size someone may choose to use, then you need to use a table where all the cells in a row will be as high as whichever is highest.

shawnm · #3 16 May 2007, 05:03 PM

Quote:

Originally Posted by turbulentfluid

I replaced my table layout with a layout with DIV tags+CSS. It's a simple Header +RightNavBar+MainContent+LeftNavBar+Footer design.

However, when the main content DIV extends longet than NavBar DIVs, the NavBar DIV's don't follow. This is essential to the looks of the page, so how do I make all the NavBar DIV's "follow" the main content DIV's length?

Thanx a bunch!

I had the same question posted just a few days ago and got a great answer that helped a lot. Basically what you do is creat a div that is 800px(or w.e) wide then u float a div inside of that to the right that is only 600px wide.

Works like a charm!

Wickham · #4 17 May 2007, 12:53 AM

Quote:

Originally Posted by shawnm

I had the same question posted just a few days ago and got a great answer that helped a lot. Basically what you do is creat a div that is 800px(or w.e) wide then u float a div inside of that to the right that is only 600px wide.

Works like a charm!

This would leave a space on one side inside the div with most content but not a separate div. The floated div will never be the same height as the div it is in, especially if the text size is increased so that the div with most content gets deeper and the side floated div won't follow it down.

However, one of the examples here
http://www.wickham43.supanet.com/tut...ackground.html
might suit turbulentfluid.

shawnm · #5 17 May 2007, 09:09 AM

Quote:

Originally Posted by Wickham

This would leave a space on one side inside the div with most content but not a separate div. The floated div will never be the same height as the div it is in, especially if the text size is increased so that the div with most content gets deeper and the side floated div won't follow it down.

However, one of the examples here
http://www.wickham43.supanet.com/tut...ackground.html
might suit turbulentfluid.

Dude trust me it works perfectly. Let me show u.

shawnm · #6 17 May 2007, 10:13 AM

As I said, it works like a charm, don't believe me? Take a look

http://chathamog.110mb.com/z/index.html

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {color: #FFFFFF}

#menu {
       margin-top:0;
       width:800px;
	   background-color:#000000;
	   float:left;
       }

#content {
          width:600px;
		  background-color:#009900;
          float:right;
		  }
-->
</style>
</head>

<body>
<div id="menu">
  <div id="content">
  <p>content</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>can stretch on and on for miles, just remember it won't show it stretching in dreamweaver, save it and view in browser and it will work perfectly! </p>
  </div>

  <p class="style1">MENU
  (type below the content div or it won't work. i think this is the problem your having, the reason your saying it will not be the correct height)</p>
</div>
</body>
</html>

Hope this helps, thanks to Agricola for showing me this technique.

Wickham · #7 17 May 2007, 10:46 AM

Nice trick. turbulentfluid has a three column layout, not two, but I have found that the same trick can be used. It seems that the div with the lower height has to enclose the div(s) with most content.

shawnm · #8 17 May 2007, 10:50 AM

Quote:

Originally Posted by Wickham

Nice trick. turbulentfluid has a three column layout, not two, but I have found that the same trick can be used. It seems that the div with the lower height has to enclose the div(s) with most content.

Dude, can you help me with making it 3-column the same way?. I've been trying to figure that out for a few days too lol

Wickham · #9 17 May 2007, 10:55 AM

I notice it doesn't work if the menu div is edited to have more than the content div, so you have to be sure that the div with lower height encloses the one(s) with most.

For a three column layout with all three columns having color down to the bottom of the div with most content, just repeat the two col version with a nested two col version on the right:-
http://www.wickham43.supanet.com/for...wnm070517.html (thanks shawnm and agricola)

If you later add in a lot more to menu so that it's higher than #content, then the color of content stops instead of going to the bottom, that's why I prefer the example 2b here
http://www.wickham43.supanet.com/tut...ackground.html
because it seems fail-safe. It carries the background color down, but if you want all three columns to have different color then shawnm/agricola's version will be useful.

turbulentfluid · #10 18 May 2007, 01:38 AM

Buncha thanx everyone!

Agricola · #11 18 May 2007, 05:32 AM

nested Divs work, if you can gaurentee that the content in the divs will remain same length, otherwise the effect will be broken and lots of horrible layout problems will occur that Wickham touched on. A quicker and more foolproof way to get all your coloumns to appear and I say appear to look same height, is to have a repeating background image. the person looking at the screen will see say 3,4 or even 8 if you wish coloumns, all same length.

lets take 3 cols, you want your left col 150px wide, your right 180px, and middle 400px with 10px gap inbetween. Simply create this a graphic and use it as a background for a DIV container in CSS, makesure you use background image with background-repeat : repeat-y;

your html will be

Code:

<div class="layout_wrapper">

    <div class="left_col></div>
    <div class="middle_col></div>
    <div class="right_col></div>
</div>

Make sure in the css to make the 3 content divs, and indeed every other container placed that you want the background to show through, as background : transparent;
now you dont have to worry about container height, in the example page , link below, i have put a yellow border around the divs to show you that they are indeeed different heights.

http://cien.co.uk/test/bgimage_3col.html

and the background image
http://cien.co.uk/test/bgimage.png