13 replies [Last post]
KenPalmer
Offline
newbie
Last seen: 10 years 32 weeks ago
Timezone: GMT-6
Joined: 2009-02-01
Posts: 7
Points: 2

Help! I've been at this for several hours today, and am about to give up and go back to tables.

Here is the layout I'm trying to get.

|-------------------------|
| Logo       | Banner Ad ||
|-------------------------|
| Main              | Nav |
|                   |     |
|-------------------------|
| Footer                  |
|-------------------------|

What I need is a fluid layout that always keeps Nav to the right of Main.
Main needs to have a max width of 500 px.
Nav needs to have a max width of 200 px and a min width of 100px.

Right now I have 2 problems:
1. The div for the banner ad shows up below the header above the Nav.
2. The Nav div gets shoved below Main rather than staying in place. This is most frustrating.

This is what it looks like right now:

|-------------------------|
| Logo                    |
|-------------------------|
| Main         | Banner Ad|
|              | Nav      |
|-------------------------|
| Footer                  |
|-------------------------|

If I take the Banner Ad piece out, I get this:

|-------------------------|
| Logo                    |
|-------------------------|
| Main              | Nav |
|                   |     |
|-------------------------|
| Footer                  |
|-------------------------|

But if I resize the browser to a smaller size, Nav gets shoved under Main, like this:

|-------------------|
| Logo              |
|-------------------|
| Main              |
|                   |
|-------------------|
| Nav               |
|-------------------|
| Footer            |
|-------------------|

I've been at this for several hours today. It would be easy for me to do this with Tables, but since I'm working on a new website, I thought it would be good to try doing this the css-way. I found a website that does the fluid content very nicely, but the code is too complex to absorb quickly.
http://www.webcredible.co.uk/services/support.shtml

This must work in the browsers below. If it works in others, that's a bonus.
* Internet Explorer 6 & 7
* Firefox 2 & 3
* Safari

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style type="text/css" media="all">
      	body {border: none; margin: 0; padding: 0; font-family: Georgia; font-size: 1em; line-height:130%;}
      	h1 {font-size:1.5em; font-family:Tahoma; font-weight:bold; margin:0; padding:0; line-height:100%}
      	p {margin-top:0;}
 
      	#o {text-align:left;}
      	#h {position:relative; padding: .5em; background-color: #ddd; border-bottom: 1px solid gray;}   	
      	#m {position:relative; float:left; max-width:570px; padding:10px; font-size:1em; border:1px black solid}
      	#n {width:200px; padding-left:20px;}
      	#f {clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray; }
      	#ld {float:right; width:400px; height:50px; background-color:blue;}
    </style>
</head>
<body>
 
		<div id="h">Header
			<div id="ld"></div>
		</div>
		<div id="m">
				<h1>Lorem ipsum dolor</h1>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ut nibh. Nulla ac nibh. Phasellus nibh. Etiam tellus. Etiam nec lacus vitae est aliquam varius. Aliquam erat volutpat. Morbi vel mi ac dui laoreet varius. Sed adipiscing nulla sed diam. Integer lacinia mi. Nulla non quam ut tellus faucibus elementum. Curabitur tincidunt turpis quis velit. Vestibulum rutrum placerat urna. Duis fringilla massa non est. Etiam nibh diam, posuere in, pellentesque at, ultrices fermentum, lectus. Donec iaculis. Donec gravida.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ut nibh. Nulla ac nibh. Phasellus nibh. Etiam tellus. Etiam nec lacus vitae est aliquam varius. Aliquam erat volutpat. Morbi vel mi ac dui laoreet varius. Sed adipiscing nulla sed diam. Integer lacinia mi. Nulla non quam ut tellus faucibus elementum. Curabitur tincidunt turpis quis velit. Vestibulum rutrum placerat urna. Duis fringilla massa non est. Etiam nibh diam, posuere in, pellentesque at, ultrices fermentum, lectus. Donec iaculis. Donec gravida.</p>
				<h1>Praesent ut nibh</h1>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ut nibh. Nulla ac nibh. Phasellus nibh. Etiam tellus. Etiam nec lacus vitae est aliquam varius. Aliquam erat volutpat. Morbi vel mi ac dui laoreet varius. Sed adipiscing nulla sed diam. Integer lacinia mi. Nulla non quam ut tellus faucibus elementum. Curabitur tincidunt turpis quis velit. Vestibulum rutrum placerat urna. Duis fringilla massa non est. Etiam nibh diam, posuere in, pellentesque at, ultrices fermentum, lectus. Donec iaculis. Donec gravida.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ut nibh. Nulla ac nibh. Phasellus nibh. Etiam tellus. Etiam nec lacus vitae est aliquam varius. Aliquam erat volutpat. Morbi vel mi ac dui laoreet varius. Sed adipiscing nulla sed diam. Integer lacinia mi. Nulla non quam ut tellus faucibus elementum. Curabitur tincidunt turpis quis velit. Vestibulum rutrum placerat urna. Duis fringilla massa non est. Etiam nibh diam, posuere in, pellentesque at, ultrices fermentum, lectus. Donec iaculis. Donec gravida.</p>
		</div>
		<div id="n">
			Navigation
			<a href="">Link 1</a>
			<br><a href="">Link 2</a>
			<br><a href="">Link 3</a>
			<br><a href="">Link 4</a>
			<br><a href="">Link 5</a>
		</div>
		<div id="f">Footer</div>
 
	</div>
</div>
 
</body>
</html>

Thanks for your help.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

having id's named L M N O P

having id's named L M N O P might seem easier to you, but if you name your IDs with something that makes sense, like LOGO, HEADER, CONTENT, FOOTER then we could look through your code a lot easier.

Don't make us work harder then we have to so that we can provide you with quality free help.

Also, you should only have one tag per page and it should be the most important information on that page.

Your navigation is a LIST of links and should therefore be marked up as such

You should validate your code.
If you are using a XHTML doctype, then is not valid. You should be using this is all I notice from the get go, but there could be other errors.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

KenPalmer
Offline
newbie
Last seen: 10 years 32 weeks ago
Timezone: GMT-6
Joined: 2009-02-01
Posts: 7
Points: 2

Thanks for responding Deuce,

Thanks for responding Deuce, and for the pointers. My apologies for the cryptic names. Revised code is below.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style type="text/css" media="all">
      	body {border: none; margin: 0; padding: 0; font-family: Georgia; font-size: 1em; line-height:130%;}
      	h1 {font-size:1.5em; font-family:Tahoma; font-weight:bold; margin:0; padding:0; line-height:100%}
      	p {margin-top:0;}
 
      	#head {position:relative; padding: .5em; background-color: #ddd; border-bottom: 1px solid gray;}   	
      	#main {position:relative; float:left; max-width:570px; padding:10px; font-size:1em; border:1px black solid}
      	#navigation {width:200px; padding-left:20px;}
      	#footer {clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray; }
      	#BannerAd {float:right; width:400px; height:50px; background-color:blue;}
    </style>
</head>
<body>
 
		<div id="head">Header
			<div id="BannerAd"></div>
		</div>
		<div id="main">
				<h1>Lorem ipsum dolor</h1>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ut nibh. Nulla ac nibh. Phasellus nibh. Etiam tellus. Etiam nec lacus vitae est aliquam varius. Aliquam erat volutpat. Morbi vel mi ac dui laoreet varius. Sed adipiscing nulla sed diam. Integer lacinia mi. Nulla non quam ut tellus faucibus elementum. Curabitur tincidunt turpis quis velit. Vestibulum rutrum placerat urna. Duis fringilla massa non est. Etiam nibh diam, posuere in, pellentesque at, ultrices fermentum, lectus. Donec iaculis. Donec gravida.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ut nibh. Nulla ac nibh. Phasellus nibh. Etiam tellus. Etiam nec lacus vitae est aliquam varius. Aliquam erat volutpat. Morbi vel mi ac dui laoreet varius. Sed adipiscing nulla sed diam. Integer lacinia mi. Nulla non quam ut tellus faucibus elementum. Curabitur tincidunt turpis quis velit. Vestibulum rutrum placerat urna. Duis fringilla massa non est. Etiam nibh diam, posuere in, pellentesque at, ultrices fermentum, lectus. Donec iaculis. Donec gravida.</p>
				<h1>Praesent ut nibh</h1>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ut nibh. Nulla ac nibh. Phasellus nibh. Etiam tellus. Etiam nec lacus vitae est aliquam varius. Aliquam erat volutpat. Morbi vel mi ac dui laoreet varius. Sed adipiscing nulla sed diam. Integer lacinia mi. Nulla non quam ut tellus faucibus elementum. Curabitur tincidunt turpis quis velit. Vestibulum rutrum placerat urna. Duis fringilla massa non est. Etiam nibh diam, posuere in, pellentesque at, ultrices fermentum, lectus. Donec iaculis. Donec gravida.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ut nibh. Nulla ac nibh. Phasellus nibh. Etiam tellus. Etiam nec lacus vitae est aliquam varius. Aliquam erat volutpat. Morbi vel mi ac dui laoreet varius. Sed adipiscing nulla sed diam. Integer lacinia mi. Nulla non quam ut tellus faucibus elementum. Curabitur tincidunt turpis quis velit. Vestibulum rutrum placerat urna. Duis fringilla massa non est. Etiam nibh diam, posuere in, pellentesque at, ultrices fermentum, lectus. Donec iaculis. Donec gravida.</p>
		</div>
		<div id="navigation">
			Navigation
			<ul>
				<li><a href="">Link 1</a></li>
				<li><a href="">Link 2</a></li>
				<li><a href="">Link 3</a></li>
				<li><a href="">Link 4</a></li>
				<li><a href="">Link 5</a></li>
			</ul>
		</div>
		<div id="footer">Footer</div>
 
</body>
</html>

KenPalmer
Offline
newbie
Last seen: 10 years 32 weeks ago
Timezone: GMT-6
Joined: 2009-02-01
Posts: 7
Points: 2

Harder than Hockey Sticks

It must be harder than hockey sticks to do what I've requested with CSS. Apparently none of the experts want to answer that post. I looked at some CSS books today and there were pages-upon-pages of instructions to perform layouts. There is a whole book dedicated to CSS layouts. A whole book!

And this expert-level forum has yielded nothing I can use. No offense Deuce, at least you wrote something. But it's not a solution.

It shouldn't be this freaking hard. To top it off, how many bytes of code do you have to download to the browser to implement a CSS layout that will work in the most popular browser on the planet? Compare that with the number of bytes to download a table. And even if you get some magic copy-paste CSS, you're not guaranteed that it will render as expected in all browsers.

Hack, hack, and more hackity hack. It's no different today than it was 10 years ago when I started programming for the web. 3 years ago I seriously worked on a CSS layout for another website, and it was just as bad. All hacks for IE. It's a simple TV-Tray layout. That's what we're talking about here -- A TV Tray.

There comes a point where Time is more valuable than style. In 10 minutes I have a working table layout. In 12+ hours with CSS I have nothing to show, other than the knowledge that I can use unordered lists to structure links. That's pretty nice. But the main goal of getting a pure CSS layout that is cross browser compliant down to IE6 is still a pipe-dream in 2009.

Until IE6 has less than 3% of market-share on TheCounter.com, and IE7 is more CSS compliant, I'm going back to tables.

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 2 years 34 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Maybe you should try reading

Maybe you should try reading some books then before coming and asking people to tell you how to build your site. And go design your site for IE I'm sure it will look great.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Ken get a grip please, you

Ken get a grip please, you posted on a Sunday that means the weekend, many of us are jobbing coders or at least suffering the working week, sane people tend to try and have a break over the weekend, the forum is slower over weekends. To then moan that you haven't had a response that satisfied after a single day is simply bad form, enough said?

You will find that Writing semantic standards compliant markup - forget CSS for the minute - is a lot harder than you realise, tables for layouts are far simpler but entirely wrong used in that manner for layout structure; CSS is the next hurdle as it's also not that easy and is most definitely not picked up overnight, you are going to need to apply yourself to learning new methods and expect to have to invest some time in that.

We will help with this but be assured we will not simply write layouts for people - well perhaps we will but that is what most of do day in day out and we get paid for that, here we don't it's free advice - there are hundreds of ready made example layouts around the web by CSS gurus, you ought to look at those first as a guide.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

KenPalmer
Offline
newbie
Last seen: 10 years 32 weeks ago
Timezone: GMT-6
Joined: 2009-02-01
Posts: 7
Points: 2

My apologies

My apologies everyone. It was late, and I was extremely frustrated.

rejamesuk
Offline
Regular
uk
Last seen: 12 years 33 weeks ago
uk
Joined: 2009-01-10
Posts: 38
Points: 0

it's by no means perfect,

it's by no means perfect, but hopefully it'll give you some idea

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style type="text/css" media="all">
      	body {border: none; margin: 0; padding: 0; font-family: Georgia; font-size: 1em; line-height:130%;}
      	h1 {font-size:1.5em; font-family:Tahoma; font-weight:bold; margin:0; padding:0; line-height:100%}
      	p {margin-top:0;}
 
      	#head {padding: .5em; background-color: #ddd; border-bottom: 1px solid gray; float:left; width:100%;}
		#main_container {width:100%;float:left; position:relative;}   	
      	#main { max-width:500px; padding:10px; font-size:1em; border:1px black solid; float:left;margin-right:200px;}
      	#navigation {width:200px; padding-left:20px;right:0;top:0;position:absolute;}
      	#footer {clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray; }
      	#BannerAd {float:right; width:400px; height:50px; background-color:blue;}
    </style>
