PDA

Click to See Complete Forum and Search --> : Variable Width, Fixed Margin Div

CompGeek01
09-12-2005, 06:35 PM
I need something that I don't know if it's possible....

I would be very happy if someone could show me how to reproduce the following in valid CSS/XHTML.

What I need:
A div with fixed margins and a variable width. The entire div is technically 100% width...but nothing I do seems to create this effect. I just want a div with 100% width and 100% height with margins on all/any sides.

Picture attached, all margins are fixed, not just the two labeled.
NogDog
09-12-2005, 09:54 PM
This is the simplest solution I can find that works in both FF and IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background-color: white;
font: medium arial, helvetica, sans-serif;
color: black;
}
#container {
margin: 0;
padding-left: 40px;
padding-bottom: 100px;
}
#container div {
background-color: silver;
margin: 0;
padding: 10px;
}
-->
</style>
</head>
<body>
<div id="container">
<div>
<h1>DIV With Left and Right Margins</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<h2>H2 Heading</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<h2>H2 Heading</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
</body>
</html>
CompGeek01
09-12-2005, 09:58 PM
While that is close, you can't apply padding for all sides and have the margins stay fixed :( Resizing the window won't resize your solution vertically. Thanks though!
bathurst_guy
09-12-2005, 10:09 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
position: absolute;
left: 40px;
bottom: 100px;
right: 10px;
top: 10px;
background: #000;
}</style>
</head>

<body>
<div id="container">
</div>
</body>
</html>
CompGeek01
09-13-2005, 08:46 AM
Yeah, works in FF but not IE. :( Thanks though!! I appreciate it.