CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12517

Div 100% width and a margin

I'm trying to put a left and right margin on something that is also 100% width. I was using the box-sizing method which I was hoping would make it say 100% including the margin but it does 100% PLUS the margin, meaning I have a vertical scroll bar.

It's demonstrated here:

http://jsbin.com/xomocitono/1

  <div id="main">
    Test
  </div>

#main {width: 100%; margin-left: 100px; margin-right: 100px; background: red;}

In my own particular situation I can't use the following:

  1. Padding instead, because even though it works how I want (in terms of 100% width) the padding covers the links below whereas the margin doesn't.

  2. CSS Calc (it isn't as cross browser as I was hoping)

  3. Fixed width #main, because I want it to be fluid, just with a margin either side.

Do I have any other options?

Upvotes: 1

Views: 1128

Answers (1)

Madhu
Madhu

Reputation: 2823

You don't have to give width when you are using margin-left and margin-right.

Try This:

#main
{
 margin-left: 10%;
 margin-right: 10%;
 background: red;
}

Upvotes: 3

Related Questions