Three and four column display

[Paul F. Johnson]

Hi,

I'm trying to replace a table with a three and four column display (the
material on the page uses a pile of nested tables for layout which is
just plain bad IMO - but hey, Dreamweaver can't be wrong can it ;-p)

So far, my CSS looks like this

#container {
position: relative;
width: 770px;
margin: auto;
padding: 0;
color: #000;
border: #443b2c 1px solid;
text-align: left;
}

#content {
position: relative;
}

#col-left {
position: absolute;
padding: 5px;
width: 260px;
left: -275px;
background-color: white;
}

html>body #col-left {
left: 0px;
}

#col-middle {
margin-left: 270px;
width: 240px;
padding: 5px;
background-color: white;
}

#col-right {
margin-left: 521px;
width: 250px;
background-color: #ddd;
}

(the four blocks are similar)

col-left and col-middle display happily next to each other (as so block1
and block2), but col-right (and block3) displays under (but to the
right) of col-middle. block4 repeats this, it's to the right of block3,
but under it. In other words, they look like steps!

I can't upload the page and CSS anywhere as I'm having network problems
at work, however, in ASCII art...

| col-left | col-middle |
| col-right |

and

| block 1 | block 2 |
| block 3 |
| block 4 |

Any ideas on where I'm going wrong here?

HTML looks like this

<div id="container">
<div id="header">
<img src="headerpic.jpg" alt="Some description" width="770px"
height="81px" />
</div>
<div id="content">
<div id="col-left">
// blah blah blah
</div>
<div id="col-middle">
// more blah blah
</div>
<div id="col-right">
// links n stuff
</div>
</div>
</div>

The page I'm working on and the complete stylesheet validate okay

TTFN

Paul

 

[Richard]

Hi,

I'm trying to replace a table with a three and four column display (the
material on the page uses a pile of nested tables for layout which is
just plain bad IMO - but hey, Dreamweaver can't be wrong can it ;-p)

So far, my CSS looks like this

I'm not sure where your learning your CSS methods, but one of the things you
should understand, is the proper use of POSITION.

Position tells the browser to place an item in a specified manner.
Absolute: In relation to the WINDOW of the browser.
Relative: In relation to the containing element such as another division.
Fixed: In relation to the browser window BUT stays put and other objects on
the page appear to fall under it rather than on top of it.

The second part involves where to place the item.
There are four possibilities. Top, left, right, bottom.
Two may be used, not all four.
Think of the corners of your screen and use the proper pairing.
top-left; bottom-left; top-right; bottom-right.

Proper notation would be defined as div#sample { position:absolute;
top:100px; left100px; }
This places the division 100 pixels from the top and left sides of your
browser window.

Furthermore, when defining a division, give it something to work with.
Give it dimension, and give it content.

html>body #col-left {
left: 0px; }

Totally wrong.

I'm not sure what you want done here. Neither is dreamweaver.

http://glish.com/css/7.asp

This will give you a good idea on how it's done right.

 

[Steve Pugh]

I'm not sure where your learning your CSS methods, but one of the things you
should understand, is the proper use of POSITION.

And you are not the person to tell him.

Position tells the browser to place an item in a specified manner.
Absolute: In relation to the WINDOW of the browser.

Wrong. Look up "containing block".

Relative: In relation to the containing element such as another division.
Wrong.

Fixed: In relation to the browser window

Nearly right. It's fixed wrt the viewport for screen media (including
handlheld and projection) but is fixed wrt each page for print media -
hence it will appear more than once in a printed multi-page document.

BUT stays put and other objects on
the page appear to fall under it rather than on top of it.

Depends on z-index. It can be useful to have some elements go 'over'
the fixed element and some to go 'under' it.

The second part involves where to place the item.
There are four possibilities. Top, left, right, bottom.
Two may be used, not all four.

No, all four may be used, or none, or one, or two, or three. The
effects will vary and some browsers (ie IE) have problems when left
and right are both set.

Proper notation would be defined as div#sample { position:absolute;
top:100px; left100px; }
This places the division 100 pixels from the top and left sides of your
browser window.

Or from the containing block if there is one. Remember that the
viewport is (usually) the initial containing block but there may be
others.

html>body #col-left {
left: 0px; }

Totally wrong.

Perfectly okay.

For any element with an id of col-left which is descendent of a body
element that is in turn a child of a html element set the left
property to 0.

