How can I use CSS & div instead of table layouts in this case??

Question

MKala 0 Newbie Poster

16 Years Ago

I want the height of the right side column (id="menu") stretch down automatically, when the amount of content on the left side (id="page00") makes the "page00" div taller than the "menu" div and/or viceversa. I mean when I enter text and image in "page00" div, I want the height of "menu" div increase dynamically and/or viceversa. Please note that these two divs are inside the "content" div and all of the divs are wrapped into a "wrap" div.
I have the option to use tables for my purpose but I want to get it done via divs and css.

Here is the codes I have used to build a layout for my website:

<!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" lang="fa">

<!-- Meta information -->
<head>
<meta content="fa" http-equiv="Content-Language" />
<meta name="keywords" content="" />
<meta name="discription" content="" />
<meta name="author" content="" />
<title>
</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>

<!-- Page body -->
<body>

<div id="wrap">
	<div id="header">
		<div id="logo">
			<h1><a href="index.html" title="homepage"> 
Subject 
</a></h1>
		</div>	
	</div>
	<div id="content">
		<div id="menu">
		<br />
		</div>
		<div id="page00">
		<br />
		</div>
	</div>
	<div id="footer-pa">
	<div id="footer">
	</div>
	</div>
</div>
<body> 
</html>

And The CSS file used is this (style.css) :

body
{
	background: url("images/010.jpg") repeat;
	margin: 0;
	font-family: Tahoma;
}
#wrap
{
	background-color: #ffffff;
	width: 820px;
	padding: 10px 0;
	margin: 10px auto;
}
#header
{
	margin: 0 auto;
	width: 800px;
	height: 70px;
	background: #C0C0C0;
	border-bottom: 1px solid #000000;
}
#logo
{
	float: left;
	margin: 30px 0 0 30px;
	cursor: default;
}
#logo a
{
	color: #000000;
	text-decoration: none;
}
#content
{
	width: 800px;
	height: inherit;
	margin: 0 auto;
	clear: both;
}
#page00
{
	float: left;
	width: 600px;
	height: 100%;
	background: #DCE9F5;
	margin: auto;
}
#menu
{
	float: right;
	width: 200px;
	height: 100%; 
	background: gray;
	margin: auto;	
}
#footer-pa
{
	padding-top: 5px;
	clear: both;
}
#footer
{
	height: 40px;
	width: 800px;
	clear: both;
	margin: 0 auto;
	background: #C0C0C0;
}

All of your suggestions, constructive critics and solutions are welcome. But I will be most pleased if someone does the favour to me and gives me the solution to my problem.

Thank you in advance

html-css web-design

4 Contributors
10 Replies
158 Views
1 Week Discussion Span
Latest Post 16 Years Ago Latest Post by wickedsunny

vishwebdesign 0 Newbie Poster

16 Years Ago

If you wish to have the page00 div stretch when you add contents to the menu div, place the menu div inside the page00 div itself. If you float the menu div, do not forget to clear it before leaving page00 div.

There are times that you better use divs, but there are also some times that you'll need tables. Choose what you think is the best solution and see whether you achieve what you wanted to.

macneato 29 Posting Pro in Training

16 Years Ago

To understand you properly, what you are saying is that you would like your menu background (colour) to be the same height as the content (page001)?

If so, I would simply let my #content include the same background as my menu and position it accordingly.

e.g.

#content
{
width: 800px;
margin: 0 auto;
height:inherit;
background: gray;
}

If thats not you want to do, please try explain it a little better and I will assist you as neccesary.

All the best,

Edited 11 Years Ago by happygeek because: fixed formatting

wickedsunny 0 Junior Poster in Training

16 Years Ago

hmm ok buddy wht u can do is that keep the height style of that div to 100% so as teh left div will increase it will automatically increase with it :)

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

MKala 0 Newbie Poster · Answer 1 · 2008-10-16T13:48:27+00:00

Thank you vishwebdesign for the solution. this is a good maner I have never thought about before!!!

using this solution the height of "Page00" div depends on "menu" div but what if I want the "menu" div stretch down when I add content to "page00" div. I know I can include "page00" in "menu. but is there any way to have both of the specifications mentioned above at the same time !!??

MKala 0 Newbie Poster · Answer 2 · 2008-10-16T13:51:33+00:00

I mean can I design it in a way that both of the div heights be equal to each other and their height depend on the div that contains more content?

MKala 0 Newbie Poster · Answer 3 · 2008-10-17T00:41:38+00:00

Dear Macneato

Thanks for the suggestion. I think I should use it. but if having the two divs at an equal height according to their content is impossible then I need someone to confirm it and after that I will mark the thread as solved.

MKala 0 Newbie Poster · Answer 4 · 2008-10-17T00:44:25+00:00

Dear Wickedsunny

Thanks but...
I have tried that before but it did not work

wickedsunny 0 Junior Poster in Training · Answer 5 · 2008-10-17T23:14:17+00:00

ok buddy problem solved i have tested it.

<html xmlns="http://www.w3.org/1999/xhtml" lang="fa">

<!-- Meta information -->
<head>
<meta content="fa" http-equiv="Content-Language" />
<meta name="keywords" content="" />
<meta name="discription" content="" />
<meta name="author" content="" />
<title>
</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<!-- Page body -->
<body>

<div id="wrap">
	<div id="header">
		<div id="logo">
			<h1><a href="index.html" title="homepage"> 
Subject 
</a></h1>
		</div>	
	</div>
	<div id="content">
		<div id="menu" style="height:100%">
		<br />
		</div>
		<div id="page00">
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <p><br />
	        </p>
		</div>
  </div>
	<div id="footer-pa">
	<div id="footer">
	</div>
	</div>
</div>
<body> 
</html>

thisis the css for it

body
{
	background: url("images/010.jpg") repeat;
	margin: 0;
	font-family: Tahoma;
}
#wrap
{
	background-color: #ffffff;
	width: 820px;
	padding: 10px 0;
	margin: 10px auto;
}
#header
{
	margin: 0 auto;
	width: 800px;
	height: 70px;
	background: #C0C0C0;
	border-bottom: 1px solid #000000;
}
#logo
{
	float: left;
	margin: 30px 0 0 30px;
	cursor: default;
}
#logo a
{
	color: #000000;
	text-decoration: none;
}
#content
{
	width: 800px;
	height: inherit;
	margin: 0 auto;
	clear: both;
}
#page00
{
	float: left;
	width: 600px;
	height: 100%;
	background: #DCE9F5;
	margin: auto;
}
#menu
{
	float: right;
	width: 200px;
	background: gray;	
}
#footer-pa
{
	padding-top: 5px;
	clear: both;
}
#footer
{
	height: 40px;
	width: 800px;
	clear: both;
	margin: 0 auto;
	background: #C0C0C0;
}

what required was a style overide which is done by adding style tag in the div even with the presence of a class. take a look. its workin perfect for me :)

MKala 0 Newbie Poster · Answer 6 · 2008-10-24T21:18:28+00:00

Thank you all very much for considering my problem.

I think with all of the great solutions and constructive suggestions you've brought to me and with the help of you, now it's the time for me to mark the thread as solved.

Thanks and Best Regards

wickedsunny 0 Junior Poster in Training · Answer 7 · 2008-10-25T02:59:39+00:00

wickedsunny 0 Junior Poster in Training

16 Years Ago

np buddy :)