...

View Full Version : float and height



Jahren
10-19-2009, 08:04 PM
hi guys
quick question

I have a div container containing 2 divs
one on the left 60% width and the other 40% width on the right.
To achieve this I usually set float:left and float:right except this time I need the right div to have 100% height. having the div to float makes the height inline or something. How can I do this?

I cant use absolute positioning for some reasons, it pushes the div out of the containing box (which has been specified to be relative with the body)

edit:
code!


<fieldset class="redaction_global_container redaction_global_width" style="margin:25px auto 0 auto;" >
<div class='redaction_contenu'>
&nbsp;
</div>
<div class='redaction_cours_panel'>test test</div>
<div class='clear'></div>
</fieldset>


css


.redaction_global_container{position:relative; margin:10px; padding:0; background-color:white; text-align:left; font-family:Tw Cen MT,tahoma;}
.redaction_global_width{width:60%;}
.redaction_contenu{width:60%; background-color:blue; margin:5px auto 5px auto;}
.redaction_cours_panel{position:absolute; width:38%; height:100%; right:0px; background-color:#CCCCCC; text-align:left;}

VIPStephan
10-19-2009, 08:27 PM
A percent size always relates to the parent’s dimensions. Naturally elements have no definite height but the default value is “auto”, therefore a height of 100% of the child elements doesn’t have any effect. So, in order to achieve this you need to specify a height for the parent of the floated elements.

Jahren
10-19-2009, 08:38 PM
I always keep this in mind. My html/body has 100% width and height set.
But containing div has no specific height, it grows as data comes in.

I dont want to set a specific height. min-height won't work either.

VIPStephan
10-19-2009, 11:11 PM
Would faux columns (http://alistapart.com/articles/fauxcolumns/) be a solution here (along with containing floats (http://complexspiral.com/publications/containing-floats/))?

Jahren
10-20-2009, 03:11 PM
Hmmm both articles are interesting but unfortunately, they don't cover my exact problem.
I would like to know how to force the use of height:100% on a floating element

Rowsdower!
10-20-2009, 03:12 PM
There isn't any reason to float the second column, is there? Unless I'm missing something...

Jahren
10-20-2009, 04:04 PM
I tried without floating the right div but it will go left, positionned BEHIND the left box.
I tried clearing the floating before the right box, makes it go bellow the left box.


ALSO after putting back float:left on the right div, I tried setting height:500px which works. but 100% won't

I am 100% certain all the parents have width and height set. (all % but still)
this includes html, body

anythin i'm missing myself?

Jahren
10-20-2009, 04:27 PM
oh man I'm stupid.
not all parents have a specified height.....
the container div (containing the two columns) have no height.
But I don't want a height there, the content is dynamical.
what can I do ? :S

Excavator
10-20-2009, 04:30 PM
Hello Jahren,
Give this a try and see if it gets you closer to what your looking for:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
height: 100%;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 800px;
margin: 30px auto;
background: #f00;
height: 50%;
}
#left {
width: 60%;
float: left;
margin: 5px 0;
background: #00f;
}
#right {
margin: 0 0 0 60%;
background: #ccc;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="left">&nbsp;</div>
<div id="right">test test</div>
<!--end container--></div>
</body>
</html>

Excavator
10-20-2009, 04:33 PM
Or better yet, do away with the problem right box like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
height: 100%;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 800px;
margin: 30px auto;
background: #f00;
overflow: auto;
}
#left {
width: 60%;
float: left;
margin: 5px 0;
background: #00f;
}
#container p {
margin: 5px 5px 5px 60%;
}
</style>
</head>
<body>
<div id="container">
<div id="left">&nbsp;</div>
<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. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end container--></div>
</body>
</html>

Jahren
10-20-2009, 04:42 PM
Yes thats about it. with the very exception that left content is dynamic and therefore I can't set a specific height for the container :S That's a design problem xD
I can't have the container be 50%, I don't want scroll bars, I want content to extend along with the right col set at height:100%

Does that make any sense?

Excavator
10-20-2009, 05:03 PM
Does that make any sense?

I think so... check the code in my second post.

Jahren
10-20-2009, 05:12 PM
Second example doesnt make the right col to expand while the content of the left col makes the container grow in height.

man I have hell of a problem :S

Jahren
10-20-2009, 05:39 PM
here's the online version of my test page
TEST (http://www2.recitfga.qc.ca/listes/test.htm)

right col in gray should take height 100%. but it wont accept it while floating

VIPStephan
10-20-2009, 06:55 PM
Well, that would be the perfect example for faux columns, don’t you think? Apply a background image to the container that is as wide as the gray column and one pixel high, and make it repeat vertically.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum