fluid layout/header problem (in IE)

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Heya guys,

This is my first time posting on a group, so first of all, hello to
everybody :)

At the moment I'm on a placement (I'm a student studying BSc
Multimedia) doing some web related work, and part of it involves me
creating a website for a shop.

Originally they wanted me to design for  high resolution but I figured
I would try my hand at a fluid layout with xhtml/css, as I'm used to
creating fixed widths.

The problem is this:

In IE, when you resize the window, the navigation breaks away from the

Here's a screenshot to explain what I mean:

I was just wondering if I'd be able to keep the top/bottom borders
connected to the container, It seems that when the container reaches
the end of the header (right hand side, 421px I think) it causes the
navigation to break away.

Here's the files for you to have a look at:

The files I've linked to are just a dummy page to highlight my problem.
 In the website I'm creating I've used min-width on the container, but
I guess min-width only applies to FF and isn't recognised by IE.

I hope I've explained my problem clearly, if not please say and I'll do
my best to add more clarity.

Thanks in advance,

Re: fluid layout/header problem (in IE)

In article
 ste.diamond@gmail.com wrote:

Quoted text here. Click to load it

What is your purpose in having both #wrap and also #container?


Re: fluid layout/header problem (in IE)

Quoted text here. Click to load it

A friend pointed out that the original margin I had applied to the body
{ margin: 30px; } could be conflicting with the browser, so I tried
placing the container inside a wrap and then applying a top margin to
wrap and an auto to the left/right margin of the container, as the
employers want the website centered on the screen.

However this didnt work and I still had the same problem.

I did find some some sort of a solution:


I happen to come across this by accident as I was reading into
overflow, however I'm not too sure if this is the result I want, I
wouldnt mind your opinion (or anyone elses for that matter).

Thanks for the quick response by the way, appreciate it

Re: fluid layout/header problem (in IE)

On Fri, 25 Aug 2006 04:42:55 -0700, ste.diamond@gmail.com wrote:

Quoted text here. Click to load it
I'm not too sure if this is the result I want, I
Quoted text here. Click to load it

One obvious problem is that the header is not a header.
Here's what a real header would look like:


An image such as you're using, without header tags, is actually more
like a logo and should not be confused with a header.

Since you've given no doc type, IE is thrown into quirks mode.  
IE does not handle CSS very well in that mode.  Look here:

http://www.webstandards.org/learn/reference/charts/doctype-switch /

Re: fluid layout/header problem (in IE)

Thanks for the input mbstevens, I've altered the /attemp2/ files and
put in a transitional xhtml doctype and also changed the header to logo
to clear up any confusion, appreciate you pointing that out, completely
forgot about quirks to be honest.


Site Timeline