tableless CSS design

it really makes me mad

[ProfMoriarty]

Hello,

I´m just trying to switch my design from old fashionend table based layout to complete CSS layout. But - it really makes me mad. I don´t get it.

This is how it should look like:

____________________ 
¦...... (1) .......¦ 
¦__________________¦ 
¦...... (2) ...... ¦ 
¦__________________¦ 
¦.. ¦...¦..........¦ 
¦.. ¦...¦..........¦ 
¦(3)¦(4)¦.. (5) ...¦  
¦.. ¦...¦..........¦ 
¦___¦___¦__________¦ 
¦...... (6) ...... ¦ 
¦__________________¦ 

(1): header, width 100% fluid
(2): main navigation, width 100% fluid
(3): sub navigation, width 175 px fixed
(4): separator, width 100 px fixed
(5): content, rest of width fluid
(6): footer, width 100% fluid

Problem:
(3) should have a bgcolor down to the footer, (4) and (5) a background image down to the footer.

What was quite easy with tables is getting more and more difficult with divs. By the way: It doesn´t have to work with NS4, only modern browsers should display it correctly. But they don´t. They just ignore the backgrounds for (3) and (4) when text in (5) is longer than one screen.

Any help is really appreciated!

Thanks in advance,

ProfMoriarty

[Purple Martin]

This is what I would try:

1. Make another 100% wide div to contain 3,4,5.
2. Put 3,4,5 in that div with height:100%;

I haven't tried it but it'd be my first guess. The idea is that when you specify 100% for a div it will fill 100% of it's container. As 3,4,5 all have the same container, they will all have the same height. BTW - beware of position:absolute; because the container is then the body (I think).

[ProfMoriarty]

Thanks Martin,

I tried that. Works fine in IE 6 but not in NS 7. NS 7 overwrites the footer when the text in the content area is longer than one screen. Not _the_ solution

[glengara]

Pageoneresults seems to have cracked it, sticky him maybe.

[copongcopong]

may i know if your layout (containing all the css) would also be fluid for the browser or are you planning to make it in a specific width? (e.g. width:720px) If you are going to make the layout in fixed width then let it hold those css, you may use "float:left" then let each one push each other.

[ProfMoriarty]

The layout should be fluid in general. Only the sub navigation and the seperator are fixed (see sheet above).

Here is my stylesheet:

body
{
background-color: #000000;
margin: 0px;
padding: 0px;
font-family:Verdana, Arial, Helvetica, Sans-Serif;
color:#FFFFFF;
font-size: smaller;
}
div{
margin: 0px;
}

div.header
{
position: relative;
top: 0px;
width: 100%;
padding: 0px;
background-color: #000000;
}

div.naviMain
{
position: relative;
top: 0px;
width: 100%;
background-color: #7D99B0;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 2px;
padding-bottom: 2px;
}

div.naviSub
{
position: relative;
top: 0px;
width: 200px;
height: 100%;
background-color: #2A333B;
float:left;
vertical-align: top;
}

div.seperatorContent
{
position: relative;
left: 0px;
float:left;
width: 100px;
height: 100%;
background-image: url("/images/layout/bg.jpg");
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
vertical-align: top;
}

div.content
{
position: relative;
top: 0px;
left: 0px;
margin-left: 301px;
background-image: url("/images/layout/books.jpg");
text-align: justify;
}

div.footer
{
position: relative;
top: 0px;
width: 100%;
background-color: #DCBC70;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 2px;
padding-bottom: 2px;
}

Hope this helps :-)

[ProfMoriarty]

Maybe a look at the site layouted with tables helps more than just the abstract code. See URL in my profile.

Thanks!

[Nicu_Alecu]

Unfortunately, the site in your profile gives me a "Connection timeout". Nevertheless, I took the liberty of testing your CSS in a HTML file (see here [alegradesign.com]). There are so many problems with it that I figured I'd rather think about a different solution.

What I came up with is this [alegradesign.com]. It is based on a CSS layout found on [glish.com...] which, by the way, is a great resource to learn from, but it does contain a lot of alterations.

As you can see, the Separation area is actually contained in the side navigation box and floated right. This was the simplest way I could think of to actually get to the layout you desired.

Now, I'm not going to say it's a final solution or even a problem-free one, just a way of dealing with your layout. If you need any special clarifications, sticky me or email me.

I've tested both your CSS and mine in IE6, NN6.2 and Opera 5.12, on various resolutions, and it works just fine ... well, there are some content related problems, but I think you can work them out by playing with the CSS file.

Hope this DOES help.

[copongcopong]

Prof,

hav you tried to arrange the layout in this manner?

<div style="float:left;">
<div class="header">etc</div>
<div class="naviMain"> etc</div>
<div class="naviSub">etc</div>
<div class="seperatorContent">etc</div>
</div>

<div class="footer">sadsad</div>

BTW: I tried it in MSIE 5.0 and it work <!-- cannot test it in opera and ns since im at work right now ... shhhhh -->