Hello again,

I'm trying to design a "nice" website for someone's company and was wondering if there's any way I can do the following without having to use tables.

Basically, I want the main body of the site (currently represented by 'a') to be in that large, gaping empty hole to the right of the blue navigation box, inside the red box. As I'm sure you can see, it's not there at the minute. Anything red has been added in photoshop in the form of an annotation for your understanding. I can see how I'd do it in tables - put the blue navbox in a table and the main body box in a table, but is there any way to do it without having to go near tables?

Also, how can I get the blue Navigation box to extend down the entire height of the white box, so it meets the pale blue at the bottom?


Here's the relevant HTML:

<!-- Page wrapper to generate white centre background -->
<div id="wrapper">

<!-- Main logo -->
<div id="logo">
<img src="images/logo.png" alt="logo">
</div>
<!-- End logo -->

<!-- Green banner beneath logo -->
<div id="greenbanner">
<img src="images/green_banner.png" width="900px" alt="Green banner">
</div>
<!-- End green banner -->

<!-- Navbox -->
<div id="navbox">
<p class="navheader">Navigation</p>

<p class="navboxtext">
<span class="navboxtextactive">
Home</span><br>
<a href="about.html">About Us</a><br>
<a href="what.html">What We Do</a><br>
<a href="news.html">Latest News</a><br>
<a href="useful.html">Useful Sites</a>
</p>
<p class="navboxtext">
<a href="sitemap.html">Site Map</a></p>
</div>
<!-- End navbox -->

<!-- Main body -->

<div id="main">
<p>a</p>


</div>
<!-- End main body -->

<!-- End wrapper -->
</div>

And the relevant CSS
body
{
background-color:#D9E7FF;
margin:0px;
padding:0px;
text-align:center;
}

#wrapper
{
margin-top:50px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
text-align:left;
width: 900px;
background-color:white;
}

#logo
{
margin-top:5px;
margin-bottom:5px;
}

#greenbanner
{
margin-bottom:3px;
}

#navbox
{
text-align:left;
background-color:#5790EF;
width:220px;
padding-left:20px;
padding-top:5px;
}

#main
{
text-align:left;
background-color:white;
width:680px;
padding-left:20px;
padding-right:20px;
padding-top:5px;
padding-bottom:20px;
}

.navboxtext
{
font-family:'Trebuchet MS', 'Arial';
color:white;
font-size:12pt;
font-weight:700;
}

.navboxtext A
{
text-decoration:none;
}

.navboxtext A:link
{
color:white;
}

.navboxtext A:visited
{
color:#DEDEDE;
}

.navboxtext A:hover
{
color:black;
}

.navboxtext A:active
{
color:black;
}

.navheader
{
font-family:'Trebuchet MS', 'Arial';
color:white;
font-size:16pt;
font-weight:700;
}

.navboxtextactive
{
font-family:'Trebuchet MS', 'Arial';
color:black;
font-size:12pt;
font-weight:700;
}



Thanks :D


Edit:

Oh yeah, the picture would help:
http://img228.imageshack.us/img228/5068/picture1pt0.png

Offhand, I'd say use the left/right/top/bottom CSS properties to customize the size/position of your divs. (by default they'll fit to content and go below each other, annoying buggers)

Offhand, I'd say use the left/right/top/bottom CSS properties to customize the size/position of your divs. (by default they'll fit to content and go below each other, annoying buggers)
... and how might I do that? :p :)

Also, there's only the two boxes on that "row" - navbar on the left and "main" on the right.

... and how might I do that? :p :)

Also, there's only the two boxes on that "row" - navbar on the left and "main" on the right.Well I usually absolutely position my boxes to the screen. (top/left/right/bottom define the distance between the div and screen/child/whatever, depends on what you set position (http://www.w3schools.com/css/css_reference.asp#positioning) to, which affects both their position and size) Dream17's design is similar to yours, you can have a look: http://www.dream17.co.uk/purple.css

I'm not that good with CSS though so I'll let someone else figure out your design in case I just make it worse.

The left/right/top/bottom CSS properties are not well-supported by IE6, but because your design is quite simple, you don't necessarily need to use them. Another way is to add the following properties:

#navbox {float:left}

#main {margin-left: 240px}

This should float the navigation to the left and put the main content box approximately where you want it.

Thanks bloopy :D

Is there a way I can get the blue navbox to stretch right down to the bottom of the wrapper div (ie, down to the bottom of the white centre, so the darker blue meets the light blue)?

*bumpity bump*

I've got it almost there :D (the people I'm designing this site for are really happy with the way it's looking as well - thanks for the help :D)

Final headache as far as I can see it (obviously still need to tweak the padding and margins a bit) is trying to get the dark blue of the navbox to go right down to the bottom of #wrapper (ie - the blue navbox background goes right down to where the white centre bit meets the pale blue at the bottom of the screen). How can I do this?

If you want more up-to-date CSS & HTML, let me know.

http://img510.imageshack.us/img510/6643/picture1tw9.th.png (http://img510.imageshack.us/my.php?image=picture1tw9.png)


Thanks for the help :)

There's a couple of things you could do to solve that navbox issue.


One way is to use bottom, but that means you also need to use absolute positioning, and it wouldn't work in IE6. Instead of float-left, you would use something like this:

