Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   How do I do this with CSS? (http://www.velocityreviews.com/forums/t157249-how-do-i-do-this-with-css.html)

Neil Marshall 02-21-2004 08:09 PM

How do I do this with CSS?
 
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?

Els 02-21-2004 09:36 PM

Re: How do I do this with CSS?
 
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?


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


--
Els

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


Richard 02-21-2004 09:45 PM

Re: How do I do this with CSS?
 
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: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?




A Hess 02-21-2004 10:02 PM

Re: How do I do this with CSS?
 
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.

--
Time is the best teacher; unfortunately, it kills all its students.

Els 02-21-2004 10:42 PM

Re: How do I do this with CSS?
 
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.

--
Els

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


A Hess 02-21-2004 10:56 PM

Re: How do I do this with CSS?
 
Somewhere around 2/21/04 2:42 PM, Els typed wildly with reckless abandon:

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


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

--
Hard work never killed anyone, but why give it a chance?

Neil Marshall 02-21-2004 11:26 PM

Re: How do I do this with CSS?
 
Els 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?

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

It's not the same. The height doesn't resize to fit the browser window.

Neil Marshall 02-22-2004 12:30 AM

Re: How do I do this with CSS?
 
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: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?
>
>
>
>
>

Where does the height resize to the size of the browser window in that
example?

Neil Marshall 02-22-2004 12:31 AM

Re: How do I do this with CSS?
 
Els 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?

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

The height on that doesn't resize to the bottom of the browser window
when the content is smaller then the space available.

Neil Marshall 02-22-2004 12:34 AM

Re: How do I do this with CSS?
 
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: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?
>
>
>

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)


All times are GMT. The time now is 10:32 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.