getting them streched all the way

**Med** · Jan 22, 2003 07:55

I'm trying to create a new layout using just CSS. Here you can see my attempt. If you check the site you'll see that my border div and my content div are not streched all the way down. And of course that is what i need.

So how to solve this???

I know it can be easily solved with an absolutely positioned border div. But that's not what i want. And i don't think i can use an absolutely positioned content div.

This is the CSS i used...

Thanks
][ Med

**dale_burrell** · Jan 22, 2003 08:16

Set the body height:100% and then set the relevant div's height:100%

**Med** · Jan 22, 2003 08:25

Thanks for the quick response, but that option won't work. I'm not sure why but it won't respond to % values but it does to pixel values.

Setting the intended div's to relative positioning doesn't seem to work either...

**vgarcia** · Jan 22, 2003 08:30

Why do you need 100% height, especially if your content won't be going down that far?

**Med** · Jan 22, 2003 08:47

well most important is the border div. This will contain a background image which is essential in the design.

For the content div it actually doesn't matter...

**dale_burrell** · Jan 22, 2003 09:22

Here is some code that should do the job. Basically with stict HTML and I assume XHTML to use the % height you need to set the height of the containing object. So you have to start with the body and then set every div that contains the one that you want to be full size.

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Test</title>
<link href="default.css" media="all" rel="stylesheet" type="text/css" />
<style>
body {
	margin: 0px;
	background-repeat: repeat-x;
	background-color: #CCC;
}
#contenta {
	width: 760px;
	background-repeat: repeat-x;
	background-color: #FFC;
    height: 100%;
}
#header {
	height: 102px;
	background-position: 36px 50px;
	background-repeat: no-repeat;
	background-color: #0FC;
}
#border {
	background-repeat: no-repeat;
	width: 130px;
	float: left;
	background-color: #966;
    height: 100%;
}
#contentc {
	background-color: #06F;
	float: right;
	width: 630px;
    height: 100%;
}
#subheader {
	height: 209px;
	background-color: #0FF;
}
#menu {
	height: 35px;
	background-color: #F36;
	width: 630px;
}
#content {
	background-color: #CC9;
	width: 630px;
    height: 100%;
}
#mmenu {
	background-color: #C9F;
	height: 209px;
	width: 215px;
	float: left;
}
#menuitem {
	background-color: #F6C;
	width: 215px;
	height: 174px;
}
#himage {
	float: right;
	height: 209px;
	width: 415px;
	background-color: #090;
}
#titel {
	width: 215px;
	background-color: #FC0;
	height: 35px;
}
</style>
</head>

<body onload="getLinksToBlur();" style="height:600px;">
<div id="contenta">
  <div id="header">header</div>
  <div style="height:100%;">
    <div id="border">border</div>
    <div id="contentc">
      <div id="subheader">
        <div id="mmenu">
          <div id="titel">titel</div>
          <div id="menuitem">menu item</div>
        </div>
        <div id="himage">himage</div>
      </div>
      <div id="menu">menu</div>
      <div id="content">content</div>
    </div>
  </div>
</div>
</body>
</html>

**Med** · Jan 22, 2003 09:35

Thanks but that won't work for me either. It's not possible to set a height for my document, because this will change throughout the site.

Absolute positioning seems to be the best way after all. At least the easiest...

**dale_burrell** · Jan 22, 2003 09:39

Originally posted by Med
Thanks but that won't work for me either. It's not possible to set a height for my document, because this will change throughout the site.

Well you could create different body classes for the different page layouts.

**Med** · Jan 22, 2003 10:11

... i like that idea...

**dragonfly_7456** · Jan 25, 2003 13:26

So there is no way of having a "self extending" div just like a table???

**dale_burrell** · Jan 27, 2003 04:57

Originally posted by dragonfly_7456
So there is no way of having a "self extending" div just like a table???

Why not?

**wisbin** · Jan 27, 2003 12:21

.. its all relative; child-parent, good-bad, hot-cold, tables-divs: http://www.ict-id.nl/temp/sitepoint/...rcentages.html

User Tag List

Thread: getting them streched all the way

Thread Tools

Display

getting them streched all the way

yeah, why not..?

Bookmarks

Bookmarks

Posting Permissions