How do I do this with CSS?

N

Neil Marshall

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/columns/tablelayout1.html
http://www.eightlines.com/tech/columns/tablelayout2.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?
 
E

Els

Neil said:
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/columns/tablelayout1.html
http://www.eightlines.com/tech/columns/tablelayout2.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?
Click to expand...

Fake it:
http://www.pixy.cz/blogg/clanky/css-3col-layout/
 
R

Richard

Neil said:
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?

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).
Click to expand...
Does anyone have a solution for this?
Click to expand...

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:pink;
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?
 
E

Els

A said:
Somewhere around 2/21/04 1:36 PM, Els typed wildly with reckless abandon:


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.
Click to expand...

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.
 
A

A Hess

Somewhere around 2/21/04 2:42 PM, Els typed wildly with reckless abandon:
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.
Click to expand...

Yeah, I've been playing around with it and one div at a time is just
fine. I love learning new stuff. Later, Aron
 
N

Neil Marshall

Richard said:
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:pink;
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?
Click to expand...
Where does the height resize to the size of the browser window in that
example?
 
N

Neil Marshall

Richard said:
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:pink;
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?
Click to expand...
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)
 
N

Neil Marshall

Neil said:
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/columns/tablelayout1.html
http://www.eightlines.com/tech/columns/tablelayout2.html
Click to expand...

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>
 
R

Richard

Neil said:
Richard wrote:
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)
Click to expand...


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.
 
N

Neil Marshall

Richard said:
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.
Click to expand...
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.
 
R

rf

Neil Marshall said:
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/columns/tablelayout1.html
http://www.eightlines.com/tech/columns/tablelayout2.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?
Click to expand...

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.
 
T

Toby A Inkster

Neil said:
Anyone know how to fix the opera bug at least? (I don't think the IE
bug can be fixed)
Click to expand...

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

Kevin Scholl

Els said:
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.
Click to expand...

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/
(e-mail address removed)
 
E

Els

Kevin said:
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).
Click to expand...

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.
 
N

Neil Marshall

rf said:
CSS is not about 'filling up the viewport' it is about presenting stuff on
the 'page'. Note, page != viewport.
Click to expand...
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. :)
 
L

Leif K-Brooks

Richard said:
The height and width properties are absolute minimums.
Click to expand...

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

rf

Neil Marshall said:
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. :)
Click to expand...

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

Cheers
Richard.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How do I make this craftinfsystem Work 1
How do i Do this function(dealing with arrays) 1
Uhhhhh, What can I do next? 6
How do I output a function with a parameter argument? 6
Working on mobile css menu with plenty of frustration! 2
CSS: How can I stop overflow on the y-axis? 2
What should I do Before I give up programming? 6
Sticky Header - How Do I Make It Hide/Show on Scroll? 0

Staff online

Members online

Total: 29 (members: 1, guests: 28)
Robots: 97

Forum statistics

Threads
473,770
Messages
2,569,586
Members
45,088
Latest member
JeremyMedl

Latest Threads

Top