In CSS, how can I do something like this:
width: 100% - 100px;
I guess this is fairly simple but it is a bit hard to find examples showing that.
+2
A:
The short answer is you DON'T do this in CSS. Internet Explorer has support for something called CSS Expressions, but this isn't standard and is definitely not supported by other browsers like FireFox for instance.
You'd be better off doing this in JavaScript.
Praveen Angyan
2009-05-22 17:55:54
Yeah guess I'll have to do keep it in javascript, I'm refractoring some code and wanted to remove the javascript that was doing that tks.
fmsf
2009-05-22 18:00:10
*Please* if you can avoid it don't do this in JavaScript. HTML+CSS may be tricky and the solution may not be obvious, but it can likely do almost anything you need. Using JavaScript for static layouts is almost always a bad idea.
Renesis
2010-01-21 22:56:33
+1
A:
You can't.
You can, however, use margins to effect the same result.
Traingamer
2009-05-22 17:56:14
+1
A:
Could you do:
margin-right: 50px;
margin-left: 50px;
Edit: My solution is wrong. The solution posted by Aric TenEyck suggesting using a div with width 100% and then nesting another div using the margins seems more correct.
Tina Orooji
2009-05-22 17:56:15
If you do this, won't you end up with the total width being 100% + 100px?
Adam Crume
2009-05-22 17:58:23
:o( I'm sorry. Should I delete my post or should I leave it and let the down votes push it down?
Tina Orooji
2009-05-22 18:05:22
down votes are usually meant to encourage you to clean up your post so you can regain rep points lost by the negative votes. If you know your solution to be wrong you can delete if with or without down votes or update it to make it right.
aleemb
2009-05-22 18:14:51
+19
A:
Could you nest a div with left-margin:50px and right-margin:50px inside a div with width:100%?
Aric TenEyck
2009-05-22 17:57:06
A:
CSS can not be used to animation, or any style modification on events.
The only way is to use a javascript function, which will return the width of a given element, then, subtract 100px to it, and set the new width size.
Assuming you are using jQuery, you could do something like that:
oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);
And with native javascript:
oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';
We assume that you have a css style set with 100%;
Boris Guéry
2009-05-22 17:57:45
A:
RC
2009-05-22 18:04:07
+3
A:
You need to have a container for your content div that you wish to be 100% - 100px
#container {
width: 100%
}
#content {
margin-right:100px;
width:100%;
}
<div id="container">
<div id="content">
Your content here
</div>
</div>
You might need to add a clearing div just before the last </div> if your content div is overflowing.
<div style="clear:both; height:1px; line-height:0"> </div>
aleemb
2009-05-22 18:18:30
A:
Setting the body margins to 0, the width of the outer container to 100%, and using an inner container with 50px left/right margins seems to work.
<style>
body {
margin: 0;
padding: 0;
}
.full-width
{
width: 100%;
}
.innerContainer
{
margin: 0px 50px 0px 50px;
}
</style>
<body>
<div class="full-width" style="background-color: #ff0000;">
<div class="innerContainer" style="background-color: #00ff00;">
content here
</div>
</div>
</body>
tvanfosson
2009-05-22 18:19:11
A:
Padding on the outer div will get the desired effect.
<html>
<head>
<style>
#outer{
padding: 0 50px;
border:1px solid black; /*for visualization*/
}
#inner{
border:1px solid red; /*for visualization*/
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
100px smaller than outer
</div>
</div>
</body>
</html>
Josh Bush
2009-05-22 18:19:51
A:
Are you using standards mode? This solution depends on it I think.
If you're trying to make 2 columns you could do something like this:
<div id="outer">
<div id="left">
sidebar
</div>
<div id="main">
lorem ispsum etc...
</div>
</div>
Then use CSS to style it:
div#outer
{
width:100%;
height: 500px;
}
div#left
{
width: 100px;
height: 100%;
float:left;
background: green;
}
div#main
{
width: auto;
margin-left: 100px; /* same as div#left width */
height: 100%;
background:red;
}
If you don't want 2 columns you can probably remove <div id="left">
Hannson
2009-05-22 18:20:04