2 column CSS again...

or at least a floating menu...

[SuzyUK]

Hi Nick_W et al....

I'm doing my head in, trying to put up a "temporary" page for a site that should be easy....

however I have a simple content div which houses all the content of the page (surprise surprise) above this there is a div which houses a "tabbed" menu ....no problems with 90% of the pages...however there is one section of this particular site which neccessitates a "sub menu", for this I would like to house it in the content div splitting this div aprox 25-75%...I cannot get the varying examples of
2-column CSS to work cross browser...

I have tried glish's (http://www.glish.com/css/1.asp) nested float as this would suffice...but cannot get it to work

remind me ...is there a rule about using floats nested within other divs?

or suggestions please...

Suzy

[edit] forgot to say I don't want to use absolute positiioning unless absolutely necessary [/edit]

[Nick_W]

Hi Suzy,

I can't see anything wrong with your approach. What's the trouble?

Nick

[edit_g]

You should be able to do this- post the code. :)

[SuzyUK]

New Day New View.....
Aha the trouble is I'm trying to put the content div before the "sub" menu div in my HTML, therefore the menu is floating to my footer...hmmm silly!

I'll either leave it (as it only temporary) or alternatively I'll get the bit between my teeth!

Thanks Guys
Suzy
:)

[knighty]

got a similar prob with dynamic data

its a dynamically written menu that has to come after the dynamic content.

the only way i can get around it is to position the menu DIV absolutley which screws up the border that should go around it and the content

[corny]

I have the same issue with my nested floats.

If I place the float after the content div, it floats after the content div. I have yet to figure out how to avoid it, but it would greatly improve the document's structure if it were possible to include it after the content div.

[Nick_W]

Have you tried something like this?

[pre]
<style type="text/css">
#content {
width: 80%;
padding-left: 30%;
}
#left {
float: left;
width: 20%;
}
</style>
[/pre]

I've not tested it, just in Moz but it seems to work fine for me. Is that what you are trying to acheive or have I missed your point ;)

Nick

[corny]

Using Nick_W's styles (which are very similar to my own).
The following results in the floated div (left) floating after the content div, although this ordering in HTML is the preferred structure for the document.

<div id = "content">
<p>Lorem ipsum dolor sit amet... </p>
</div>

<div id = "left">
<p>Lorem ipsum dolor sit amet... </p>
</div>

In order to get the expected behaviour--floated div floating alongside the content div, the HTML must be changed to the following order:

<div id = "left">
<p>Lorem ipsum dolor sit amet... </p>
</div>

<div id = "content">
<p>Lorem ipsum dolor sit amet... </p>
</div>

I'm guessing that is by design (W3c), but I was hoping I was missing something. SuzyUK is this the same problem that you are describing?

[Nick_W]

Easy fix there. Change the float's around....

Nick

[corny]

Yes, I know, swapping the floats works just fine. It just makes one's head hurt. It just seems illogical to float the content instead of the navigation. It's more of that thinking outside the box that Zeldman rambles about, but it hurts, oh, it hurts ;)

[corny]

I knew there was another reason I had not just swapped the floats. If the float (content) is not as long as the static piece (navigation), then the static piece will wrap around the float.

[Nick_W]

Yes. Exactly what it should do ;)
I think you would have a little luck with specifying hieght attributes on your css rules though.

Or, why not position absolutely? It's much simpler for this kind of thing (at least I find it so...)

Nick

[SuzyUK]

Yes these are all the problems I was (am) having..

I did try to swap the floats, but I wanted the content section to wrap around the navigation menu.. which if you specify a width for the content section (as per Nick's suggestion)...it won't do

I can't won't, whatever, use absolute positioning because the section I want this to be contained in is already inside a bordered div...so with the body/content div padding and margins et al...the absolute positioning does not look the same cross browser (my head hurts too! :()

anyhow I did manage it (after a fashion) my menu now floats to the left or right...but has a negative margin, which means my positioning does not have to be pixel perfect, and It looks kinda OK, that it overlaps the main content border..like it's meant...(which of course it is ;))

It will have to do for now...and it looks OK, even if I say so myself! and even works cross browser...

Suzy
:)

[corny]

The goal was to have a completely fluid layout. Using absolute positioning and/or heights was just fine if I want to look exaclty like glish/blue robot/etc. Also, by using absolute positioning, I haven't been able to find a way to make the navigation and the content the same height, which would be kinda nice, to keep the design grounded. Think ALA.

I'll tinker a bit tonight and see if I can't finalize the current design with the sidebar in a float and post a link tomorrow, I think that'd probably make things a bit more understandable.

<edit>Just saw SuzyUK's post. Um, what she said! ;) Not that my float looks right cross-platform, but it looks a heckuvalot better than the other positioning methods I've tried.</edit>

[corny]

Here is a sample site using the nested float I mentioned.
SuzyUk might recognize the banner, since she had a large amount to do with it. It doesn't line up terribly well cross-platform, but my designer and I decided we don't care anymore ;)

Here's the link:
<sorry, no personal links>

The CSS and the xhtml were valid last week, but I've done a bit of tinkering since, so I can't guarantee they still are. Also, due to the float constraint, the picture sidebar is out of context for the document. Otherwise the structure is what I was looking for and works fairly well with a screen reader.

[edited by: tedster at 7:26 pm (utc) on Nov. 20, 2002]

[corny]

I ended up using a footer div with clear:both to make sure that the sidebar float doesn't end up outside the content area. While a bit of a hack, All my sites need a footer, so it was acceptable to me.

[Harvey Segal]

I may have a similar problem.
I have a right hand navigation menu which does
not extend to the bottom of the page.

I DON'T want the content section to wrap
around the navigation section and in fact
with IE it doesn't. With Netscape it does.

I'd rather not use absolute positioning etc

The body of the page has a border around it like this

DIV.body {
border: solid thin red;
margin: 10px 5% 10px 5%;
padding: 10px 5% 10px 2%;
font: 12px Verdana, Arial, sans-serif;
background-color: white;
}

and the two sections are

#contentcenter {
width:100%;
padding: 0px 10px 0px 15px;
margin: 10px 0px 0px 0px;
}

#contentright {
width:20%;
padding: 0px 2px 20px 10px;
margin: 10px 0px 20px 10px;
float:right;
background:#f3f3da;
border-color: red;
border-style: solid;
border-width: 1px 1px 1px 1px ;
}

The Netscape problem also means that I'm unable
to have a thin dividing line down the right hand
of the content, separating the content from the
menu, as Netscape pushes it to the right of the
navigation menu.

PS. I'm new to this forum and understand that
Urls cannot be posted. If you Email me I can
send the Url.

Thanks
Harvey

[Nick_W]

Welcome to WebmasterWorld Harvey!

Some members have reported successes with declaring height: 100% on the <body> element and the div you need to extend. I've not really played with it myself so can only suggest you give it a try...

As for the wrapping of text, well there is one fairly simple way: In you content div add a 25% right padding. This should keep it from going where it's not wanted ;)

Nick

[Harvey Segal]

Hi Nick,

Unfortunately .....

1. The 25% right padding has no effect with Netscape

2. The 100% height does not work with IE and makes
Netscape really angry!

Harvey

[SmallTime]

I don't like using floats on two column layouts for that reason.

I use variations on the following for a right side nav

#bodytext { margin: 0px 238px 40px 10px;
line-height: 2em;color: #333333;
}
#rightside { position: absolute;
top: 27px;
right: 10px;
margin: 0px;
border: 1px #a4bc9a;
width: 218px; }
div.menu {
width:216px;
padding:0;
margin: 0; }

and then
html head, body,
<div id="bodytext"> main content here</div>
<div id="rightside">image
<div class="menu">menu stuff</div>
</div>
close body,html

This is fluid for the main content, works for all reasonably modern browsers, degrades ok for non css browsers, I add a @import for netscape 4 that ditches the position right for:
#rightside { position: absolute;
top: 27px;
left: 75%;
margin: 0px;
border: 1px #a4bc9a;
width: 218px;
which is less precise, but works for a range of screen sizes that I guess to be common for nn4. (not as wide a range as the modern version)