To register for an Internet.com membership to receive newsletters and white papers, use the Register button ABOVE.
To participate in the message forums BELOW, click here
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!
<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>
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.
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?
__________________
CPU, AGP, SQL, PHP.... what is this language those young people keep speaking? What does it all mean!?
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.
HTML Code:
<!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....
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?
Location: Rapid Offensive Unit "Foreign Object Damage"
Posts: 19,126
Quote:
Originally Posted by 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?
The example from ricmonkur says it:
Quote:
Originally Posted by William of Okham
Never increase, beyond what is necessary, the number of entities required to explain anything.
Quote:
Originally Posted by michaellewis
I still go with the html because it's simple,
No, it's familiar, but the HTML is nowhere near as simple.
Quote:
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.
__________________
On two occasions I have been asked [by Members of Parliament], "Pray, Mr. Babbage, if you put into the machine wrong figures, will the right answers come out?" I am not able rightly to apprehend the kind of confusion of ideas that could provoke such a question.
Location: Rapid Offensive Unit "Foreign Object Damage"
Posts: 19,126
As with bpat's, it's not perfect; but it's IE that has the problems.
HTML Code:
<!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>
__________________
On two occasions I have been asked [by Members of Parliament], "Pray, Mr. Babbage, if you put into the machine wrong figures, will the right answers come out?" I am not able rightly to apprehend the kind of confusion of ideas that could provoke such a question.
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.
Linear Mode
