Please help me understand how to do this layout

Alan Silver

Hello,

I'm just taking my first steps at doing layout with CSS, and I'm having
a few problems. This could be because I don't really understand what I'm
doing yet!! I would really appreciate any help, explanations, etc that
you experts can offer.

I would like to do a simple two-column layout where the left hand column
is about 20% of the window width and the rest is taken up by the other
column (which would hold the main page content). I was looking at
http://www.meyerweb.com/eric/css/edge/ and trying to see how he did it.
I saved the HTML and CSS for that page, then tried to build it up piece
by piece, so I could work out what was happening.

The problem I have is that I can't get the layout to work in both IE and
Firefox. I know that IE doesn't handle CSS as well as FF, but it's still
the major player in the web, so I have to make sites that work in it ;-(

I'm using IE6 and FF1.0.7 (I have the latest version on another machine
and it looks the same).

My code is shown below. If you load this up in IE, you see that the left
column looks fine, and the right column is neatly spaced a small
distance away from it. The problem is that the right column extends past
the width of the browser window (unless the window is maximised on a
large monitor), causing a horizontal scrollbar to appear.

If you look at it in FF, the width is fine, but the two columns overlap
each other in the middle.

The problem seems partly connected to the margin:1em rule for the two
divs. If you remove this, the widths are fine, but the columns still
overlap in FF. It looks fine in IE.

So, can anyone explain how I should do this? I apologise if this is a
stupid question, but I'm trying to learn how to do this, and I'm
somewhat stuck.

TIA

Here is the full page (CSS put inline to make it easier to test),
complete with some waffle to fill out the columns...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My test</title>
<style type="text/css">

</style>
</head>
<body>
<div id="main">
<p>Here we go with a whole load of stuff and nonsense about nothing at
all except that I need to have some text here to test what happens when
there is text on the page of text that otherwise wouldn't have any text
on it.</p>
</div>

<div id="sidebar">
<p>Here is the sidebar stuff that should be narrower</p>
</div>
</body>
</html>
--
Alan Silver
(anything added below this line is nothing to do with me)

Jan 18 '06 #1

Follow Post Reply

1378

Gus Richter

Alan Silver wrote:

If you look at it in FF, the width is fine, but the two columns overlap
each other in the middle.

The problem seems partly connected to the margin:1em rule for the two
divs. If you remove this, the widths are fine, but the columns still
overlap in FF. It looks fine in IE.
Not margin related at all. See below.
So, can anyone explain how I should do this? I apologise if this is a
stupid question, but I'm trying to learn how to do this, and I'm
somewhat stuck.

Apply this Doctype and IE 6 will look the same as Fx:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

With the Doctype you were using, IE will render in the Quirky Mode (the
old defective IE 5.5 way).
Everything newly created should use the Strict Doctype (Standards Mode).

Standards Mode (Fx and IE6 with Strict Doctype)
Box width = border+padding+width+padding+border
(Sidebar Box width= 1px + 1em + 23% + 1em + 1px)
(Main Box width= 1px + 1em + (viewport-25%) + 1em + 1px)

Quirky Mode (IE 5.5 and IE 6 w/o Strict Doctype)
Box width = width-border-padding-padding-border
(Sidebar Box width= 23% - 1px - 1em - 1em - 1px)
(Main Box width= (viewport-25%) - 1px - 1em - 1em - 1px)

--
Gus

Jan 18 '06 #2

Alan Silver

>> If you look at it in FF, the width is fine, but the two columns

overlap
each other in the middle.
The problem seems partly connected to the margin:1em rule for the
two
divs. If you remove this, the widths are fine, but the columns still
overlap in FF. It looks fine in IE.

Not margin related at all. See below.
So, can anyone explain how I should do this? I apologise if this is a
stupid question, but I'm trying to learn how to do this, and I'm
somewhat stuck.

Apply this Doctype and IE 6 will look the same as Fx:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

With the Doctype you were using, IE will render in the Quirky Mode (the
old defective IE 5.5 way).
Everything newly created should use the Strict Doctype (Standards Mode).

Thanks for the reply, but it didn't make any difference.

I removed the margin on both divs (with the new doctype), and the widths
were fine, except the boxes overlapped in the middle. Reducing the width
of the sidebar fixed that.

So, it seems that it is margin-related after all. If you try the new
code (shown below), you will see that it looks how you would expect. If
you uncomment the two margin lines, then FF shows it fine, but IE makes
it wider than the window, resulting in horizontal scrolbars. This is the
same if you change the margin value to anything, not just 1em.

Any other ideas? Thanks for the reply. Here is the code...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My test</title>
<style type="text/css">

</style>
</head>
<body>
<div id="main">
<p>Here we go with a whole load of stuff and nonsense about nothing at
all except that I need to have some text here to test what happens when
there is text on the page of text that otherwise wouldn't have any text
on it.</p>
</div>

<div id="sidebar">
<p>Here is the sidebar stuff that should be narrower</p>
</div>
</body>
</html>
--
Alan Silver
(anything added below this line is nothing to do with me)

Jan 19 '06 #3

Gus Richter

Alan Silver wrote:

Thanks for the reply, but it didn't make any difference.
The difference that it made is that Fx and IE will render the same with
the proper Doctype Declaration.
I removed the margin on both divs (with the new doctype), and the widths
were fine, except the boxes overlapped in the middle. Reducing the width
of the sidebar fixed that.
Yes, the conclusion is to change the width values to prevent the overlap.
So, it seems that it is margin-related after all. If you try the new
code (shown below), you will see that it looks how you would expect. If
you uncomment the two margin lines, then FF shows it fine, but IE makes
it wider than the window, resulting in horizontal scrolbars. This is the
same if you change the margin value to anything, not just 1em.
Here you are encountering an IE bug.
Any other ideas? Thanks for the reply. Here is the code...

To begin with, you are trying to emulate Eric Meyer's page which IE has
troubles with, so why do you expect it to work properly in your version?
Either don't apply a margin, or check out different methods here:
<http://css-discuss.incutio.com/?page=FrontPage>

--
Gus

Jan 19 '06 #4

Alan Silver

>> Thanks for the reply, but it didn't make any difference.

The difference that it made is that Fx and IE will render the same with
the proper Doctype Declaration.
OK, I guess what I meant was that the problem I was seeing was still
there ;-)

<snip>
So, it seems that it is margin-related after all. If you try the new
code (shown below), you will see that it looks how you would expect.
If you uncomment the two margin lines, then FF shows it fine, but IE
makes it wider than the window, resulting in horizontal scrolbars.
This is the same if you change the margin value to anything, not just 1em.

Here you are encountering an IE bug.

Not the first, and I guess not the last ;-(

Any other ideas? Thanks for the reply. Here is the code...

To begin with, you are trying to emulate Eric Meyer's page which IE has
troubles with, so why do you expect it to work properly in your
version?

Erm, good point. I did think it strange that someone who is famous for
his knowledge of CSS had a page that didn't fit the browser window in
IE!! I was just playing around trying to get the hang of these layouts.
Either don't apply a margin, or check out different methods here:
<http://css-discuss.incutio.com/?page=FrontPage>

Thanks, looks like there's some good stuff there. I'll take a look.

--
Alan Silver
(anything added below this line is nothing to do with me)

Jan 19 '06 #5

Darin McGrew

[attributions restored]

Gus Richter <gu********@netscape.net> wrote:

To begin with, you are trying to emulate Eric Meyer's page which IE has
troubles with, so why do you expect it to work properly in your
version?

Alan Silver <al*********@nospam.thanx.invalid> wrote: Erm, good point. I did think it strange that someone who is famous for
his knowledge of CSS had a page that didn't fit the browser window in
IE!! I was just playing around trying to get the hang of these layouts.

Reread what Eric says in the welcome page for css/edge. Here's an excerpt
that says it well:

css/edge is intended, first and foremost, to be as relentlessly
creative with CSS as we have been practical all these years. It
does not exist to present or explain safe cross-browser techniques;
in fact, almost the opposite. The goal here is to find ways to make
CSS live up to its fullest potential, with only minimal regard to
browser limitations.

When there's a reasonably clean workaround for MSIE, he includes it. But
not all css/edge examples can be made to work in MSIE.
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"If you aren't part of the solution, then you are part of the precipitate."

Jan 19 '06 #6

Alan Silver

Thanks for the clarification. I guess it wasn't a wise choice for a
beginner to analyse!!

[attributions restored]

Gus Richter <gu********@netscape.net> wrote:
To begin with, you are trying to emulate Eric Meyer's page which IE has
troubles with, so why do you expect it to work properly in your
version?

Alan Silver <al*********@nospam.thanx.invalid> wrote:
Erm, good point. I did think it strange that someone who is famous for
his knowledge of CSS had a page that didn't fit the browser window in
IE!! I was just playing around trying to get the hang of these layouts.

Reread what Eric says in the welcome page for css/edge. Here's an excerpt
that says it well:

css/edge is intended, first and foremost, to be as relentlessly
creative with CSS as we have been practical all these years. It
does not exist to present or explain safe cross-browser techniques;
in fact, almost the opposite. The goal here is to find ways to make
CSS live up to its fullest potential, with only minimal regard to
browser limitations.

When there's a reasonably clean workaround for MSIE, he includes it. But
not all css/edge examples can be made to work in MSIE.

--
Alan Silver
(anything added below this line is nothing to do with me)

Jan 19 '06 #7

Please help me understand how to do this layout

This discussion thread is closed

Similar topics