</head>
<body>
 
		<div id="head">Header
			<div id="BannerAd"></div>
		</div>
        <div id="main_container">
        <div id="navigation">
			Navigation
			<ul>
				<li><a href="">Link 1</a></li>
				<li><a href="">Link 2</a></li>
				<li><a href="">Link 3</a></li>
				<li><a href="">Link 4</a></li>
				<li><a href="">Link 5</a></li>
			</ul>
		</div>
		<div id="main">
				<h1>Lorem ipsum dolor</h1>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ut nibh. Nulla ac nibh. Phasellus nibh. Etiam tellus. Etiam nec lacus vitae est aliquam varius. Aliquam erat volutpat. Morbi vel mi ac dui laoreet varius. Sed adipiscing nulla sed diam. Integer lacinia mi. Nulla non quam ut tellus faucibus elementum. Curabitur tincidunt turpis quis velit. Vestibulum rutrum placerat urna. Duis fringilla massa non est. Etiam nibh diam, posuere in, pellentesque at, ultrices fermentum, lectus. Donec iaculis. Donec gravida.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ut nibh. Nulla ac nibh. Phasellus nibh. Etiam tellus. Etiam nec lacus vitae est aliquam varius. Aliquam erat volutpat. Morbi vel mi ac dui laoreet varius. Sed adipiscing nulla sed diam. Integer lacinia mi. Nulla non quam ut tellus faucibus elementum. Curabitur tincidunt turpis quis velit. Vestibulum rutrum placerat urna. Duis fringilla massa non est. Etiam nibh diam, posuere in, pellentesque at, ultrices fermentum, lectus. Donec iaculis. Donec gravida.</p>
				<h1>Praesent ut nibh</h1>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ut nibh. Nulla ac nibh. Phasellus nibh. Etiam tellus. Etiam nec lacus vitae est aliquam varius. Aliquam erat volutpat. Morbi vel mi ac dui laoreet varius. Sed adipiscing nulla sed diam. Integer lacinia mi. Nulla non quam ut tellus faucibus elementum. Curabitur tincidunt turpis quis velit. Vestibulum rutrum placerat urna. Duis fringilla massa non est. Etiam nibh diam, posuere in, pellentesque at, ultrices fermentum, lectus. Donec iaculis. Donec gravida.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ut nibh. Nulla ac nibh. Phasellus nibh. Etiam tellus. Etiam nec lacus vitae est aliquam varius. Aliquam erat volutpat. Morbi vel mi ac dui laoreet varius. Sed adipiscing nulla sed diam. Integer lacinia mi. Nulla non quam ut tellus faucibus elementum. Curabitur tincidunt turpis quis velit. Vestibulum rutrum placerat urna. Duis fringilla massa non est. Etiam nibh diam, posuere in, pellentesque at, ultrices fermentum, lectus. Donec iaculis. Donec gravida.</p>
		</div>
 
        </div><!--main_container-->
		<div id="footer">Footer</div>
 
</body>
</html>

good luck with it

KenPalmer
Offline
newbie
Last seen: 10 years 32 weeks ago
Timezone: GMT-6
Joined: 2009-02-01
Posts: 7
Points: 2

Thank you! I'll check it

Thank you! I'll check it out when I get home.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 35 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

To start with the Doctype

To start with the Doctype will put IE into quirks mode, I believe.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

KenPalmer
Offline
newbie
Last seen: 10 years 32 weeks ago
Timezone: GMT-6
Joined: 2009-02-01
Posts: 7
Points: 2

I see. So surround the left

I see. So surround the left and right columns in a container. A friend recommended using clear:both in a break tag as well. Thanks so much rejamesuk.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 35 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

You have to use a standards

You have to use a standards triggering doctype for IE6. This is well documented on the web and also in the "How to" forum here.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

rejamesuk
Offline
Regular
uk
Last seen: 12 years 33 weeks ago
uk
Joined: 2009-01-10
Posts: 38
Points: 0

KenPalmer wrote:I see. So

KenPalmer wrote:

I see. So surround the left and right columns in a container. A friend recommended using clear:both in a break tag as well.

i cant see any need for this? Where was he putting it?

And yes, get a doctype.

edit: you have one in the first bit of code you posted

rejamesuk
Offline
Regular
uk
Last seen: 12 years 33 weeks ago
uk
Joined: 2009-01-10
Posts: 38
Points: 0

KenPalmer wrote:I see. So

KenPalmer wrote:

I see. So surround the left and right columns in a container. A friend recommended using clear:both in a break tag as well. Thanks so much rejamesuk.

ps. also check out the positioning, floats, and very large margin. The container doesn't do much, i just have a case of divitus.