3 column vertical view

Question

So i am switching over from Outlook '03 to Mail 2.0. In outlook I could have a three column vertical view of my mail. this would be great on MacBook with its widescreen. It maximizes the number of emails listed by spanning from the top to bottom of the screen and lets one read more on an email with out scrolling.

Answer 1

> rjkg.com/GS.html), but the center and right columns are
being pushed
> down in
> IE. Here's the css (navbar is left, headlines is right,
and content is
> center):
>
> #navBar{
> float: left;
> width: 20%;
> margin: 0px;
> padding: 0px;
> background-color: #ffddbb;
> border-right: 1px solid #cccccc;
> border-bottom: 1px solid #cccccc;
> }
>
> #headlines{
> float:right;
> width: 20%;
> border-left: 1px solid #cccccc;
> border-bottom: 1px solid #cccccc;
> padding-right: 10px;
> background-color: #ffddbb;
> background: #ffddbb;
> }
>
> #content{
> float: left;
> width: 499px;
> margin-top: 0px;
> margin-right: 0px;
> margin-left: 0px;
> }
>
> What do I do to make it showcorrectly in IE?
>
> Also, in Firefox, the center column isn't actually
centered between
> the two
> sidebars, but I'd like it to be. Any clues?
20% + 20% + 499px = ?
You can't mix measures like that. Try replacing 499 with 60%.
Your float
will now drop in all browsers. Why?
20% + 20% + 60% = 100%
But the borders and padding you've assigned are added to the
width,
resulting in another mathematical improbablility. The easiest
way to fix
that is the remove the padding and borders from the main
boxes and then
nest content boxes inside the main boxes. Assign your borders
and
padding to those nested elements.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"