Member Avatar for MKala

I have used the following codes 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;
}

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.

All of your suggestions, 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.

PLEASE help.

  • 3 Contributors
  • 2 Replies
  • 111 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by MidiMagic

Recommended Answers

All 2 Replies

Member Avatar for Designer_101

hmmm

i would use javascript and tables if i were you.
its a tad difficult to do with divs and css alone.

Even better why not use flash. Stylish and alot more time efficient.

Sorry to not answer you question but i really dont think its worth the effort to acheive the specific look you want.
To conclude: use flash ;)

Member Avatar for MidiMagic

This kind of equal column display works with table, but not with div. Table will automatically make the columns the same height. Div won't do this, because each div has absolutely no logical link to the div next to it.

All of the methods used to try to make divs stay the same height are kludges. The "best" kludge is to read the heights of the two containers with JavaScript, and then have the code adjust the shorter one.

You have the following choices:

1. Use tables. The div is not yet perfected enough to do this.

2. Use kudges to make the columns the same height. This usually means making both columns longer than necessary

3. Don't use distinctive backgrounds or borders to show the edges of the columns. Then it won't matter.

Try this sample code. Then try it again after removing the references to the first four styles (the colors). It doesn't work if the colors show, but it works if the backgrounds are all the same. It also acts up if you remove the titles, or if you use code that introduces incompatibilities between Internet Explorer and Firefox (see below).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Your title here</title>

<style type="text/css">
.bmag {background-color: #ff88ff;}
.byel {background-color: #ffff88;}
.bcyn {background-color: #88ffff;}
.bvio {background-color: #cc88ff;}

.bitty {font-size: 14pt;}
.nbor {border: none;}

.nocol {width: 100%; padding: 0; border: none; margin: 0;}
.bocol {width: 100%; padding: 0; border: 1px solid #00cccc; margin: 0;}
.twocol {float: left; width: 50%; padding: 0; border: none; margin: 0;}
.ipad {padding: 2pt 5% 2pt 5%; border: none; margin: 0;}

.cenimg {text-align: center; margin: 0; border: none; padding: 0;}

.cenx {text-align: center;}
.cencap {clear: both;}

.bigbk {background: #c0ffff; margin: 0; border: 4px #0000ff solid; padding: 16px;}
</style>
</head>

<body>
<div class="bigbk">

  <p class="cencap bitty">Main Title 1</p>

  <div class="twocol bmag">
    <div class="cenimg">
      <img class="cencap" src="pic1.jpg" alt="Picture 1" />
      <p>Caption</p>
    </div>
    <div class="ipad">
      <p>Picture 1 content</p>
    </div>
  </div>

  <div class="twocol byel">
    <div class="cenimg">
      <img class="cencap" src="pic2.jpg" alt="Picture 2" />
      <p>Caption</p>
    </div>
    <div class="ipad">
      <p>Picture 2 content</p>
      <p>Picture 2 content</p>
      <p>Picture 2 content</p>
      <p>Picture 2 content</p>
    </div>
  </div>

  <p class="cencap bitty">Main Title 2</p>

  <div class="twocol bcyn">
    <div class="cenimg">
      <img class="cencap" src="pic3.jpg" alt="Picture 3" />
      <p>Caption</p>
    </div>
    <div class="ipad">
      <p>Picture 3 content</p>
      <p>Picture 3 content</p>
      <p>Picture 3 content</p>
      <p>Picture 3 content</p>
    </div>
  </div>

  <div class="twocol bvio">
    <div class="cenimg">
      <img class="cencap" src="pic4.jpg" alt="Picture 4" />
      <p>Caption</p>
    </div>
    <div class="ipad">
      <p>Picture 4 content</p>
    </div>
  </div>

  <p class="cencap bitty">End Title</p>

</div>
</body>
</html>

If you put size styles (width, height) in the same tag or style that also contains nonzero surrounding styles (margin, border, padding), it causes the incompatibility between Internet Explorer and Firefox to manifest itself. Some of your styles contain this trouble. Divs placed side by side fall apart when this happens.

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.