View Full Version : Layout Skeleton Needed To Solve Problem

03-19-2005, 12:50 AM
Hi there. I have been trying to figure out how to position CSS elements for a layout I want to create, but I can't seem to manage it.
This is what I am aiming for:


If possible, I want to only be using CSS1 for this and have a cross-browser solution.

It seems that if I fix the text area width, then I get lots of empty space around it when viewed at higher resolutions. However, when I try to avoid fixing a width for the text area, the text area jumps down to below the DIV image when the window gets too small. I want to keep that text area in the upper right, but not let it get smaller than say, 300px -- if the window gets too small, I just want the text to bleed off the right of the screen and require a scrollbar to see it.

Can someone show me an outline of how elements should be nested for this effect and the relevant position, width, and float properties I should use.

Thank you.

03-19-2005, 03:26 AM
I really shouldn't do this as doing it on your own will help more but,

try this (http://home.earthlink.net/~harbingerofthevoid/testing/labiere.html)

the paddings are set specific to the size of the pic you had in the gif file.

IE doesn't support min-width so the expression was used.

If you notice #top has height: 1px and #top[id] has height: auto Mozilla liked the auto but IE demanded a set height. 1px worked as well as anything else.

only tested on FF/MOZ and IE6

03-19-2005, 03:43 AM
In Opera, the img div and the content div touch. Just to let you know.

03-20-2005, 04:43 PM
In Firefox it's messed up :S, any ideas how to fix?

03-20-2005, 05:14 PM
what firefox are u using? its fine for me, and it looks the same in opera to

03-20-2005, 05:36 PM
Strange, version 1.0. In IE, it's nicely centered etc - in FF it goes off edge of the page.

Here's an example (where I used the same kind of design (it will be changed)) - notice the difference in IE and FF?


03-20-2005, 06:49 PM

Yours looks the same almost in FF 1.0 and IE6 to me. The only difference is the white box margins. They stickout more in IE. Everything is centered fine.

have you cleared your cache?

03-20-2005, 07:27 PM
Yup, this is how it looks for me -

Internet Explorer (http://mysite.wanadoo-members.co.uk/downfallband/sssie.JPG)

Firefox (http://mysite.wanadoo-members.co.uk/downfallband/sssff.JPG)

03-21-2005, 08:52 PM
Bump - anyone got any ideas?

03-22-2005, 01:47 AM
Okay I just copied all your source and checked it. Looks fine to. One question:

Are you running 800x600 screen resolution?

If so you need to change min-width line of the #container.

I'll use my original source as it's easier:

#container {
position: relative;
margin: 50px auto;
text-align: left;
min-width: 820px;
width: 80%;
width: expression(document.body.clientWidth < 800? "750px": "80%" );
color: #000;
background: #FF923F;
border: 2px solid #000;

This sets FF/MOZ/etc.. to stop collapsing the page at 820px. If you are running 800x600 resolution this needs to probally be 750px to mimic IE.


What did you output the code with? Some kind of page builder?

you have:

unknown {
height: auto;

to make your logo box to work like in IE you need to change that to:

#top[id] {
height: auto;
top: -32px;

the [id] is selector that IE will not recognize. If you used something like frontpage or whatever, odds are it doesn't recognize it either.

same thing where you have:

padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px

it needs to be:

* {
padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px

BUT since you adjusted everything already and the "*" had no effect, ERASE that line from your code. If you add the * to it it will all go wacky on you. No need to use it and have to readjust everything again ;)

03-22-2005, 11:15 AM
Ah ok thanks, yes I'm running at 800*600.

I used some of the source from the design above, so the 'unknown' probably got in because of that.

I'll have a play around! :)

EDIT : Yup, cheers, all sorted now.

Hmm, one thing - how comes my pages do not validate for html ? Some errors I know why there are and can fix, but I don't get -

'end tag for element "HEAD" which is not open'
'document type does not allow element "BODY" here'


Any help on that would be appreciated!

Also, what does 'You are encouraged to offer a generic family as a last alternative' mean when validating css?

03-22-2005, 12:11 PM
your self closing your link tag XHTML style in a doc defined as html 4.01

instead of

<link rel="stylesheet" type="text/css" href="stylesheet.css" />


<link rel="stylesheet" type="text/css" href="stylesheet.css">

read the validation results.... this was there...

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).