How do I do this with CSS?

02-22-2004

Neil Marshall wrote:

> I was recently asked how to do this (exactly) with CSS and I just
> couldn't come up with an answer. Does anyone here know?
>
> http://www.eightlines.com/tech/colum...lelayout1.html
> http://www.eightlines.com/tech/colum...lelayout2.html
>

I managed to come up with something that at least works in Mozilla. It
fails in IE and opera gets it mostly right (For some reason the floated
columns don't fill 100% of the space). I'm essentially just recreating
a table using CSS though.

Anyone know how to fix the opera bug at least? (I don't think the IE
bug can be fixed)

http://www.eightlines.com/tech/columns/csslayout1.html
http://www.eightlines.com/tech/columns/csslayout2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>CSS Layout</title>
<style type="text/css">
#evWrap {
display: table;
height: 99%;
width: 100%;
border: 3px solid blue;
}

#header, #footer {
display: table-row;
}

#colWrap {
display: table-row;
border: 2px solid magenta;
}

#column1 {
border: 1px solid black;
float: left;
width: 100px;
height: 99%;
}

#column3 {
border: 1px solid black;
width: 100px;
float: right;
height: 99%;
}

#column2 {
border: 1px solid black;
margin: 0px 100px 0px 100px;
height: 99%;
}
</style>
</head>
<body>
<div id="evWrap">
<div id="header">Header</div>
<div id="colWrap">
<div id="column1">Column 1</div>
<div id="column3">Column 3</div>
<div id="column2">Column 2</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

02-22-2004

Neil Marshall wrote:

> Richard wrote:

>> Neil Marshall wrote:
>>
> >> I was recently asked how to do this (exactly) with CSS and I just
> >> couldn't come up with an answer. Does anyone here know?
>>
> >> http://www.eightlines.com/tech/colum...lelayout1.html
> >> http://www.eightlines.com/tech/colum...lelayout2.html
>>
> >> As long as the content is smaller then the browser window, the columns
> >> stretch to fill the available space and then the footer is displayed,
> >> but as soon as the content gets really long (#2) it creates a scroll
> >> bar and goes off the screen. Also all 3 columns are the same length
> >>(I haven't put backgrounds in, but assume there would be... I can't
> >>just leave all the columns different lengths).
>>
> >> Does anyone have a solution for this?
>>
>>Easy as 123!
>>"Float:left" is necessary! Do not remove it!
>>Once removed, you just have another division on top of a division.
>><style type="text/css">
>>.header { height:150px; width:99%; border:solid black; background:blue; }
>>.footer {width:auto; height:150px; background:red; border: solid black; }
>>.column { width: 33%; height:100px; border:solid white; background

ink;
>>float: left;}
>></style>
>>
>></HEAD>
>><BODY>
>><div class="header">text</div>
>><div class="column">column 1</div>
>><div class="column">column 2</div>
>><div class="column">column 3</div>
>><br style="clear:left;"> ................... <<<<<<< this says to end the
>>float
>><div class="footer">text</div>
>></BODY>
>></HTML>
>>
>>What's so difficult to understand?
>>
>>
>>
> That code doesn't do what I asked. I also want the height to fill up
> the height of the browser window when the content is less then the size
> of the browser (See example 1). When the content is longer then the
> space available I want it to scroll like a normal page (See example 2...
> it's the same code as example 1, just more content)

If you were to put in 10 pages of text in column1, column1 would
automatically extend it's height accordingly.
The height and width properties are absolute minimums.
You can also change the height so that it fills the screen size by using
height: N% Where N is a number.

Search for the web for "3collayout.html" and you'll get plenty of examples.

02-22-2004

Richard wrote:

>
>If you were to put in 10 pages of text in column1, column1 would
>automatically extend it's height accordingly.
>The height and width properties are absolute minimums.
>You can also change the height so that it fills the screen size by using
>height: N% Where N is a number.
>
>
>
But then the header and footer would also need to be a percentage. What
if I want to put a 100px tall image in there, and then have a couple
lines of text, but have the column stretch to the bottom of the browser
window. I can't do that with percentages because it will never quite be
at the bottom of the window.

02-22-2004

"Neil Marshall" <> wrote in message
news:OXOZb.17144$ ...
> I was recently asked how to do this (exactly) with CSS and I just
> couldn't come up with an answer. Does anyone here know?
>
> http://www.eightlines.com/tech/colum...lelayout1.html
> http://www.eightlines.com/tech/colum...lelayout2.html
>
> As long as the content is smaller then the browser window, the columns
> stretch to fill the available space and then the footer is displayed,
> but as soon as the content gets really long (#2) it creates a scroll bar
> and goes off the screen. Also all 3 columns are the same length (I
> haven't put backgrounds in, but assume there would be... I can't just
> leave all the columns different lengths).
>
> Does anyone have a solution for this?

This issue has been discussed at length in the CSS groups and forums. If you
want to include the 85%+ of viewers who use IE then there is no solution.
You will have to change your design.

CSS is not about 'filling up the viewport' it is about presenting stuff on
the 'page'. Note, page != viewport.

Cheers
Richard.

02-22-2004

Neil Marshall wrote:

> Anyone know how to fix the opera bug at least? (I don't think the IE
> bug can be fixed)

Stop floating the columns and use "display:table-cell;" instead?

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

02-22-2004

Els wrote:
> A Hess wrote:
>
>> Somewhere around 2/21/04 1:36 PM, Els typed wildly with reckless abandon:
>>
>>> http://www.pixy.cz/blogg/clanky/css-3col-layout/
>>>
>>>
>>
>> That's really handy, but I have a question. Why are all the divs
>> doubled up?
>>
>> example:
>> <div id="middle"><div class="column-in">
>> <h4>Middle Col</h4>
>> <p id="mccont">
>> This is content of the MIDDLE column.
>> </p>
>> </div></div>
>>
>> Just curious, Aron.
>
>
> I think he (she?) did that just to make it easier to style the paddings
> and margins on the text inside the divs.
> As a style for div.column-in he defines nothing more than margin:0;
> padding:0.5em 1em;, so I think it's just that, really.

The nested DIVs are necessary to allow all three column backgrounds to
extend the length of the longest column (regardless of the amount of
content in each).

--

*** Remove the DELETE from my address to reply ***

================================================== ====
Kevin Scholl http://www.ksscholl.com/

------------------------------------------------------
Information Architecture, Web Design and Development
------------------------------------------------------
We are the music makers, and we are the dreamers of
the dreams...
================================================== ====

02-22-2004

Kevin Scholl wrote:

> Els wrote:
>
>> A Hess wrote:
>>
>>> Somewhere around 2/21/04 1:36 PM, Els typed wildly with reckless
>>> abandon:
>>>
>>>> http://www.pixy.cz/blogg/clanky/css-3col-layout/
>>>>
>>>>
>>>
>>> That's really handy, but I have a question. Why are all the divs
>>> doubled up?
>>>
>>> example:
>>> <div id="middle"><div class="column-in">
>>> <h4>Middle Col</h4>
>>> <p id="mccont">
>>> This is content of the MIDDLE column.
>>> </p>
>>> </div></div>
>>>
>>> Just curious, Aron.
>>
>> I think he (she?) did that just to make it easier to style the
>> paddings and margins on the text inside the divs.
>> As a style for div.column-in he defines nothing more than margin:0;
>> padding:0.5em 1em;, so I think it's just that, really.
>
> The nested DIVs are necessary to allow all three column backgrounds to
> extend the length of the longest column (regardless of the amount of
> content in each).

As far as I can see and test, that only goes for nested divs
'main1' and 'main2'. All the divs 'column-in' can be taken
out, with no other effect than losing the padding and margin
styles inside the divs.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

02-23-2004

rf wrote:

>CSS is not about 'filling up the viewport' it is about presenting stuff on
>the 'page'. Note, page != viewport.
>
>
I'm being difficult here but I expect it to fit to a page when I'm
making a print stylesheet, the screen should be handled differently.

02-23-2004

Richard wrote:
> The height and width properties are absolute minimums.

What? min-width and min-height are minimums, height and width are
absolute. Where do you get your nonsense?

02-23-2004

"Neil Marshall" <> wrote in message
news:2Ab_b.2140$.. .
> rf wrote:
>
> >CSS is not about 'filling up the viewport' it is about presenting stuff
on
> >the 'page'. Note, page != viewport.
> >
> >
> I'm being difficult here but I expect it to fit to a page when I'm
> making a print stylesheet, the screen should be handled differently.

You can be as difficult as you like but IE simply does not support what you
want to do.

Cheers
Richard.