CODEWITHSUNDEEP
css
darkchampionz
darkchampionz

Reputation: 1224

CSS div width auto

div {
    width: auto;
}

Hello, I got a very small question about width! This code fixes the width of a div automatically but is there a way to give it a plus 10 pixels the above automated width? I tried width: auto + 10px but didn't work...

Upvotes: 2

Views: 12403

Answers (2)

Hassan Zia
Hassan Zia

Reputation: 330

Solution to OP's problem:

div {
  width: auto;
  padding: 0 5px; /* This would add a padding of 5px to both the left and the right of the div content box, which gives an additional 10px to the total width of the element. */
}

this would do the job

For more information: Introduction to the CSS box model

EDIT (Difference between width:100% and width:auto)

I've use same styling for both divsbut you can see the difference. 

.main{
  margin:auto;
  width: 70%;
  height: 300px;
  border: solid thin green;
}
.sub1{
  width: auto;
  height: 50px;
  margin: 20px;
  padding: 20px;
  color: white;
  background-color: blue;
  border: solid thin blue;
}
.sub2{
  width: 100%;
  height: 50px;
  margin: 20px;
  padding: 20px;
  color: white;
  background-color: black;
  border: solid thin black;
}
<div class="main">
  <div class="sub1">I'm Div with auto width</div>
  <div class="sub2">I'm Div with 100% width</div>
</div>

Upvotes: 0

Ahmad
Ahmad

Reputation: 2707

Value auto sets the value to 100% of the Parent container. If you want 100% + 10px same as auto + 10px then use calc.

#parent{
  background-color: red;
  width: 100px;
  height: 100px;
}

#child{
  background-color: green;
  width: calc(100% + 10px);
  height: 50px;
}
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <div id="parent">
    <div id="child"></div>
  </div>
</body>
</html>

Upvotes: 2

Related Questions