Layout with 3 colums (2 sidebars + content): how to?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Larry - 25 Mar 2008 05:05 GMT

Hello!

I'm currently trying to make my very first stylesheet (aspirin needed)
and I'm, of course, facing some problems.

I"ve found many sites offering layout tutorial for 3 colums websites,
very interesting ones. Problem is: the 3 colums are side by side
(normal) but I want 2 sidebars on the right + main content on the
left.

site should look like this (Header, Sidebar1, Sidebar2, Content,
Footer)

---------------
H
---------------
S1|
|
---- C
S2|
|
---- ---------
F
--------------

So far, code looks like this (notes: I haven't included footer yet and
I use temporary vivid colors for ease of building purpose only, I'll
switch to normal colors later)

body
{
    margin: 10px 0 ;
    padding: 0 ;
    text-align: center ;
    font-size:62.5% ;
    font: "Trebuchet MS", helvetica, sans-serif ;
    background: #000 url(xxxxx/back.jpg) repeat-x;
}

div#container
{
    width: 770px ;
    margin: 0 auto ;
    text-align: left ;
    border: 2px solid #fff;
    background: #00f ;
}

div#header
{
    height: 100px;
    background: url(file://xxxxx/header.jpg) no-repeat center ;
}

div#sidebar
{
    background-color: rgba(204,204,204);
    width: 130px;
    height: 150px;
    margin-top: 25px;
    margin-left: 10px;
}

div#sidebar2
{
    background-color: rgba(204,204,204);
    width: 130px;
    height: 150px;
    margin-top: 25px;
    margin-left: 10px;
}

div#content
{
    background-color: rgba(204,204,204);
    width: 610px;
    margin-top: 25px;
    margin-left: 150px;
    border: 2px solid #000;
}

pre
{
    overflow: auto ;
}

Main problem: content should start on the same line as sidebar1, but
here it is displayed after sidebar2 (margins are ok though).

How can I correct this problem?

Thanks for your help
Larry

Reply to this Message

David Stone - 25 Mar 2008 13:25 GMT

In article
<19e106f2-6e68-4d83-91d4-de09b17dc194@c19g2000prf.googlegroups.com>,

> Hello!
>
[quoted text clipped - 8 lines]
> site should look like this (Header, Sidebar1, Sidebar2, Content,
> Footer)

Wrap the two side bars in their own container, and treat
that container plus the content as a simple two-column
layout.

I've snipped all your css (better to post a url to a test page),
but you might want to consider dropping the height specifications.
I'd also specify the width of your side bars in em units, rather
than px, so they scale with the user's preferred font sizes.

Reply to this Message

Larry - 26 Mar 2008 00:33 GMT

Hi David,

Thanks for your answer

> Wrap the two side bars in their own container, and treat
> that container plus the content as a simple two-column
> layout.

err...how to? I'm really an absolute beginner and many simple things
cause me great trouble. I've been able to wrap everything into the
main container but my attempts to "sub wrap" have failed. Something to
do with the positions of the { } maybe. I'll check again my tutorials
and see if I find info on that.

Other idea I had: maybe I could specify a relative position for all
elements (vertical and left for sidebars, vertical and right for main
content)? In that case I should probably keep the height
specification. But would it pose problem for scalability?

> I've snipped all your css (better to post a url to a test page),

That's originally what I wanted to do but so far I test on local. Have
to buy hosting later so only choice would have been to put the page on
a free hosting account, and it displays commercial. That's why I've
prefered that way. Sorry.

> but you might want to consider dropping the height specifications.

height specification is a temporary stuff I use for testing purpose. I
don't know if I'll keep it or not. sidebar1 one will contain a sub-
menu, might be interesting not to use a fixed height. sidebar2 will
probably contain some ad stuff or a flash mp3 player.

> I'd also specify the width of your side bars in em units, rather
> than px, so they scale with the user's preferred font sizes.

I planned to change all px into em after I finish main design. For the
moment I'm still a bit confused with em. I've found a java app online
allowing to convert px to em. Can't say if result's accurate though...

Thanks for your help
Larry

Reply to this Message

David Stone - 26 Mar 2008 13:24 GMT

In article
<17bd998e-28bf-460b-aeac-3ec59218475d@i29g2000prf.googlegroups.com>,

> Hi David,
>
[quoted text clipped - 8 lines]
> main container but my attempts to "sub wrap" have failed. Something to
> do with the positions of the { } maybe. I'll check again my tutorials

^^^
???

> and see if I find info on that.

I think you're confusing the intention. Wrapping content items
together means placing them inside a common div within the html,
not trying to nest rules in CSS.

It's not quite what you want, but you can see how this might
work here:
http://www.chem.utoronto.ca/~dstone/twocol/equal3.html

You'll notice that successive two-column blocks are wrapped
in their own containing div to keep each one separate.
In principle, there's no reason you can't do something similar
with vertical content.

You don't want to overdo div's in the html, but when content
is logically grouped together, an enclosing div makes sense.

Reply to this Message

Larry - 26 Mar 2008 14:58 GMT

> I think you're confusing the intention. Wrapping content items
> together means placing them inside a common div within the html,
> not trying to nest rules in CSS.

yep, I'm still pretty lost with some of the CSS terminology.

> It's not quite what you want, but you can see how this might
> work here:
> http://www.chem.utoronto.ca/~dstone/twocol/equal3.html

Well, I worked on the style sheet this afternoon and so far result is
like this (found back some old free account I didn't use for ages)

http://laurent.courtin1.free.fr/test/index.html

not exactly what I was thinking about but at least it's working.

Now I have to find how to have rounded corners on my borders. What
would you advise me use: gifs method or krazy korners css methods?

Larry

Reply to this Message

Jeff - 26 Mar 2008 17:23 GMT

>> I think you're confusing the intention. Wrapping content items
>> together means placing them inside a common div within the html,
[quoted text clipped - 15 lines]
> Now I have to find how to have rounded corners on my borders. What
> would you advise me use: gifs method or krazy korners css methods?

I'm not sure what you mean by either of those. You are pretty much going
to have to use GIFs or PNGs, unless you want a javascript or moz only
solution.

What seems most elegant is to use background images. These have the
advantage of not getting in the way of the content, and being
positionable to whatever corner you wish, something damn hard to do
otherwise.

What make the most sense if you have variable width containers is to
have what is called "sliding doors". Essentially you have two divs and
one slides under the other as the width of the container is decreased.

I'm working out standardizing (for myself) techniques of stroked,
filled, and gradient with some kind of flourishes. I may post something
interactive in a day or two...

Jeff

> Larry

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / March 2008

Layout with 3 colums (2 sidebars + content): how to?