PDA

Click to See Complete Forum and Search --> : dynamic div height

Mihaa
01-22-2007, 07:52 AM
Hi!

I have a layout problem on my page. I have a Everything Div and two Divs inside Everything Div. LeftSidePart div and TextPart div. My code looks something like this:


<div class="Everything">
<div class="LeftSidePart">
**Verticaly Stretching swf file here**
</div>
<div class="TextPart">
very long text in here
</div>
</div


layout.css:

.Everything {
border: thin black solid;
width: 800px;
float: left;/*because i have another div on the right...*/
display: inline;
}

.LeftSidePart {
border: thin red solid;
width: 20px;
height: inherit;
float: left;
}

.TextPart {
border: thin blue solid;
width: 780px;
height: auto;
}


I would like to have LeftSidePart div and TextPart div side by side, with the same height. The problem is, that i don't have a static height. Height is "defined" by the length of the text in TextPart div.

In other words: I would like to stretch LeftSidePart div as much as TextPart div is stretched by content(text) inside. So if have a few pages long text(on the right, i would like to have swf file stretched all along that text.

Any suggestions on how to solve this problem?
WebJoel
01-22-2007, 08:10 AM
I am assuming that the missing ">" in your HTML is a typo. Sounds to me like 'faux columns'(?)
"20px;" width for .LeftSidePart ?? That is as wide as a scrollbar... I do not think that IE will let you define a width less than anything that will occupy it. -IE will 'expand' it minimally, at least. Whilst Fx will merely 'overflow' maybe?

You will want to 'float:left;" your 'very long line' to make it fall 'below' the left-column.... like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
body { font-size:1.0em;}/* Assist IE rendering */
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;
font-style:normal; font-variant:normal; font-weight:normal; margin-left:16px;}/* indent all, 16px */
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}

.Everything {
border:thin black solid;
width:800px;
float: left;/*because i have another div on the right...*/
display: inline;
}

.LeftSidePart {
border:thin red solid;
width:150px;
height:inherit;
float: left;
}

.TextPart {
border:thin blue solid;
width:100%;
float:left;
height:auto;
}


</style>

<script type="text/javascript"><!--
// -->
</script>
</head>
<body>

<div class="Everything">
<div class="LeftSidePart">
**Verticaly Stretching swf file here**
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>



</div>
<div class="TextPart">
very long text in here
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>
</div>
</body>
</html>Changes that I made are in bold.
-This seems to work equally well in Fx as it does in IE, with no errors.
Mihaa
01-23-2007, 07:39 AM
WebJoel, thank you for your effort and suggestion on 'faux columns', you directied me into the right way of exploring. After some googling for 'faux columns' i realized, that i'm actually looking for Equal Height Columns with CSS :). After some testing, I completely abandoned that concept, because it just isn't working right in my case. I can get 2 columns of equal height, but my flash animation in the left one(it realy is only 20px wide), just doesn't stretch all the way to the bottom of that div.And it is an issue with column heights, because if i set div height hard coded to 2000px just for testing purposes, it works like a charm, so i am sure that embeding of that flash animation is allright.
Anyway, that flash animantion just isn't worth that much, so i abandoned it.