Simple (I think) 2 Col Layout with CSS

S

sandravandale

Here's what I'd like to do, have two columns #side, and #main
positioned adjacent to each other. I'd like #main to come first in the
html if possible so I don't have to scroll past #side every time I look
at the source, but I can give on this requirement. #side is 188px
always. #main should expand to use up the rest of the space. Niether
can be absolutely positioned.

That's it, should be one of the easiest things to do in css, but I
can't get it to work. Every time I find something that works in
firefox, it dies a gruesome death in <clenched teeth> good old loveable
IE</clenched teeth>. Please, someone, help me out of this rut before I
go mad.

Thanks a bundle,
-Sandra
 
B

Beauregard T. Shagnasty

Here's what I'd like to do, have two columns #side, and #main
positioned adjacent to each other. I'd like #main to come first in
the html if possible so I don't have to scroll past #side every time
I look at the source, but I can give on this requirement. #side is
188px always. #main should expand to use up the rest of the space.
Click to expand...

How about Ben's template?
<http://www.benmeadowcroft.com/webdev/csstemplates/left-column.html>

I also have sites that place the navigation sidebar after the content.
Niether can be absolutely positioned.
Click to expand...

Why not?
 
S

sandravandale

Beauregard said:
How about Ben's template?
<http://www.benmeadowcroft.com/webdev/csstemplates/left-column.html>

I also have sites that place the navigation sidebar after the content.
<http://countryrode.com/>
Click to expand...

Thanks, but both use absolute positioning. It's very easy if you do
that, but it won't work for me.
Why not?
Click to expand...

I have a footer at the bottom of the page. If either column is
absolutely positioned, then it won't push the footer down. If it is the
longest column, the footer will display over it.
 
R

richard

Thanks, but both use absolute positioning. It's very easy if you do
that, but it won't work for me.


I have a footer at the bottom of the page. If either column is
absolutely positioned, then it won't push the footer down. If it is the
longest column, the footer will display over it.
Click to expand...

What you need is a container for all with no height property.
That way, whenever what's above the footer is pushed down, so will the
footer be pushed down.

You might want to look at the designs at www.oswd.org
Check out the source code and see how they do it.
 
S

sandravandale

richard said:
What you need is a container for all with no height property.
That way, whenever what's above the footer is pushed down, so will the
footer be pushed down.
Click to expand...

Thanks, I should have mentioned that I use a container with 100% height
to force the footer to the bottom of the viewport (and a negative
margin to pop it back into view) The footer thus sticks to the bottom,
unless one of the columns is too long, in which case it sits beneath
the longest column. This complicates life.

I found one funky solution.

#main {
padding-left: 188px;
float: left;
width: 100%;
}

#side {
float: left;
width: 188px;
margin-left: -100%;
}

The idea is float the main content as far left as it will go, but pad
the content out so it leaves the first 188px free. Then make the
sidebar a float left as well, it will try to float after #main, but is
exactly the width of the viewport off from where it needs to be, hence
the negative margin. Works in IE 5+ and FF 1.5. Very strange things
happen in opera, I'm looking into it.

It's possible position: relative; left: -100% might work in place of
the negative margin, I haven't tried it yet.

-Sandra
 
S

sandravandale

Okay that was more trouble than it's worth. It turns out to be so
simple to accomplish this if you just put the sidebar first in the
markup. Oh well.

Here's the final design I'm going with. If anyone wants to try puting
#side after #main let me know how it goes for you.

-Sandra

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>I'd rather be programming</title>

<style type="text/css">
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}

#page {
min-height: 100%;
}

/* IE treats height as min-height */
* html #page {
height: 100%;
}

#main {
margin-left: 188px;
}

#inner_main {
max-width: 45em;
}

#side {
width: 188px;
float: left;
}

#clrft {
clear: both;
height: 100px;
}

#footer {
position: relative;
height: 77px;
margin-top: -77px;
}

