Mobile Friendly Website

CSSPLAY

Doing it with style

Three cols COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

wxydesign:-
Is it possible to make the center column have a minimum width that it must hold the page to? Or conversely, can we restrict the overall width of the page to a minimum number say 800 or 1000px wide? This way the middle column can never be hidden by the right column overlapping it.
(20.07.2007, 22:14)

rvwoens:-
why is everybody forcing us to work with divs??? as you can see, this solution does not work when the divs width's are very small. Divs are *not* meant for columns, so why use them for colums? Use tables for colums. This whole thing is so easy with tables:

[table class="container"]
[tr][td colspan=3]header[/td][/tr]
[tr]
[td id="left"]xxx[/td]
[td id="center"]xxx[/td]
[td id="right"]xxx[/td]
[/tr]
[tr][td colspan=3]footer[/td][/tr]
[/table]

works in all browsers and doesn't need any css except for te stuff where css was meant for like width/color etc. No css quicksmode and no dirty tricks needed to get divs on a horizonal line. These float:left etc constructions are ugly, incompatible and useless. For instance: if you want 4 colums, this construct is useless. With tables, it just extends to how many columns you want. It seems that tables are considered not "cool" nowadays, but users just want working websites, and don't mind how "cool" the css is.
(26.10.2007, 20:36)

Stu:-
rvwoens, then by all means use your tables. I am not going to argue :)
(26.10.2007, 20:56)

Ulterior:-
It doesn't work as it should - try adding very long unwrappable line to the center and u will c what i mean. If you manage to correct the behaviour - i would be glad if you write me a little email :) leonardas.survila at gmail.com
(11.11.2007, 08:55)

Dirkjan Schele:-
Hi Stu,

Thanks for your fab css site. Tried some stuff to get deeper into css and layers.

Got some problems in IE7 with the 3col version. Rendering of content in container went wrong: left layer seemed to be the problem (lay-over the #container content)
However changed the position from relative to absolute and even IE7 renders well!

Keep it up!
(11.11.2007, 23:02)

rhey:-
This is what I'm looking for.

Thanks a lot....
(18.11.2007, 23:09)

Denise:-
I am learning CSS - just found your site - after the fact of course! I needed a header, footer, and three columns.

This is how I figured mine. What do I need so that it will work in all browsers and moniter sizes?

Center column: <div id="photolayer" style="z-index: 1; position: absolute; left: 161px; top: 275px; width: 686px;
height: 610px; background-color: #ffffff;layer-background-color:#ffffff; visibility: invisible">

My email is DBabbit at gmail.com
(05.12.2007, 02:03)

Denise:-
Limited comment size. @@(
The rest of it is Left column: <!-- Site navigation menu -->
<div id="photolayer" style="z-index: 1; position: absolute; left: 11px; top: 275px; width: 150px;
height: 610px; background-color:#66ccff; layer-background-color:#0000ff; visibility: invisible">

DBabbit at gmail.com
(05.12.2007, 02:05)

Denise:-
Right column: <div id="photolayer" style="z-index: 1; position: absolute; right: 11px; top: 275px; width: 150px;
height: 610px; background-color:#66ccff; layer-background-color: #0000ff; visibility: invisible">
<br>
Footer: <div id="photolayer" style="z-index: 1; position: absolute; left: 11px; top: 880px; width: 100%;
height: 25px; background-color:#ffcc33; layer-background-color:#ff99cc; visibility: invisible">

DBabbit at gmail.com
(05.12.2007, 02:06)

xlee:-
long unwrappable line can be solved if use display: table; display: table-row; and display: table-cell;
(05.08.2008, 23:45)

10 of 61 comments (part 2). [ « ] [ » ] [ * ]



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page