ansaurus

Question

Answer 1

A:

have a div in a div... the outer div can be 100% wide with a 40px padding and the inner div can be 100% wide too.. which will take up the inner div's width - the 40px padding. :)

Thomas Clayson 2010-08-18 12:15:00

doing this method will result in a width of 100% + 40px as the padding is added to the div, not subtracted.

Hailwood 2010-08-18 12:25:29

Answer 2

+3 A:

Wrap it in a another <div> and give the parent <div> a width:100% property, and the child <div> a margin:40px; property:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head >
    <title >Example</title>
    <style type="text/css">
        #wrapper {
            width:100%;
        }
        #main {
            margin:40px;
            background-color:red;
        }
    </style>
</head>
<body>

<div id="wrapper">
    <div id="main">
        This is a test
    </div>
</div>

</body>
</html>

LeguRi 2010-08-18 12:15:52

this will give margin not only to left-right but top-bottom also. so it needs margin:0 40px; .But the paint point is good ;)

Sotiris 2010-08-18 12:20:24

There is no need for an outer `div` with `width: 100%`. `div`s are by default `width: auto`, which means it will take up the whole available width automatically. Just give the `div` `margin: 0 40px` and you are done.

RoToRa 2010-08-18 12:35:02

Answer 3

A:

Simply

[..]
<body>
<div style="margin: 40px">Blabla</div>
</body>
[..]

..will create a DIV that takes up all available horizontal space, minus 40px on each side.

A block level element always uses all its available horizontal space unless otherwise specified. A div with exactly 40px to each side of the BODY element will thus always be centered. No need for wrappers to achieve this.

Arve Systad 2010-08-18 12:36:53

ansaurus

tags:

views:

answers:

negative margins to 'shrink' a div

related questions