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">
<!--
body {
font-family: Arial, sans-serif;
color: #000000;
margin: 0;
padding: 0;
}
div {
border: 1px solid #000000;
padding: 1em;
}
#sidebar {
position: absolute;
left: 0;
width: 23%;
margin: 1em;
}
#main {
position: absolute;
left: 25%;
width: auto;
margin: 1em;
}-->
</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)