Div Alignment Nightmare - Expanding Divs

[PizzaEater]

OK - after hours and hours of google searching, forum searching, talking with my
designer friend, and tinkering with my CSS, I have to ask these questions
because nothing works!

I have a simple layout. A container div and inside of it 4 wrapper divs floated
left. Here's the code:

<div id="wrapper">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>

<style type="text/css">
#wrapper{
padding-left:5px;
width:100%;
height:100%;
}

#wrapper div{
float:left;
}

#div1{
padding-right:5px;
}

#div2
{
width:16px;
height:100%;
padding-right:10px;
}

#div3{
padding-right:5px;
}
</style>


As you can see, there's nothing fancy about this code. The inner divs all have
varying height. When I check the rendered clientHeight, here's what IE gives me:
div1 607px
div2 809px
div3 469px
div4 645px

The way my page works, the user can interact with the page and adjust the height
& width of div3. I'm also using strict HTML in my doctype.


Here are my problems:

1) div2 needs to be the height of the screen plus any height the user may have
added to div3. I'm currently using javascript to get the height of the screen
with document.documentElement.clientHeight (in IE). This works fine until the
user increases the height of div3 more than the screen. So if the screen is
809px in height and the user increases div3 to 1278px, the javascript code only
gets 809px. I would like to use CSS to get expand div2 to the screen height or
the div3 height, whichever is more.

2) When the user increases the width of div3, larger values are pushing div4
below div1, div2 & div3. Instead of pushing div4 to the right, like I want it
to, it's being forced down. I've found that when I increase the width of the
wrapper div, this allows div4 to move to the right as it should when div3's
width is increased. I want to adjust the CSS so that div4 will not be pushed
down and will slide over to the right as needed dynamically.

3) Lastly, my mouse cursor is disappearing when I move it over the wrapper. Has
anyone ever encountered anything like that??

[Medyman]

I don't understand how these are CSS related problems. CSS, once rendered, cannot dynamically change the height/width of an element. This all has to be done with CSS manipulations via javascript.

It sounds like you know what values to make it in CSS, you just need to figure out how to do it in javascript, right?

I don't know enough javascript (yet) to help you out here. But I just wanted to frame the problem so maybe someone else can help you out.


Moderators, please move this down to the JS forum.

[PizzaEater]

Surely this can be done in CSS. I'm only using JavaScript as a last resort and to modify the width of div3. At this point, I'm using a combination of javascript and c# to position these divs absolutely. This works, but I'd really like to have CSS move these divs relatively instead of having to rely on scripting and code-behind hacks. I'll be the first one to admit that I don't like my current solution nor is it even one of the better solutions possible. I'm not a designer and styling is kind of my bane. :D I don't think this needs to be moved into the javascript forum because I'd like to eliminate the use of javascript if possible.

[Medyman]

Well, the solution to your problem is two-sided.

You can certainly style the elements to stack with whatever you might need. If div2 has to be the sum of the heights of div1 and div3, done! It's simple enough.

But you need to know the heights of div1 and div3 first. CSS can't figure out those values through any method. You have to feed CSS the hard numbers. How would you get those hard numners...javascript.

So, you once you get the height of an element via javasctipt. Do some quick math and stick it between some style tags. There is no tricky CSS involved, it's just the regular height property.


#div2 {
height:200px;
}

[rangana]

Hi Medyman,

Seemed you had some typo here ;)


#div2 {
hieght:200px;
}

[Medyman]

lol...I'm sure PizzaEater is intelligent enough to figure that much out, rangana. But thanks. That code was for illustration purposes, not for use ;)

Typo fixed :D