Very simple two-column layout

Forum Moderators: not2easy

Message Too Old, No Replies

Very simple two-column layout

Sorry to be the millionth person to ask

rjohara

4:14 pm on Sep 17, 2005 (gmt 0)

I've almost always avoided columns altogether, and now find myself in a position where a complex site needs them. I know there's a voluminous literature on how to make CSS columns (sigh), and I'm the last person on earth who hasn't used them yet.

If anyone can say whether the ultra simple layout below for header + fixed-right + fluid-left is robust on Wintel IE5 and 5.5 I'd be very grateful; I'm a Mac user and at the moment have very limited PC access. It works fine on all the main Mac browsers and (I believe) on Wintel IE6. The CSS is coming in via @import so very old browsers won't see it.

CSS:


div.menu { 
 width: 150px; 
 float: right; } div.content { 
 margin-right: 175px; }

HTML:


<html><body> <div class="masthead"> 
Full-width site headline 
</div> 
<div class="menu"> 
<ul>Menu items in right column...</ul> 
</div> 
<div class="content"> 
Main page content in left column... 
</div> 
</body></html>

iamlost

8:38 pm on Sep 17, 2005 (gmt 0)

Basically it works.
Tested in IE 5/5.5, FF1.x, Op7.x/8.x, NN7.x

Couple of minor things:
* depending on the look you want you might want to use * {padding: 0; margin: 0;} then explicitly set as required. If not zeroed there is not only a space all around the page but: all but NN float menu tight to bottom of masthead but leave space (varying to about 10px) between content and bottom of masthead. NN7.x also leaves that space between floated menu and masthead bottom.

* re: @import:
@import "test.css"; works for all above.
@import"test.css"; does not work for IE5.x - defaults to no styling.

rjohara

11:37 pm on Sep 17, 2005 (gmt 0)

Many thanks! I think I have it working pretty well now. (Could you check your stickymail please.)

I hadn't realized there was variation in the @import syntax. What I have been using is:

@import url("/rjo.css");

Is this form read correctly by IE5.x? (Amazingly, there seems to be something wrong with the W3C site at the moment and I can't check the specifications; w3.org is giving me a 403 error.)

jetboy

12:09 am on Sep 18, 2005 (gmt 0)

If you want a universal zero padding fix, try this instead:

body, fieldset, legend, ul, ol, th, td {
padding: 0;
}

If you use a wildcard it trashes <select>s in Firefox/Mozilla. If you check out forms.css in Firefox's /res/ directory, you can see that <option>s and <option>s descended from <optgroup>s are created using default padding. It's a lot easier to not change things than try to put the defaults back without affecting other browsers.

iamlost

1:09 am on Sep 18, 2005 (gmt 0)

@import url("/rjo.css");

Had forgotten so tested - IE 5.x seems to like it fine.

rjohara

2:36 am on Sep 18, 2005 (gmt 0)

depending on the look you want you might want to use * {padding: 0; margin: 0;} then explicitly set as required

Beginning any large design task by setting margins and padding on all elements to 0 is good advice in almost all circumstances (however you do it). Lots of minor display problems can be traced to a default (un-set) margin or padding value popping up somewhere in the cascade. This was a lesson I learned from the great Todd Fahrner, who did some beautiful early analysis with CSS 1.x as well as the background work for the overall W3C default stylesheet [w3.org].

The CSS validator always kicks out warnings if you have set a color with no background-color, and vice versa; I think it should also kick out a warning when you've set margins or padding alone, but not both.

(Still hacking away at my two-column redesign. Many thanks to iamlost and jetboy for useful links.)

RJO