#navbox {position:absolute; top:100px;left:20px;bottom:20px}


Another way is to remove the background colour from the navbox, and instead make a background image for the main content box. The background image would be 1px high and however wide you want, and it would have a blue stripe where the navbox is. I think you'd need to use #main {padding-left: 240px} instead of margin-left. You'd also use #main {background-repeat: no-repeat;} so that people only get one stripe no matter how wide their display is.

I thought IE6 only screwed up relative positioning, not absolute one.

There's a couple of things you could do to solve that navbox issue.


One way is to use bottom, but that means you also need to use absolute positioning, and it wouldn't work in IE6. Instead of float-left, you would use something like this:

#navbox {position:absolute; top:100px;left:20px;bottom:20px}


Another way is to remove the background colour from the navbox, and instead make a background image for the main content box. The background image would be 1px high and however wide you want, and it would have a blue stripe where the navbox is. I think you'd need to use #main {padding-left: 240px} instead of margin-left. You'd also use #main {background-repeat: no-repeat;} so that people only get one stripe no matter how wide their display is.
Will that allow for a "dynamic" height to fit in with whatever the main body "box" has in it?

Yes, it's not specifying the height, it's leaving it dynamic. Top and bottom specify the distance from the edges of the page, not the browser window. Though for the background image solution, you'd actually need to put the background on a containing box which holds both navbox and main, otherwise it wouldn't extend down if the navbox is longer than the content.

I thought IE6 only screwed up relative positioning, not absolute one.

IE6 screws up absolute positioning as well, but only bottom & right, not top & left.

IE6 screws up absolute positioning as well, but only bottom & right, not top & left.
Doesn't IE6 screw everything up?. And I mean everything :p

Yeah... it screws life and the universe. Sometimes it screws things gently, and you don't notice until it's too late. It's like having an ant's leg stuck between your teeth.

I remember the issues I had when I designed my first website using nothing but tables... IE 5 & 6 really messed it up compared to Firefox/Safari.

I remember the issues I had when I designed my first website using nothing but tables... IE 5 & 6 really messed it up compared to Firefox/Safari.

This can be safely generalised:

I remember the issues I had when I designed my [BLANK] website using [BLANK]... IE [BLANK] really messed it up compared to [BLANK].

I wonder how IE would mess up a blank website.

I wonder how IE would mess up a blank website.
it would give you a 404

thomasp, there isn't currently an "elegant" solution to do this, ie a style setting you can just apply.

I know of two methods though, the first is using javascript to get the height of the longer div and apply it to the shorter div after page load.

The second (and imo better) is to put your navbar and content area into a container div, create a 240px by 1px blue gif image, and set it as background image to the container (top left repeat-y). The container will always expand down to accomodate the longer of the two divs, taking its background with it.

Also, i find it easier to float both div's left in those situations, rather than just floating the navbar and messing with margins on the main area. It tends to be more browser consistent. Seems weird to float them both left when one is on the right, but it stacks them next to each other nicely.

Apologies if the code has errors, i have just written it in here without testing. It should illustrate the idea regardless.

...
<div id="container">
<div id="navbox">
...
</div>
<div id="main">
...
</div>
</div>
...


#container {
background: #ffffff url('images/bluebar.gif') top left repeat-y;
}

#navbox {
float: left;
width: 220px;
padding-left: 20px;
...
}

#main {
float: left;
}


If you still can't get it to work, pass your code over and i'll do it :).

P.S, if you want to see a real CSS layout nightmare, check out this site i've been making for a friends business: http://www.soupaday.co.uk/ (that's all hand-coded btw)

thomasp, there isn't currently an "elegant" solution to do this, ie a style setting you can just apply.

I know of two methods though, the first is using javascript to get the height of the longer div and apply it to the shorter div after page load.

The second (and imo better) is to put your navbar and content area into a container div, create a 240px by 1px blue gif image, and set it as background image to the container (top left repeat-y). The container will always expand down to accomodate the longer of the two divs, taking its background with it.

Also, i find it easier to float both div's left in those situations, rather than just floating the navbar and messing with margins on the main area. It tends to be more browser consistent. Seems weird to float them both left when one is on the right, but it stacks them next to each other nicely.

Apologies if the code has errors, i have just written it in here without testing. It should illustrate the idea regardless.
<snip>

If you still can't get it to work, pass your code over and i'll do it :).

Thanks for that - I'll have a go tonight and let y'all know how it goes.

Why can't designing websites in a text editor be as easy as doing it in Photoshop :p

P.S, if you want to see a real CSS layout nightmare, check out this site i've been making for a friends business: http://www.soupaday.co.uk/ (that's all hand-coded btw)

*Head a-splodes*

Hmmm, if I have float:left in both #navbox and #main, using M3ntal's method, it totally screws up on safari and screws up even more on Firefox.

Just have float:left in #navbox and it works fine, using M3ntal's method.


Also, found an interesting glitch when cross-checking in Firefox. The green bar at the top (#greenbanner) is about 10k pixels high in firefox - if I add "height="35px"" to the img tag, then it seems to work fine. And, Firefox doesn't render colours correctly - comparing to safari & Photoshop...