CSS Layout Help

rapmonkey

I want to create a CSS layout in the following way but am having trouble:

There need to be multiple rows; here 3 are shown. The red box is a static height and does not change. The grey box is dynamic and often changes in height. The blue box needs to always be as tall as the grey and red boxes together. Any idea how to pull this off? Thanks!

rikmoncur

This might give you a start - it's a variation of the code at
w3schools

<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
margin-left:190px;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;

}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>
<body>

<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="header"><h1 class="header">W3Schools.com</h1></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p></div>

</div>

</body>
</html>

madwormer2

If you were to give the floated left hand column a background colour, you'd be able to see it doesn't have the full height, as requested. 😉

Just thought I'd point that out.

Although, having said that, you could just give the container a background color, and it'll take that colour. Problem solved.

sideslip

You could also give the wrapper div for each section a background image repeated vertically which is blue on the left, grey on the right - this will then ensure that the blue box is the same height as the grey or vice versa.

michaewlewis

wouldn't it be just as good and easier to just make a table with html?

<table border="1" width="400">
  <tr>
    <td>
      &nbsp;
    </td>
    <td>
      <table border="1" width="100%">
        <tr>
          <td height="25">&nbsp;</td>
        </tr>
        <tr>
          <td>
            <br><br><br><br><br><br><br><br><br><br>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

then just style it the way you want from there...
It would be less code anyway.

rapmonkey

michaewlewis wrote:
wouldn't it be just as good and easier to just make a table with html?

then just style it the way you want from there...
It would be less code anyway.

This layout was originally written in tables, and what I'm trying to do is convert it to a CSS layout. I will give the other ideas a shot. Thanks.

michaewlewis

alright...
I guess I don't understand, and maybe someone could explain to me. What is the benefit of using a CSS layout instead of a html table for any reason?

I still go with the html because it's simple, but if css does it more effectively and with more options, perhaps I'll work with that instead.
So what's the difference?

bpat1434

Tables are meant for tabular data. That's what they were initially created for. CSS allows for more extravogent layouts, and better positioning. CSS allows for more, and tables really restrict you. Plus, tables can get very dirty... and very jumbled.

A good CSS design can go a long way. Want some examples? Google for the CSS ZenGarden....you'll see some really nice examples...

Now, one thing to note: CSS does NOT replace HTML. CSS just removes the style from the HTML so that to change the look of the site, you edit one file. You still require HTML for the layout.

Some good tutorials are all over the web, and some good discussion on the pros and cons of CSS layouts. I'd suggest you start using CSS. You don't have to code a full site in it, but if you start playing around with it, you'll quickly realize the power of CSS.

<!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>CssCreator-->XHTML 1.0 Strict standard template </title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style type="text/css">
<!--
#wrapper
{
	width: 100%;
	margin: 0;
	padding: 0;
}
.row
{
	width: 99%;
	float: left;
	height: auto;
	margin: 5px 0;
	padding: 0;
	border: 1px solid #000;
}
.left
{
	width: 100%;
	background-color: #a4d3ee;
	color: #000;
	margin: 0;
	padding: 0;
}
.sidebar
{
	width: 140px;
	margin: 2px;
	padding: 0;
	float: left;
	border: 1px solid #000;
}
.right
{
	margin-top: 0px;
	margin-left: 160px; /* Change to width that you want left column to be */
	float: right;
	padding: 0;
}
.header
{
	width: 100%;
	height: 50px; /* Change to your height */
	background-color: #ee4b4b; /* Change to your color */
	color: #000;
	padding: 2px 5px;
	float: left;
	margin: 0;
}
.content
{
	width: 100%;
	float: left;
	background-color: #ccc; /* Change to your color */
	height: auto;
	padding: 5px;
	margin: 0;
	color: #000;
}
.clearer
{
	height: 0px;
	visibility: hidden;
	clear: both;
}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div class="row">
		<div class="left">
			<div class="sidebar">Some content in the left hand column</div>
			<div class="right">
				<div class="header">This would be the header</div>
				<div class="content">This is where the main meat of the content goes.<br /><br />
				As you can see, it will expand as needed, and the left column will grow with it!!<br /><br /><br />
				This just proves it.
				</div>
			</div>
		</div>
	</div>

