Sizing errors in 3 column + header layout in NS 7.0

Ember~Daze

01-31-2004, 11:20 PM

Hello,

I've been searching like mad to find an answer to my problem, and unfortunately have had no luck. If anyone can shed some light onto this gloomy beginner coder I would be ever grateful. Here's my problem.

To learn CSS I'm trying to make a simple 3 column layout with a header spanning across the entire top. I've also made it to be centered at all times. In IE everything seems to be alright but in Netscape 7.0 I run into a couple annoying errors.

One, the top banner lines up nicely on the left but seems to be a few pixels to large on the right side even though my settings are all evened out.

Two, the center column runs to far down, passing the left/right columns, leaving blank spaces even though the height is set to 100% for all three.

Here's my code...

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

</style>

</head>

<DIV>
<DIV id="Container">
<DIV id="Top"></DIV>
<DIV id="LeftColumn"></DIV>
<DIV id="CenterColumn"></DIV>
<DIV id="RightColumn"></DIV>
</DIV>
</body>
</html>

I also have another quick question I'm sure can be easily answered. And that is, what is the difference between static and liquid CSS? Is it the difference between absolute pixel/unit positioning and positioning based on the natural flow of the page?

Thanks so much for any help. Even a pointer to an article or something would be awesome! :)

- Ember~Daze

mindlessLemming

02-01-2004, 08:51 AM

Have a look at the CSS layouts at glish.com (http://glish.com/css/).

Also - "Static" CSS (Fixed layout) means elements are sized absolutely (px), "Liquid" or "Fluid" refers to using em's and % for all sizing.
While I'm at it, here is a fluid layout (http://studentwork.qantm.com.au/akrespanis/NavAust/index.html) that I'm currently wrestling with.
Change your browser's text size to see the effect.

Andrew

*edit: Now that you've stepped up to CSS, use Netscape 7, Mozilla, Firebird or any other Gecko browser as your primary browser, and check your work in IE.
This is because NN7 etc are standards compliant browsers, they don't accept proprietry tags and are (currently) the best browsers available. If you code to the standards, then hack it to death for IE, the process will be far more painless.
:thumbsup:

Ember~Daze

02-01-2004, 09:04 PM

Thank-you. :) I'm so pumped to learn CSS that I've been anxious to get a response. The link to glish was helpful as well as seeing your example of a fluid layout. Also, knowing what static and liquid mean has made me re-think the plans I had for the site I want to produce.

Well, I figured out how to make my layout work in both IE and NS without errors in 800x600 or 1024x768. I then attempted to add a nested DIV in the #Center column in order to make an inset box for the content. The results in IE were pleasing but in NS I encountered an error. What happens is that the layer (as I do believe it becomes once I define its 'position') shows at the correct height, but floats on over to the left side of the page. Here's my fixed up code for centering the whole kit-and-kaboodle with the new layer added in.

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

</style>

</head>
<body>
<DIV id="Container">
<DIV id="Top"></DIV>
<DIV id="LeftColumn"></DIV>
<DIV id="RightColumn"></DIV>
<DIV id="CenterColumn"><DIV id="Content">This is a simple 3 column w/header layout. It is
100% table free!</DIV></DIV>
</DIV>
</body>
</html>

:)

mindlessLemming

02-01-2004, 11:19 PM

Your header div did not reach the right side of screen at 1024x768 in Moz. I've fixed that. Your container div was doing nothing more than causing a black margin down the left of viewport at 1024x768. I removed it. Your content div was quite semanticly meaningless, so I replaced it with <p>. Text no longer overlaps, but isn't fixed either.

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
BODY {
margin: 0px;
background-color: #000000;
color: #FFFFFF;
font-family: Arial;
}
#LeftColumn {
float: left;
width: 130px;
height: 100%;
background-color: #000066;
border: #0066FF ridge;
border-width: 0px 2px 0px 2px;
margin: 0;
}
#CenterColumn { background-color: #000000;
border: #0066FF ridge;
border-width: 2px 0px 0px 0px;
}
#RightColumn {
float: right;
width: 130px;
height: 100%;
background-color: #000066;
border-color: #0066FF;
border-width: 0px 2px 0px 2px;
border-style: ridge;
margin: 0;
}
#Top {
height: 150px;
background-color: #000066;
border-color: #0066FF;
border-width: 2px 2px 0px 2px;
border-style: ridge;
margin: 0;
}
#CenterColumn p {
height: 50%;
font-size: 10pt;
padding: 15px;
background:#000;
margin-left: 100px;
border:2px ridge #0066FF;
}
</style>

</head>
<body>
<DIV id="Top"></DIV>
<DIV id="LeftColumn"></DIV>
<DIV id="RightColumn"></DIV>
<DIV id="CenterColumn"><p>This is a simple 3 column w/header layout. It is
100% table free!</p></DIV>
</body>
</html>

Andrew

Ember~Daze

02-01-2004, 11:55 PM

Wow. You just did what I initially wanted to do when I started coding the page. Damn, I got a long way to go with this CSS. But hey, it's all fun to me (aside form the occasional urges to catapult my keyboard into utter oblivion) ;). Well, thanks so much for your help! It's appreciated very much so. As you recommended I will start coding and testing in NS 7.0. I'm going to grab Mozilla also and Firebird too. :)

mindlessLemming

02-02-2004, 12:34 AM

Just for your own knowledge, all I did was remove the #container <div>, and remove the width of the #top <div>.
Sometimes it's better to let elements size themselves, and restrict their size using margins (on them) and/or padding (on their parent div).

Have fun, CSS rocks :thumbsup:
Andrew