Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How do I do this with CSS?

Reply
Thread Tools

How do I do this with CSS?

 
 
Neil Marshall
Guest
Posts: n/a
 
      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>
 
Reply With Quote
 
 
 
 
Richard
Guest
Posts: n/a
 
      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; backgroundink;
>>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.


 
Reply With Quote
 
 
 
 
Neil Marshall
Guest
Posts: n/a
 
      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.
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      02-22-2004

"Neil Marshall" <(E-Mail Removed)> wrote in message
news:OXOZb.17144$(E-Mail Removed) ...
> 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.



 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      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

 
Reply With Quote
 
Kevin Scholl
Guest
Posts: n/a
 
      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/
http://www.velocityreviews.com/forums/(E-Mail Removed)
------------------------------------------------------
Information Architecture, Web Design and Development
------------------------------------------------------
We are the music makers, and we are the dreamers of
the dreams...
================================================== ====
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      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.

 
Reply With Quote
 
Neil Marshall
Guest
Posts: n/a
 
      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.

 
Reply With Quote
 
Leif K-Brooks
Guest
Posts: n/a
 
      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?
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      02-23-2004

"Neil Marshall" <(E-Mail Removed)> wrote in message
news:2Ab_b.2140$(E-Mail Removed).. .
> 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.



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off




Advertisments