FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Managing DIVS in CSS

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


hofodomo01
Hey, I need some pointers on an issue I'm having with DIVS. I'll provide an example of what I have and what I want to get:

This is the current sample HTML file I'm using
Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel=stylesheet type="text/css" href="test.css">
<title>Untitled Document</title>
</head>

<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>

<div class="bottom_left">bottom_left</div>
<div class="bottom_center">bottom_center</div>
<div class="bottom_right">bottom_right</div>


</html>


And here is the corresponding CSS file
Code:
body {
   margin-left: 0px;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-right: 0px;
   background-color: #21726b;
}
DIV.left {
   background-color: yellow;
   width: 195px;
   height: 300px;
   position: absolute;
   left: 0px;
}
DIV.center {
   background-color: blue;
   height: 300px;
   width: 337px;
   position: absolute;
   left: 195px;
}
DIV.right {
   background-color: red;
   width: 268px;
   height: 300px;
   position: absolute;
   left: 532px;
}
DIV.bottom_left {
   background-color: green;
   width: 195px;
   height: 100%;
   position: absolute;
   left: 0px;
   top: 300px;
}
DIV.bottom_center {
   background-color: pink;
   height: 100%;
   width: 337px;
   position: absolute;
   left: 195px;
   top: 300px;
}
DIV.bottom_right {
   background-color: white;
   width: 268px;
   height: 100%;
   position: absolute;
   left: 532px;
   top: 300px;   
}


There are two things I want to accomplish: first, how do I get the "bottom_" DIV's height to extend up to my browser height? Right now, the "bottom_" DIV's height sets itself to one browser screen's height, regardless of where it is. I want the "bottom_" DIV's to be only as tall as the web browser's screen, and only extend its height when more text is entered.

Secondly, let's say I'm using the "center" DIV as my main text section. When there's more text in "center" than the size of the DIV allows, the extra text continues underneath the "bottom_center" DIV. How do I get that text to show up on top of "bottom_center"? Furthermore, if at all possible, going along with the idea in the above paragraph, I would only like the "bottom_" row of DIVs to extend based on the amount of text in the "center" DIV. Or would I have to start writing more text directly on the "bottom_center" DIV once the "center" DIV fills up?

Thanks.

(sample uploaded here)
snowboardalliance
I would start by nesting your divs.
Make a top and bottom div and work from there, post back with that code if you can't get what you're trying to achieve.

Some other tips:
Use em's instead of px, they scale better when people zoom in on your page (1 em is generally 16px with default font sizes).
Avoid setting the height of divs if you want them to extend, because they won't. Either you have a static height, or just leave it as "auto".

And just a note, 100% height will be the height of the screen, and those bottom divs are that height but since they are moved down, they are bigger than what you want.
sonam
This site you can find interesting for your needs.
http://www.quirksmode.org/css/clearing.html

If you want to streach divs with content (not with float divs) then you can define for new browser FF, IE7, etc. minimum height (min-height : 100px;). Old browsers don't recognise this command and if you need some minimum height then you need height definition, too. In that case use simple trick in your css:

Code:
#content {
width : 800px;
height : 100px; /* for IE6
min-height : 100px !important ; /* for new browsers
}


Sonam
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.