As the position property had been set to absolute in a previous style
the left property will take effect. The html>body selector hides this
rule from IE which uses the previously set left: -275px; instead.
Standard hack to send differing values to IE and standards compliant
browsers.

I'm not sure what you want done here.

No surprise there.

Neither is dreamweaver.

Nor there.

http://glish.com/css/7.asp

This will give you a good idea on how it's done right.

It's one possible way of creating a three column layout. It's by no
means the only way and the pros and cons need to be evaluated with
respect to the particular design that the author is after.

Steve

 

[Steve Pugh]

#col-left {
position: absolute;
padding: 5px;
width: 260px;
left: -275px;
background-color: white;
}

html>body #col-left {
left: 0px;
}

#col-middle {
margin-left: 270px;
width: 240px;
padding: 5px;
background-color: white;
}

#col-right {
margin-left: 521px;
width: 250px;
background-color: #ddd;
}

col-left and col-middle display happily next to each other but
col-right displays under (but to the right) of col-middle.

You have nothing in your CSS to make col-right sit to the right of
col-middle. No floats, no positioning. So naturally col-right will sit
on the next line down.

Either position all three columns, or float them. Floating usually
gives more flexibility but does raise some issues of its own.

Steve

 

[Oli Filth]

I'm not sure where your learning your CSS methods, but one of the things you
should understand, is the proper use of POSITION.

Position tells the browser to place an item in a specified manner.
Absolute: In relation to the WINDOW of the browser.
Relative: In relation to the containing element such as another division.
Fixed: In relation to the browser window BUT stays put and other objects on
the page appear to fall under it rather than on top of it.

Oh sweet jesus, why do you *still* write this shit, Richard? Just to
bring everyone down to your level?

*Absolute*: relative to the containing block, which might be the browser
window, but then again might not.

*Relative*: relative to where it would have been in normal flow. e.g.
.foo
{
position: relative;
top: 5px;
}

moves the element 5px down from where it would've been otherwise.

*Fixed*: Different for different media. Relative to browser window
(viewport) for screen , and relative to the page for print.

The second part involves where to place the item.
There are four possibilities. Top, left, right, bottom.
Two may be used, not all four.

not true. But bizarre things may happen if you do.

Think of the corners of your screen and use the proper pairing.
top-left; bottom-left; top-right; bottom-right.

Proper notation would be defined as div#sample { position:absolute;
top:100px; left100px; }
This places the division 100 pixels from the top and left sides of your
browser window.

See above.

Furthermore, when defining a division, give it something to work with.
Give it dimension, and give it content.

html>body #col-left {
left: 0px; }

Totally wrong.

Why?


In summary, to the OP, *please* don't listen to Richard.

 

[Richard]

Mr. Pugh.

What I posted here is what I have learned from numerous websites.
If you have other proof that what I stated is wrong, please post a link to a
website or at least something to back up your claims with.

 

[Steve Pugh]

What I posted here is what I have learned from numerous websites.
If you have other proof that what I stated is wrong, please post a link to a
website or at least something to back up your claims with.

http://www.w3.org/tr/css21/

HTH

Steve

 

[Uncle Pirate]

Hi,

I'm trying to replace a table with a three and four column display (the
material on the page uses a pile of nested tables for layout which is
just plain bad IMO - but hey, Dreamweaver can't be wrong can it ;-p)

So far, my CSS looks like this

Lose the px settings (% is more friendly) and the absolute positioning.
What you are probably looking for is float. Maybe something like:

..column{margin:0;padding:0;width:25%;float:left}


<div class="column"><p>Some content</p></div>
<div class="column"><p>Some more content</p></div>
<div class="column"><p>Even more content</p></div>
<div class="column"><p>And some more content</p></div>

This, although untested, should give you four columns. You'll need to
experiment with widths, margins, and padding to make it look the way
you'd like.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein

 

[Oli Filth]

Mr. Pugh.

What I posted here is what I have learned from numerous websites.
If you have other proof that what I stated is wrong, please post a link to a
website or at least something to back up your claims with.

**** off!

 

[Duende]

While sitting in a puddle Oli Filth scribbled in the mud:

**** off!

Shouldn't that be:
<a href="http://somestuff.batcave.net/">
**** off!
</a>

 

[Oli Filth]

While sitting in a puddle Oli Filth scribbled in the mud:




Shouldn't that be:
<a href="http://somestuff.batcave.net/">
**** off!
</a>

Or:

<LINK rel="Leper colony" href="http://somestuff.batcave.net/"
type="text/not_html">