Re: Simple Question (2 column layout)

"Alfred" <omyek (AT) yahoo (DOT) com> wrote...

The problem with my CSS is that if the main content's height is less
than the side content's height, the side content will wrap underneath
the main content instead of staying within the 25% bounds.

-me

------ code
#main
{
float: left;
width: 75%;
}

#side
{
}

Stylesheet:

#main {
width: 75%;
}

#side {
float: right;
width: 25%;
}

html:

<div id="side">
content
</div>

<div id="main">
content
</div>

Putting the #side div first, which is floated to the right, will allow
the main content to flow around it. The #side content will not flow
outside of it's declared width.

Regards,
Jim

"Jim Roberts" wrote...

Stylesheet:

#main {
width: 75%;
}

[snip]

correction:

Either remove width: 75% from #main or add float: left;. Without this
modification, it did not work correctly in IE, although it seemed fine
in Mozilla.

#main {
width: 75%;
float: left;
}

or

#main {
/* other declarations */
}

Jim

Thanks for your suggestions Jim. For some reason, only one of your
suggestions worked. (the one below. using IE6/Win in Standard mode) But
it worked, nonetheless. And with CSS, it almost seems best not to ask why.


#main
{
float: left;
width: 75%;
}

#side
{
float: right;
width: 25%;
}