Left-hand menu in CSS

[Kim André Akerø]

I'm in the process of making my first table-free website, but I've run into
a problem with the CSS. To be more specific, it has to do with the use of
floating <div>s and other content.

Take a look at this page (I've used this page as an example due to the
amount of text I've already written for it):
http://www.drittmaskin.com/personvern.php

Once the text in the contents area passes the left-hand floating menu, it
jumps to the far left, making the page look broken up and all bad.

As you can see by the source code, the text itself is contained within a
<div> with the id named "contents".

Any bright ideas how to make the contents line up perfectly on the left-hand
side? Don't worry about blank space below the left-hand menu, as I'll be
adding more to that menu later (username listings, latest articles, etc.)

 

[Beauregard T. Shagnasty]

Quoth the raven Kim André Akerø:

I'm in the process of making my first table-free website, but I've run into
a problem with the CSS. To be more specific, it has to do with the use of
floating <div>s and other content.

Perhaps this template I made for a friend will help. The colors and
borders were for illustration.
http://home.rochester.rr.com/bshagnasty/twocolumn.html

Lots of other good templates available here as well.
http://nemesis1.f2o.org/templates.php

 

[rf]

I'm in the process of making my first table-free website, but I've run into
a problem with the CSS. To be more specific, it has to do with the use of
floating <div>s and other content.

Take a look at this page (I've used this page as an example due to the
amount of text I've already written for it):
http://www.drittmaskin.com/personvern.php

Once the text in the contents area passes the left-hand floating menu, it
jumps to the far left, making the page look broken up and all bad.

As you can see by the source code, the text itself is contained within a
<div> with the id named "contents".

Don't even need to look. Add margin-left: whatever to your #contents rule,
where whatever is the width of the nav bar div.

Cheers
Richard.

 

[Kim André Akerø]

Quoth the raven Kim André Akerø:


Perhaps this template I made for a friend will help. The colors and
borders were for illustration.
http://home.rochester.rr.com/bshagnasty/twocolumn.html

I've tried the "float: right" approach, but it just ends up looking like
crap. I don't even know what to do with the width, since the left menu is
100-110pt wide while the contents is supposed to fill the rest of the
browser width (no matter what screen resolution you have). Meaning, the
<div> with the id "contents" can't have the width parameter set (neither pt,
em or % will help in this case).

 

[Kim André Akerø]

Don't even need to look. Add margin-left: whatever to your #contents rule,
where whatever is the width of the nav bar div.

The CSS now contains this line:
#contents { display: block; margin-left: 130pt; }

It still isn't quite right. Click the link above again, it should reflect
the changes I just did.

The text starting below the area of the left menu is about 2-3pt to the left
of the above text (in my browser starting with the text "Dine
kontoopplysninger vil bli holdt skjult...").

Now what?

 

[Kathy]

Perhaps this template I made for a friend will help. The colors and
borders were for illustration.
http://home.rochester.rr.com/bshagnasty/twocolumn.html

Any workaround for what happens when the window width is narrowed to 700
pixels or less in IE?

http://home.midsouth.rr.com/notmychild/screenshots/twocolumn1.gif
http://home.midsouth.rr.com/notmychild/screenshots/twocolumn2.gif

- Kathy

 

[Whitecrest]

Any workaround for what happens when the window width is narrowed to 700
pixels or less in IE?
http://home.midsouth.rr.com/notmychild/screenshots/twocolumn1.gif
http://home.midsouth.rr.com/notmychild/screenshots/twocolumn2.gif

Nope, fluid (in the minds of many) seems to mean that it just falls
apart at a smaller width than non fluid. I personally see no difference
in having it fall apart at 500px, 700px, 800px, or what ever width.

It should be called "kinda-fluid" design, or "fluid for a while" design
(it also falls apart in mozilla)

 

[Beauregard T. Shagnasty]

Quoth the raven Kathy:

Any workaround for what happens when the window width is narrowed to 700
pixels or less in IE?

Nope, can't say as I do. Works fine until text size gets quite large.
Maybe I'll have a look at it sometime later.