Take the 2-minute tour ×

I would like to build a fluid layout and would like to achieve something like


i.e. have a div with content, call it div id="content" with a fixed margin on either side. I have tried to use the trick of putting the div id="content" into another div container with a margin, but I don't know how to fill out the background of div id="content". Is there a way of telling the div id="content" to use 100% of the available space as background, such that the width of the content plus the width of the margin does not exceed 100% of the browser window size?

share|improve this question
sorry do you mean width: 100%; margin: 200px; ?? –  Daniel Casserly Aug 20 '12 at 11:39

4 Answers 4

Having the DIV set to be 100% with a margin of XXX on either side won't work as that will exceed the size of the browser window.

You could try the following:

body {
    padding:0 2%;

#content {


share|improve this answer
2% is not 200px ... I think the TS wants a specific value as margin. –  Styxxy Aug 20 '12 at 13:16

Use position absolute...

#content {
  position: absolute;
  left: 0;
  right: 200px;

See my Fiddle.

PS Advantage is that you don't need values on other elements.

share|improve this answer

You can put a container around the content and give it 200px left/right padding. This should do the trick (at least, from what I understand of what you are trying to accomplish). Also see this code example:

<!doctype html>
    <style type="text/css">
        body { margin: 0 50px; }
        #container { padding: 0 200px; background: #FF0000; }
        #content { width: 100%; background: #00FF00; }
    <div id="container">
        <div id="content">
            Here goes my content

Note that the body margin is just for illustrating purposes, to let you see the background differences.

(I would post a jsFiddle, however I am not able to use it since I can only use IE7 at this point.)

share|improve this answer

here is my solution, html:

  My Content


.content {
  position: absolute;
  right: 100px;
  left: 100px;

and link to it: http://jsfiddle.net/MPYHs/

also if you want to put sort of image as a background I suggest you use small pattern like https://ssl.gstatic.com/android/market_images/web/background_stripes.gif

hope it helps,


share|improve this answer
Great! Same as mine! :-) –  Split Your Infinity Aug 20 '12 at 12:37
I putted wrong fiddle link, mea culpa :) –  Darko Rodic Aug 20 '12 at 12:42

Your Answer


