DIV dimensioning with CSS

Tarh · Jan 15, 2006

Solved.

Hello,

Using CSS in XHTML 1.0 Strict, is there a way to dimension a DIV node in a fashion where you specify the top left corner and the bottom left corner?

For example, this works in FireFox 1.5:

Code:

elementName { position:absolute;
left:10pt;
top:10pt;
right:10pt;
bottom:10pt; }

but not in IE 6.

Any help is greatly appreciated.

TwiztedFake · Jan 15, 2006

You could specify the top left corner then set the width and height. Although I've never got this to work in any browsers. So I always just use relative positions.

Tarh · Jan 15, 2006

The thing is though that I need to be able to resize the width as the width of the browser changes, meaning that if I did it like that, I'd have to be using a % for the width. In my experiences, however, I've found that a percentage value is inconsistant across browsers and resolutions.

In the final application, the top and left properties of the node will be static. The height needs to be determined by the text contained within the node, and the width needs to be the width of the window - 20pt.

If possible, I'd like to avoid DHTML or javascript of any kind for this, and do it all from CSS.

TwiztedFake · Jan 15, 2006

Tarh said:
In the final application, the top and left properties of the node will be static. The height needs to be determined by the text contained within the node, and the width needs to be the width of the window - 20pt.

If the height will be detemined by the text contained within the node then why are trying to tell the browser where to put the bottom left corner. To have the area expand/contract with the window or content then only specify the topleft corner position.

An example page of what you are trying would be very helpful.

Tarh · Jan 15, 2006

Here's something I put together really quick.

Code:

<html>
<head>
<title>something</title>
</head>
<body text="#FFFFFF" bgcolor="#000000">
  <div style="position:absolute;top:130pt;left:10pt;right:10pt;padding-top:40pt;background-color:red;">
		test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
	</div>
	<div style="position:absolute;left:40px;top:10pt;width:70%;height:202px;background-color:green;"></div>
	<div style="position:absolute;right:10pt;top:10pt;width:699px;height:202px;background-color:purple;"></div>
	<div style="position:absolute;left:10pt;top:10pt;width:294px;height:202px;background-color:purple;"></div>
</body>
</html>

The red cell is the cell I'm having problem with. This code works perfectly in FireFox, but IE refuses to expand the width of the red cell past the width of the text that it contains. Viewing the page in FireFox will show you what I'm trying to achieve for IE.

SOLUTION:
I got it to work by nesting a TABLE node inside a DIV node that expands across the whole page.

Code:

<html>
<head>
<title>something</title>
</head>
<body text="#FFFFFF" bgcolor="#000000" style="margin:0pt;">
	<div style="position:absolute;top:130pt;left:0pt;right:0pt;padding-left:10pt;padding-right:10pt;padding-top:0pt;">
		<table width="100%" style="background-color:red;">
			<tr>
				<td>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
			</tr>
		</table>
	</div>
	<div style="position:absolute;left:40px;top:10pt;width:70%;height:202px;background-color:green;"></div>
	<div style="position:absolute;right:10pt;top:10pt;width:699px;height:202px;background-color:purple;"></div>
	<div style="position:absolute;left:10pt;top:10pt;width:294px;height:202px;background-color:purple;"></div>
</body>
</html>

DIV dimensioning with CSS

More options

Tarh

New Member

TwiztedFake

Established Member

Tarh

New Member

TwiztedFake

Established Member

Tarh

New Member

Similar threads

We're social

New posts ➔

Auction activity ➔

How do you think a potential buyer first checks if your domain is for sale?

Polls of interest ➔

Hot this week ➔

Community favorite ➔

Hot this month ➔

Blog favorites

BankLoanCentral.com

Firgun.com

PayDigital.org

TheVoiceOfJazz.com

EXP.VC

peol.com

raisethebar.de

DeepGrow.com

VTOV.ORG

WeddingMontage.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling