Jump to content


Photo

Responsive Element Padding

responsive element padding

  • Please log in to reply
4 replies to this topic

#1 ChadGregory

ChadGregory

    Member

  • Members
  • PipPip
  • 15 posts

Posted 19 November 2012 - 07:35 PM

I am creating my first responsive website.

My site has a wrapper that has the following css:

#wrapper {
width: 100%;
max-width: 1230px;
margin: 0 auto;
background: #e0dfdf;
}

and I would like to have this element have a padding of 15px but when i apply that style the width of the element increases by 15px when i want it to stay at for example the max-width of 1230px.

Any suggestions?

#2 Beeeeney

Beeeeney

    Advanced Member

  • Members
  • PipPipPip
  • 194 posts
  • LocationEngland!
  • Age:20

Posted 20 November 2012 - 09:52 AM

Why don't you take 15px off the max-width?

#3 ChadGregory

ChadGregory

    Member

  • Members
  • PipPip
  • 15 posts

Posted 20 November 2012 - 06:15 PM

Why don't you take 15px off the max-width?


Thanks for pointing out the obvious lol I should have thought of that

#4 haku

haku

    Advanced Member

  • Staff Alumni
  • 6,172 posts

Posted 21 November 2012 - 05:43 AM

You may find discrepancies with IE (or another browser if you're testing in IE) if you just remove the value from the max-width. If so, then you can put a div inside the wrapper, and give it a 15px side margin.

#5 Scott_S

Scott_S

    Advanced Member

  • Members
  • PipPipPip
  • 40 posts
  • LocationMilwaukee, WI

Posted 26 November 2012 - 09:47 AM

to understand why that is happening read up on box model http://www.w3schools...ss_boxmodel.asp and to control it with box-sizing http://www.w3schools..._box-sizing.asp




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com