/* Styling stuff */
#main {
background-color:#33CC00;
}
#side {
background-color:#00CCFF;
}
#footer {
background-color:#6666FF;
}
#page {
background-color:#CC6666;
}
..hidden {
display: none;
}
</style>

</head>

<body>

<div id="page">

<div id="side">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>

<div id="main">
<div id="inner_main">
<a href="#" onclick="document.getElementById('hide').className =
'hidden'; return false">Hide</a>
<a href="#" onclick="document.getElementById('hide').className = '';
return false">Show</a>

<span id="hide">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</span>
</div>
</div> <!-- /main -->
<div id="clrft"></div>
</div> <!-- /PAGE -->

<div id="footer">
Footer
</div>

</body>
</html>
 
E

Ed Seedhouse

Here's what I'd like to do, have two columns #side, and #main
positioned adjacent to each other. I'd like #main to come first in the
html if possible so I don't have to scroll past #side every time I look
at the source, but I can give on this requirement. #side is 188px
always. #main should expand to use up the rest of the space. Niether
can be absolutely positioned.

That's it, should be one of the easiest things to do in css,
Click to expand...

It is.
but I
can't get it to work. Every time I find something that works in
firefox, it dies a gruesome death in <clenched teeth> good old loveable
IE</clenched teeth>. Please, someone, help me out of this rut before I
go mad.
Click to expand...

#side gets a "float: left;" and a "width: 188px;"

# main gets no float and a "margin-left: 189px;"

That's it. For IE you might need to give either div a "display: block;"
to fix it's margin bugs.



Although for a really flexible layout it's better that the margins be in
ems than pixels.
 
D

dorayme

but I
can't get it to work. Every time I find something that works in
firefox, it dies a gruesome death in <clenched teeth> good old loveable
IE</clenched teeth>. Please, someone, help me out of this rut before I
go mad.
Click to expand...

#side gets a "float: left;" and a "width: 188px;"

# main gets no float and a "margin-left: 189px;"

That's it. For IE you might need to give either div a "display: block;"
to fix it's margin bugs.[/QUOTE]

You can give IE less margin (eg. 178px) because it adds some (3
px) in some of these float situations.
 
J

Jonathan N. Little

Toby said:
Why? Absolute positioning can be very effective if used carefully.
Click to expand...
Yep. I'd say the easiest way to meet your criteria is to define your
main constant block with a left margin wide enough to accommodate your
side menu block and absolute position the side menu to the upper left.
That way your menu markup can follow the content markup in the HTML.
 
J

Jonathan N. Little

Jonathan said:
Yep. I'd say the easiest way to meet your criteria is to define your
main constant block with a left margin wide enough to accommodate your
Click to expand...
^^^^^^^^
content (sp)
Damn I gotta proof-read!
side menu block and absolute position the side menu to the upper left.
That way your menu markup can follow the content markup in the HTML.
Click to expand...
 
R

richard

Okay that was more trouble than it's worth. It turns out to be so
simple to accomplish this if you just put the sidebar first in the
markup. Oh well.

Here's the final design I'm going with. If anyone wants to try puting
#side after #main let me know how it goes for you.
Click to expand...

Yep. You have to remember that there is a natural flow of order with
dvisions.
Say you have 3 columns. You can't put column 3 or 2 first.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with CSS Layout 24
A simple 2 contents / main text layout. 0
column layout with css - what am I missing? 3
need help with simple html problem 9
The devolution of English language and slothful c.l.p behaviors exposed! 50
FAQ update (roundup of pending requests - for comment) 6
comp.lang.c Answers to Frequently Asked Questions (FAQ List) 1
comp.lang.c Answers to Frequently Asked Questions (FAQ List) 15

Members online

Total: 30 (members: 1, guests: 29)
Robots: 328

Forum statistics

Threads
473,755
Messages
2,569,535
Members
45,007
Latest member
obedient dusk

Latest Threads

Top