Having trouble making a div the correct size

**Irishjugg** · 07-22-2008, 06:59 PM

Hey,

I'm trying to set up a layout where I have 2 colored stripes (one vertical one horizontal) off to the top and left, each being 100% width and height, then, inside the corner and down to the bottom of my container div would be another section. The problems I am having is, once I get my 2 stripes placed, I want to offset my other content section(div) to put it near the corner but partially overlapping the stripes. What is happening is I cant use height: 100% since Ive done an offset therefor I overflow past the container div's size (which is set at 100%).

I know theres a good way to make a div fill to the bottom of a container div, I simpy don't know it. Ill attach the dummy index page and the layout for it.

Secondly, using 100% for the vertical stripe Im left with 10 pixel boarders on the top and bottom of my firefox window, whats the fix for that?

Code:

<html>
 <head>
  <title>
  </title>
  
  <link rel="stylesheet" type="text/css" href="layout.css" />

  <style type="text/css">
   
  </style>

 </head>
 
 <body>
  <div id="upperstripe">
  </div>

  <div id="fullcontainer">
   <div id="leftstripe">
   </div>
   <div id="contentcontainer">
    <div id="clearer"></div>
    <div id="lspacer"></div>
    <div id="content-round">
    </div>
   </div>
  </div>

 </body>
</html>

and the CSS

Code:

body {
	text-align: center;
	font-family: calibri, arial;
	background-color: #86B7BB;
}

#upperstripe {
	background-color: #FFAE5E;
	text-align: left;
 	height: 140px;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 80px;
	z-index: 3;
}

#fullcontainer {
	margin: 0 auto;
	width: 900px;
	height: 100%;
	text-align: left;
	position: relative;
	top: 0px;
	background-color: gray;
}

#leftstripe {
	background-color: #FFFF84;
	lext-align: left;
	height: 100%;
	width: 18%;
	position: absolute;
	float: left;
	z-index: 1;
}

#contentcontainer {
	//background-color: black;
	width: 92%;
	height: 100%;
	position: relative;
	//top: 120px;
	left: 8%;
	z-index: 4;
}

#clearer { 
	width: 100%;
	height: 212px;
	background-color: blue;
	float: left;
}

#lspacer {
	width: 90px;
	float: left;
	height: 1px;
	background-color: green;
	z-index: 0;
}

#content-round {
	position: relative;
	float: left;
	//margin: 0 0;
	height: 100%;
	width: 738px;
	background-color: white;
	//height: 200px;
}

Can anyone offer some help? Right now all my stuff is colored randomly so I can see what the heck is going on.

**Irishjugg** · 07-22-2008, 07:43 PM

More specifically, is there a pure CSS way for me to dynamically make sure my content container DIV fills my to and only to the bottom of the full screen div (or conversely that my centering container div stretches to the size required for all of the content)

Otherwise do I need to do ugly javascript resizing?

I know I have seen pages where container divs expand to fill the screen for as long as content continues. I just cannot figure out how that works.

**rangana** · 07-23-2008, 12:14 AM

First, never forget DTD.

Secondly, CSS' comment is /* Comment Here */ and not // (This is Javascript).

Lastly, for your problem, don't set a height on content container div and it will expand to it's desire (dependent on its content).

With the code you've shown, I might have the opportunity to give you a link to divitis-What is it and how to cure it.

With the above-mentioned notes, see how far you'll go and get back if you're still stumped.

**Irishjugg** · 07-23-2008, 12:42 AM

Thanks, I actually jumper into HTML when I was 9 (13 years ago) and have just been teaching myself CSS since it wasnt really "done" yet when I learned.
Ill look into this DTD thing since I dont know what it is.

Thanks for the help.

Thread: Having trouble making a div the correct size

Thread Tools

Search Thread

Having trouble making a div the correct size

more specifics

Bookmarks

Bookmarks

Posting Permissions