If Else statements in CSS

**nballon** · 08-30-2006, 06:14 PM

Does anyone know of a way where I can change the widths of certain DIVs depending on the DIV name? I.E. - a certain div (DIV1) would inherit the width of another div (DIV2) depending on what content was within DIV2.

Example -
I have an aspx page that has two divs - DIV1 and DIV2. DIV1's width and content is constant on the page but DIV2's width and content changes depending on from where you come on the website. How can I pass along the width from DIV2 to DIV1?

**Twey** · 08-30-2006, 07:08 PM

Set the ID and/or class dynamically.

I can't be more specific without more information.

**mwinter** · 08-30-2006, 08:21 PM

Originally Posted by nballon

Does anyone know of a way where I can change the widths of certain DIVs depending on the DIV name?

Code:

#div-identifier {
    /* Set width property */
}

but that isn't what you mean, is it?

I.E. - a certain div (DIV1) would inherit the width of another div (DIV2) depending on what content was within DIV2.

That's an entirely different matter, and the short answer is no, you can't do that.

A div element is a block-level element. Block-level elements receive their widths in three ways: as a length value, a percentage value, or a calculated value. In the first case, the width is absolute, and the element will simply overflow its ancestors if necessary. In the second case, the width is computed as a percentage of the containing block. For statically- or relative-positioned block-level elements, the containing block is the nearest block-level ancestor. In the third case, the width must satisfy an equation such that the width plus the left and right margins, borders, and padding, equal the width of the containing block.

As you can see, width calculations are based only ancestors, if any elements at all. Siblings or specific elements are not considered. It may be possible to use scripting to obtain the dimensions of one element and assign that to another, but it isn't reliable on the Web.

Mike

**nballon** · 08-30-2006, 08:25 PM

Twey, what more information do you need? I can give you as much as possible without violating my company's privacy policy. I can give you another example that I hope helps you out -

DIV1 - needs to be set to a width that is determined by the width of DIV2 (which would vary depending on what page it came from) so here's what I mean -
1st example - Content for DIV2 is 600px wide
<div id=1 style="width

DIV2)">
</div>
<div id=2 style="width:600px">
blah blah blah blah</div>

2nd example - Content for DIV3 is 400px wide

<div id=1 style="width

DIV3)">
</div>
<div id=3 style="width:400px">
blah blah blah blah</div>

3rd example - Content for DIV4 is 550px wide

<div id=1 style="width

DIV4)">
</div>
<div id=3 style="width:550px">
blah blah blah blah</div>

As you can see, I want the width for DIV1 to be set to the width of the div below it...Does that help?

**nballon** · 08-30-2006, 08:32 PM

MWinter, I thought maybe your solution was it but yeah you are right, what I am trying to do might not be feasible

I don't know of another way unless you can use If/Else statements meaning if DIV2 = x_width, set DIV1 width to that width...

**mburt** · 08-30-2006, 08:43 PM

Saying "width

IV4" isn't really logical in css. The best you could do is give the div tag and call it's properties there (as mwinter said).

**nballon** · 08-30-2006, 08:58 PM

I was giving an example when I wrote width:div4, I know it's not logical...

**jscheuer1** · 08-31-2006, 09:20 AM

This sort of style and markup will do what you want but can be tricky to design the rest of your page around:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#cont {
position:absolute;
width:auto;
}
#div1 {
border:1px solid black;
}
</style>
</head>
<body>
<div id="cont">
<div id="div1">Hi</div>
<div id="div2">&nbsp;</div>
<input type="button" onclick="document.getElementById('div2').innerHTML=document.getElementById('div2').innerHTML.toLowerCase()=='gee golly gosh'? '&nbsp;' : 'gee golly gosh';" title="toggle div2 content">
</div>
</body>
</html>

Notes: Click the button to toggle div2's content. You will see div1 expand and contract in some browsers, and in others it will expand but not contract. However, if as you say, the page is loaded fresh each time that div2 gets different content, this wouldn't matter as, div1 only needs to conform onload then, and it will. No javascript is required for this effect. The javascript onclick event for the button is simply to show what happens when the content of div2 is changed.

**WorldSailor** · 09-01-2006, 11:35 PM

nballon - Meaning no disrespect... since this is an aspx page, that implies the use of asp.net. Why don't you handle the decision and sizing on the server side? I mean, isn't that the whole point of asp.net?

**Twey** · 09-01-2006, 11:38 PM

Why don't you handle the decision and sizing on the server side?

And how exactly do you suggest s/he does that? The required information is not available to the server, nor could the server-side script feasibly regenerate the values at every point at which the input value could change (window resize events, for example).

Thread: If Else statements in CSS

Thread Tools

Search Thread

If Else statements in CSS

Bookmarks

Bookmarks

Posting Permissions