473,320 Members | 1,828 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Please help me understand how to do this layout

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)
Jan 18 '06 #1
6 1432
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
>> 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">
<!--
body {
font-family: Arial, sans-serif;
color: #000000;
margin: 0px;
padding: 0px;
}
div {
border: 1px solid #000000;
padding: 1em;
}

#sidebar {
position: absolute;
left: 0px;
width: 20%;
/*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)
Jan 19 '06 #3
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
>> 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
[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
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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Duel of the Fetts | last post by:
I've been working on a CSS layout for a little while and I've managed to get a page put together that looks like what I want: http://www.eng.uwaterloo.ca/~p5yu/vfx.htm (none of the links work...
13
by: riki | last post by:
hello, can somebody check my old post please and tell me if i'm right so i can change width and height of the table. the subject was SUBJECT:style="TABLE-LAYOUT:fixed;" ??? on 05.02.2004. thank...
23
by: Mark Tranchant | last post by:
A new project: http://step-by-step.org.uk/ Don't worry about the links yet, the content hasn't been written. I'm just interested in the introduction screen, which is my first attempt at an...
8
by: TAM | last post by:
Hi, I have two pages designed using CSS (without tables), http://www.ngrain.com/CSS/home1.htm designed for IE and http://www.ngrain.com/CSS/home2.htm designed for NN, Mozilla, FireFox...
3
by: Mike | last post by:
Hey guys I am pulling my hair out on this problem!!!!! Any help or ideas or comments on how to make this work I would be grateful! I have been working on this for the past 4 days and nothing I do...
51
by: Richard Hengeveld | last post by:
Hi all, I'm trying to understand how pointers for function parameters work. As I understand it, if you got a function like: void f(int *i) { *i = 0; }
23
by: Jason | last post by:
Hi, I was wondering if any could point me to an example or give me ideas on how to dynamically create a form based on a database table? So, I would have a table designed to tell my application...
1
by: David Van D | last post by:
Hi there, A few weeks until I begin my journey towards a degree in Computer Science at Canterbury University in New Zealand, Anyway the course tutors are going to be teaching us JAVA wth bluej...
0
by: magicofureyes | last post by:
Hello Guys im a just a new user and i dnt knw much abt Xml i want to upload a new template in Blogger so got some free coding but when i save this code in Blogger template it say '''' Your...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.