[RESOLVED] Expanding div with fixed width + padding.

@pactor21Aug 18.2010

Hello..

I’m having a little problem with padding with auto margin on sides of a div.
Probably good idea to start with the code I am having problem with.

[code] <html> <head> <style> #test1 { width:300px; margin:0 auto; padding: 0 20px; background: #fcf897; border:1px solid; } #test2 { width: 300px; margin:0 auto; padding:0; background: #c9e0f7; border:1px dashed; } </style> </head> <body> <div id=”test1″>Test1 div </div> <div id=”test2″>Test2 div </div> </body> </html> [/code]

As you see those 2 divs above have the same width, and I added some padding on test1 div thinking that would make the wording inside the div have a little breathing room from sides of the div and maintain the same width.

Instead, the padding actually expanded the div to the sides by the amount of the padding. (Try the code yourself on your browser.)
I don’t understand what went wrong.
(I’m kind of guessing this has something to do with the ‘auto’ margin though.)

Any idea will be appreciated.

to post a comment

CSS

7 Comments(s) _↴

@annaunivrajanAug 18.2010 — #HI,

I didnt get your question properly. I guess you expect the padding should apply in top,left,right and bottom.

The below code may help you...

<html>

<head>

<style>

#test1

{

width:100px;

margin:0 auto;

padding: 20px;

background: #fcf897;

border:1px solid;

}
  #test2
  {
   width: 100px;
   margin:0 auto;
   padding:20px;
   background: #c9e0f7;
   border:1px dashed;
  }

</style>

</head>

<body>

<div id="test1">Test1 div

</div>

<div id="test2">Test2 div

</div>

</body>

</html>

@annaunivrajanAug 18.2010 — #Even you can 20% instead of 20px;

@tirnaAug 18.2010 — #The CSS Box Model tute gives a good decription of how padding, margins, borders, widths etc work.

I would do something like this to put a gutter around some text in a container and maintain an overall width of 300px on the 2 div's:

[CODE] 
 <html>
 <head>
 <title></title>
 <style type="text/css">
 
 #test1, #test2 {
 width:300px;
 margin: 0px 0px 20px 0px}
 
 .myP {
 margin:0px 0px 0px 0px;
 padding: 20px 20px 20px 20px;
 background: #fcf897;
 border:1px solid black;
 }
 
 </style>
 </head>
 <body>
 
 <div id="test1">
 
 <p class="myP">
 Et elit nunc, aliquam rhoncus, cras ante est ac consequat, vitae lacinia curabitur pellentesque ipsum bibendum gravida. Arcu in nisl. 
 Vivamus etiam viverra morbi nunc, neque cras ut placerat id pulvinar eget, dolor vel pede nunc duis. Amet mi egestas porta, leo est 
 nec et, suscipit sed ipsum mauris vitae. Libero vulputate massa perspiciatis laborum ipsum, leo parturient dapibus accumsan, nec 
 viverra luctus a. Qui sit lorem scelerisque purus lectus, aptent habitant nunc turpis duis, malesuada a nam mi litora. Duis sapien 
 felis, eu aute quis, elit dignissim hymenaeos vel.
 </p>
 
 </div>
 
 <div id="test2">
 
 <p class="myP">
 Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel. 
 Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce 
 pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut, 
 ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id, 
 aliquam non, taciti donec ut.
 </p>
 
 </div>
 
 </body>
 </html>
 [/CODE]

@annaunivrajanAug 18.2010 — #<html>

<head>

<title></title>

<style type="text/css">

p

{

margin:0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

background: #fcf897;

border:1px dotted black;

}

#test1

{

width:300px;

margin:0px 0px 20px 0px;

padding: 20px 20px 20px 20px;

background: #fcf897;

border:1px solid black;

}

#test2

{

width:300px;

margin:0px 0px 0px 0px;

padding: 20px 20px 20px 20px;

background: #fcf897;

border:1px dashed black;

}

</style>

</head>

<body>

<div id="test1">

<p id="test">

Et elit nunc, aliquam rhoncus, cras ante est ac consequat, vitae lacinia curabitur pellentesque ipsum bibendum gravida. Arcu in nisl.

Vivamus etiam viverra morbi nunc, neque cras ut placerat id pulvinar eget, dolor vel pede nunc duis. Amet mi egestas porta, leo est nec et, suscipit sed ipsum mauris vitae. Libero vulputate massa perspiciatis laborum ipsum, leo parturient dapibus accumsan, nec viverra luctus a. Qui sit lorem scelerisque purus lectus, aptent habitant nunc turpis duis, malesuada a nam mi litora. Duis sapien felis, eu aute quis, elit dignissim hymenaeos vel.

</p>

</div>

<div id="test2">

<p>

Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.

Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut, ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id, aliquam non, taciti donec ut.

</p>

</div>

</body>

</html>

@pactor21authorAug 18.2010 — #Oops.. I guess I didn't clarify the problem too well here.

I am NOT concerned with the vertical aspects of these divs at all, all I wanted to do was keep the width of test1 div to 300px with some padding applied on side edges.

When I added padding on test1 div, it came to be wider than test2 div even though they both have same width set in the code as 300px.

Ah.. one more thing. I wanted to have those divs centered using '0 auto' margins.

well I guess I could contain the text in a p tag and have it styled, but I wanted to understand what was going on theoretically.

@pactor21authorAug 18.2010 — #And your suggestion worked like a charm. really appreciate it.

@tirnaAug 18.2010 — #no problem - you're welcome ?

Also in #CSS _↴

Testing the new functions of this forum and hoping for feedback on ToDo site...Border Radius Not working in Firefox Web Components and CSS stacking order

Success!

Help @pactor21 spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Expanding div with fixed width + padding.

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] Expanding div with fixed width + padding.

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