Still can't make my table-less page work

**tribaletic** · Sep 15, 2002 19:00

Hello everyone - first time caller, long time listener

I've been going over some of the posts concerning table-less layouts, like this one and I'm still stumped as to how to accomplish what I need to do.

If you take a look at my sample page, you'll notice how there is a main body section to the left and a sidebar to the right. (If it looks funny to you, I put up a screenshot from mozilla here.

The goal is to make the sidebar's height be dynamically the same height as the main body section to the left. The css I've used is in the index.html doc. Any ideas?

**Taranis** · Sep 15, 2002 20:16

try nesting the "right" div and the "center" div inside a container div called "content" or something. Then remove the "float: left;" attribute from the CSS for the "right" div.

That should get you somewhere.

**tribaletic** · Sep 15, 2002 20:25

Thanks Taranis...

I tried what you suggested but no dice - all it did was knock the sidebar box underneath the main body box. Was the surrounding div supposed to have any height, width, etc?

**Taranis** · Sep 15, 2002 20:51

Sorry, I misunderstood what you wanted a little bit. To be honest, I don't know of a way to make that "right" div dynamically size to the "center" div. I played around with it, but unlike td's, div's are totally independent of each other.

But, you might be able to find some other things to play with here: http://www.thenoodleincident.com/tut...son/boxes.html

Sorry I couldn't help.

**iTec** · Sep 15, 2002 20:55

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Welcome to Tradewinds</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	text-align:center;
	background-color: #333333;
	}
.frame {
	width:660px;
	margin-right:auto;
	margin-left:auto;
	margin-top:20px;
	padding:0px;
	text-align:left;
	background-color: #CCCCCC;
	}
.header {
	background:.fff
	border: 1px solid #000000;
	border: 1px solid #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #999999;
	padding: 5px;
	width: 100%;
	}
.center {
	width:500px;
	padding:0px;
	float:left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #000000;
	background-color: #CCCCCC;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	margin: 0px;
	}
.right {
	float:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	background-color: #CCCCCC;
	padding: 5px;
	margin: 0px;
	}
.bottom {
	background:.fff
	border: 1px solid #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	background-color: #CCCCCC;
	padding: 5px;
	width: 100%;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	float:left;
	text-align: center;
	margin: 0px;
}
h1 {
	font-size:16px;
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
	padding-top: 10px;
	}
h2 {
	font-size: 10px;
	margin: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
p {
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-top: 0px;
}
</style>
</head>

<body>
<div class="frame">
<div class="header">:: Welcome to Tradewinds ::</div>
<div class="center">
<h1>Welcome to Tradewinds</h1><h2>Posted by Brandon @ 12:20 on 2.22.02</h2>
<p>Esse, facilisi consequat velit qui ut ea; facilisis te consequat, augue minim te? Vel lobortis duis autem. Facilisi consectetuer... veniam te quis eu qui aliquam amet. Consequat exerci facilisis iusto ullamcorper dignissim facilisis qui duis. Nulla wisi vel sciurus vero! Nostrud, illum esse nulla nonummy ut, crisare duis odio autem facilisi accumsan in autem eros sed nostrud. Aliquip feugait dolor autem hendrerit sit sciurus; delenit augue facilisis feugait adipiscing lobortis molestie consequat nonummy dolore! Autem magna vel; ex exerci.</p>
<p>Illum qui tation eu consequat laoreet, delenit laoreet, et veniam tation in et dolor. Consequatvel tation blandit feugiat feugait, magna commodo ea nisl laoreet te in at ad iriuredolor... ipsum iriure feugait augue vel luptatum suscipit, lobortis ea consectetuer. Wisi vulputate feugiat luptatum praesent dignissim veniam sciurus nonummy — nisl veniam feugiat facilisi erat delenit et facilisi te lorem, in ea commodo. Quis commodo consectetuer commodo ea praesent feugiat lobortis elit. Suscipit vero velit et iriure te nostrud molestie. </p>
<p>At sed... luptatum minim nostrud adipiscing et feugait, commodo duis qui? Vulputate ad, aliquip tation at, dolore nonummy, exerci nulla, enim quis eum feugiat et ad. Facilisis consequatvel dolore, luptatum diam accumsan ut — sed dolore, adipiscing diam! Duis, ad ullamcorper commodo velit dignissim in veniam; diam molestie, ut augue exerci odio iusto vel. Velit suscipit; iriure nulla facilisi nostrud. Enim te amet dignissim magna, nulla laoreet feugiat? Nulla wisi iriuredolor, sed vel magna te ex nulla ea ipsum veniam; ullamcorper minim. Illum quis ipsum feugait veniam delenit; odio te dignissim dolore eros! </p>
<p>In ut, tation eu commodo consequat ut tation; accumsan veniam. Praesent adipiscing; consequat, exerci nisl elit nulla augue ad, vel esse in, illum suscipit feugait molestie eros ad nisl? Accumsan dolore tation; aliquip facilisi nulla accumsan, in diam facilisi duis dignissim velit in augue, sciurus nulla et te? Nostrud vel hendrerit qui, eros in dolore feugait ea qui; in et ullamcorper. Diam ut luptatum quis... tation, minim qui ea veniam ea eros nulla enim eros diam in euismod lobortis te facilisis in ea facilisis volutpat, lobortis dignissim. </p>
<p>Autem in eu nibh ullamcorper elit illum et... vulputate vero at duis accumsan! Veniam delenit, hendrerit dolore, ullamcorper ad te eros feugiat duis, luptatum vulputate qui, consequat molestie, iriure luptatum ea... blandit duis odio. Et suscipit laoreet veniam feugiat ut hendrerit in tincidunt. </p>
</div>
<div class="right">This the sidebar! Why can't the height dynamically match the box to the left???</div>
<div class="bottom">
copyright 2002 tribal studios etc.
</div>
<br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
</div>

</body>
</html>

that what your after?

**tribaletic** · Sep 16, 2002 06:36

It sorta worked but it broke in about every browser but IE - thanks for trying guys, I appreciate it. I think I'm going to stick to tables until CSS matures a little bit.

Se la vi.

**iTec** · Sep 16, 2002 07:39

Originally posted by tribaletic
It sorta worked but it broke in about every browser but IE

it was only a quick effort i tried at tafe, it can be done.. because i have done it before.

**noddy** · Sep 16, 2002 16:03

Just make the whole thing a table

**tribaletic** · Sep 16, 2002 16:09

Thanks noddy - I think that's kinda what I'm leaning towards doing now

Was worth a shot though.

User Tag List

Thread: Still can't make my table-less page work

Thread Tools

Display

Still can't make my table-less page work

well i give up

Re: well i give up

right colum

Bookmarks

Bookmarks

Posting Permissions