...

View Full Version : CSS Equations



MysteryMe
12-11-2005, 07:01 PM
Im pretty new to css but i know the basics i think. Anyways i had a hard time finding out how css can do equations. I have 2 divs, one nav, one content. Now nav is 150px wide, and my content left starts at 150px. That is all fine but what i want to do is have the content div be as wide as the remaining width of the page. I want to do something like div#nav {width:100% - 150px;}.

Anyone have any ideas ?

mark87
12-11-2005, 07:06 PM
A link to the page would be helpful. My guess is that you are using absolute positioning when it is not needed.

MysteryMe
12-11-2005, 07:08 PM
This is my layout.css file:

<style type="text/css">

* {margin:0px; padding:0px;}

body {background-color:black;}

div#nav {position:absolute; top:100px; left:0px; width:150px; background-color:red;}

div#content {position:absolute; left:150px; width:100%; background-color:yellow; }

</style>

mark87
12-11-2005, 07:36 PM
I see what you're trying to do, and yes, absolute positioning is not really needed. You will need to use a wrapper div like so.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<title></title>
<style type="text/css">
body, html, div { padding: 0; margin: 0; height: 100%; }

#nav {
width: 150px;
background: #F00;
float: left;
}

#content { background: #FF0; }
</style>
</head>

<body>
<div id="wrapper">
<div id="nav"></div>
<div id="content"></div>
</div>
</body>

</html>

rmedek
12-11-2005, 07:45 PM
Something like this div#nav {width:100% - 150px;} is pretty much the Holy Grail amongst web designers. There really isn't any way to do that w/CSS yet; maybe in CSS3, though. For now Javascript is the way to go.

In this case you don't really need this sort of thing (the float will work fine), but in other cases it'd be pretty helpful.

MysteryMe
12-11-2005, 07:51 PM
Hey thanks alot, thats exactly what i wanted.

Bill Posters
12-11-2005, 08:23 PM
You will need to use a wrapper div
Maybe I'm missing something (entirely possible), but why?


Incidentally, it's possibly a good idea to give the content div a margin-left to match the width of the nav instead of letting the nav div push the content div content over. Using a left margin means the content div box is sitting beside the nav div box rather than beneath it. Although it may not appear to change anything in your example code, I figure that it's better to have the bounds of the content div be where they appear to be rather than half tucked beneath the nav. It also serves to keep things more straight-forward should you start messing about with things like relative or absolute positioning or background images.

e.g.


#nav {
width: 150px;
float: left;
}

#content {
margin-left: 150px;
}



<body>

<div id="nav">nav</div>

<div id="content">content</div>

</body>

mark87
12-11-2005, 08:29 PM
Maybe I'm missing something (entirely possible), but why?

Yea I realised after I posted it wouldn't be needed at all. :o



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum