[thelist] css question...

Fri Nov 5 10:49:31 CST 2004

Hi Jono,

Thanks for the code snippet.  Your suggestion of ensuring a width (even a
percent value) is set for the parent seems to work great.  I spent the
evening playing with this and seem to have come up with something that looks
promising.

The main trouble I was running into was that I need both fixed and
stretchable columns with nested stretchable columns.  Turns out this is a
real problem for ie if the main container does not fill the entire screen.

After much playing around I discoverd that setting the margins on the body
changes the definition of 100% width for divs, seemingly in all browsers.
So the margins can simply be restricted to the size of the fluid container.

Well, that sounds like a bit of a muddle, I know.  But if you're interested,
here's the code to illustrate what I'm talking about.  This demos a fixed
column on the left and any number of fluid, nested columns on the right.
Works in ie6, ff, op7 & ns7, which is all I've had a chance to test it in so
far, but that's a promising beginning anyhow...

<html>
<head>
<style>

body {
margin:0px;
padding:0px;
margin-left:160px;
}

#top {
position:absolute;
top:0px;
left:0px;
padding-left:10px;
}

#search {
width:100%;
height:30px;
text-align:right;
}

#left {
position:absolute;
top:30px;
left:10px;
width:150px;
z-index:1
}

#main_container {

}

#main {
float:left;
width:66%;
}

#header {

}

#right {
float:left;
width:33.9%;
}

#doubleleft {
width:50%;
float:left;
}

#doubleright {
padding-left:50%;
}

.panel {
background-color:#cccccc;
margin-top:0px;
margin-left:0px;
margin-right:10px;
margin-bottom:10px;
padding:5px;
}

</style>

</head>
<body>

<div id="top">
nav
</div>

<div id="search">search</div>

<div id="left">
 <div class="panel">
 Left Column - fixed width
 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
 </div>
</div>

<div id="header">
 <div class="panel">
 Header Column - fills rest of page
 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
 </div>
</div>

<div id="main_container">

 <div id="main">

  <div class="panel">
  Main Column - 66%
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  </div>

  <div id="doubleleft">
   <div class="panel">
   Left Column - 33%
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum.</div>
  </div>

  <div id="doubleright">
   <div class="panel">
   Center Column - 33%
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum.</div>
  </div>

 </div>

 <div id="right">
  <div class="panel">
  Right Column - 33%
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum.</div>
 </div>

</div>

</body>
</html>

----- Original Message ----- 
From: "Jono" <ox4dboy at comcast.net>
To: <thelist at lists.evolt.org>
Cc: "Travis" <travis at mediastill.com>
Sent: Friday, November 05, 2004 7:39 AM
Subject: Re: [thelist] css question...

> Travis,
>
> Try setting a percentage width for the body and html, and then your
> outer div can have a percentage set for its width, which will be based
> on the total width of its parent - html and/or body.  The inner div
> will also have a percentage width set, which will be a percentage of
> the outer div, which is a percentage of the body/html.  This is
> entirely fluid, but I have not tested this, it is just off the top of
> my head.  Looks good in FF on OS X.
>
> Try this:
>
> <html>
> <head>
> <style type="text/css">
> html, body {
> width: 99%;    /* I think that IE has issues with 100% */
> margin: 0;
> padding: 0;
> }
> #outerDiv {
> width: 40%;    /* 40% of body's 99%  */
> background: red;
> }
> #outerDiv .half {
> float: left;
> width: 50%;    /* 50% of 40% of 99% */
> background: silver;
> }
> </style>
> </head>
> <body>
> <div id="outerDiv">
> <div class="half">&nbsp;</div>
> &nbsp;</div>
> </body>
> </html>
>
>
> On Nov 4, 2004, at 4:38 PM, Travis wrote:
>
> > hi Jono,
> >
> > hey, that seems to work.  unfortunetaely the container also needs to be
> > fluid, but maybe I can work something out.  thanks.
> >
> > -travis
>

---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.784 / Virus Database: 530 - Release Date: 10/27/2004