<div class="row">
	<div class="left">
		<div class="sidebar">Some content in the left hand column</div>
		<div class="right">
			<div class="header">This would be the header</div>
			<div class="content">This is where the main meat of the content goes.<br /><br />
			As you can see, it will expand as needed, and the left column will grow with it!!<br /><br /><br />
			This just proves it.
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="left">
		<div class="sidebar">Some content in the left hand column</div>
		<div class="right">
			<div class="header">This would be the header</div>
			<div class="content">This is where the main meat of the content goes.<br /><br />
			As you can see, it will expand as needed, and the left column will grow with it!!<br /><br /><br />
			This just proves it.
			</div>
		</div>
	</div>
</div>
</div>
</body>
</html>

That gets you close, but it's not perfect, but it's something to work with....

rapmonkey

The above code works OK in IE6, however it goes crazy in Firefox. That is my problem now. I just realized my current code for this works as I expect it to in IE6, but goes haywire in Firefox. It is very important to me that it work in both IE6 or later and Firefox 1.5 or later. And I hear Firefox interprets CSS code the correct way, while IE6 does not. So technically, the code I am using is incorrect. Any suggestions?

bpat1434

My suggestion is to code to firefox first, then find what "fixes" or "dumb-downs" you need to make for IE. Then go from there....

Weedpacket

michaewlewis wrote:
alright...
I guess I don't understand, and maybe someone could explain to me. What is the benefit of using a CSS layout instead of a html table for any reason?

The example from ricmonkur says it:

William of Okham wrote:
Never increase, beyond what is necessary, the number of entities required to explain anything.

michaellewis wrote:
I still go with the html because it's simple,

No, it's familiar, but the HTML is nowhere near as simple.

But if css does it more effectively and with more options, perhaps I'll work with that instead.

It certainly does. There are plenty of things you can do with CSS layout that you flat-out can't do with tables.

Weedpacket

As with bpat's, it's not perfect; but it's IE that has the problems.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<style type="text/css">
<!--
.box
{
  padding:0;margin:0;
  margin-bottom:0.5em;
  background:blue;
}
.sidebar
{
  padding:0;margin:0;
  width:150px;
  float:left;
}
.main
{
  padding:0; margin:0;
  background:#ccc;
  margin-left:150px;
}
.main h2 
{
  background:red;
  padding:0; margin:0;
  height:1.2em;
}
-->
</style>
</head>
<body>
<div class="box">
  <div class="sidebar">Fit the first<br/>Fit the second<br/>Fit the third<br/></div>
  <div class="main"><h2>from "London Fantasy"</h2>
    <div>But for the fact that the eye can cease to respond<br>
    The brain to absorb, the heart to miss a beat<br>
    The spirit to launch itself on a hazard of speculation<br>
    Then, surely, in the weird creatures that make up this dark hive called London<br>
    Or for that matter the world<br>
    There would lie spread before us every day such a scene<br>
    As haunts the brains of madmen<br>
    A delirium of heads and frames and hands<br>
    A cavalcade hardly to be suffered<br>
    For the very endlessness of its inventive fantasy<br>....
    </div>
  </div>
</div>
<div class="box">
  <div class="sidebar">Fit the first<br/>Fit the second<br/>Fit the third<br/></div>
  <div class="main"><h2>from "London Fantasy"</h2>
    <div>But for the fact that the eye can cease to respond<br>
    The brain to absorb, the heart to miss a beat<br>
    The spirit to launch itself on a hazard of speculation<br>
    Then, surely, in the weird creatures that make up this dark hive called London<br>
    Or for that matter the world<br>
    There would lie spread before us every day such a scene<br>
    As haunts the brains of madmen<br>
    A delirium of heads and frames and hands<br>
    A cavalcade hardly to be suffered<br>
    For the very endlessness of its inventive fantasy<br>....
    </div>
  </div>
</div>
</body>
</html>

khendar

You could save yourself a lot of pain if you check out Ruthsarians layouts. Google for it. Excellent CSS layouts and he encourages everyone to use them for whatever purpose. Find one you like and modify it.

rikmoncur

Ruthsarians:
http://webhost.bridgew.edu/etribou/layouts/skidoo/

rapmonkey

Nevermind - I figured out the problem. :o

bpat1434

And that was?

rapmonkey

The float: left; somehow managed to slip away in the row, so it was producing some pretty crazy results. But I got it figured out now, thanks for all the help!!