CODEWITHSUNDEEP
htmlcss
Kristina
Kristina

Reputation: 33

How to set width of div

I'm trying to set width:50% on div.book__form which uses padding:6rem but it doesn't take 50%. When I remove padding:6rem it actually takes 50% but I needed to set padding:50%.

In inspect element of Chrome browser it shows display:block but I didn't write it down.

css

.book {
  background-image: linear-gradient(105deg, 
      rgba($color-white, .9) 0%,
      rgba($color-white, .9) 50%,
      transparent 50%),
    url(../img/nat-10.jpg);
  background-size: 100%;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba($color-black, .2);
}
.book__form {
  width: 50%;
  padding: 6rem;
  background-color: pink;
}

html

<div class="book">
   <div class="book__form"></div>
</div>

result

Upvotes: 0

Views: 98

Answers (3)

BobRodes
BobRodes

Reputation: 6165

Looks like it's working fine to me, at least as far as setting the 50% width and the 6rem padding. However, the image will render in its default size (in this case, 1204x170) if you don't specify a width for it. If that turns out to be bigger than the width of its container — as it does in this case — the image will overflow the container. I think that's what you mean by "doesn't take 50%."

So, in this example, I just added a bit more CSS to set the width of the image to be 100% of the container size, and you will see that it now will "take 50%," if I understand the meaning of the phrase correctly.

Finally, if I may say so, you will also see from the answers given that you have several different interpretations of your question. Perhaps you can give some thought to why some of us missed your meaning, and think of ways to ask your questions that minimize that.

.book__form {
    width: 50%;
    padding: 6rem;
    background-color: pink;
}

.book__form img {
    width: 100%;
}
<div class="book">
  <div class="book__form">
    <img src="https://i.sstatic.net/lzr8y.jpg">
  </div>
</div>

Upvotes: 0

Ravi Kumar
Ravi Kumar

Reputation: 147

it doesn't take exact width 50% after using padding because you didn't use the universal tag in css box-sizing: border-box; which is necessary when you are using padding.

And talking about inspect element of Chrome browser which shows display:block that's a default formatting of the browser from user agent stylesheet.

*{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

<div class="book__form">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ad nobis nulla porro. Non alias nisi ad omnis animi neque at repellat, sit nulla voluptate quod, dolorum, repellendus magni placeat.</p>
    </div>

Upvotes: 1

Davidwestcoast
Davidwestcoast

Reputation: 17

I tried messing around with the padding and these are my results:

First one with only padding top and bottom. 

.book {
  background-image: linear-gradient(105deg, 
      rgba($color-white, .9) 0%,
      rgba($color-white, .9) 50%,
      transparent 50%),
    url(../img/nat-10.jpg);
  background-size: 100%;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba($color-black, .2);
}
.book__form {
  width: 50%;
  padding-top: 6rem;
  padding-bottom: 6rem;
  background-color: pink;
}
<div class="book">
   <div class="book__form"></div>
</div>

Left and/or right padding seem to make it more then 50%

.book {
  background-image: linear-gradient(105deg, 
      rgba($color-white, .9) 0%,
      rgba($color-white, .9) 50%,
      transparent 50%),
    url(../img/nat-10.jpg);
  background-size: 100%;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba($color-black, .2);
}
.book__form {
  width: 50%;
  padding-top: 6rem;
  padding-bottom: 6rem;
  padding-right: 6rem;
  padding-left: 6rem;
  background-color: pink;
}
<div class="book">
   <div class="book__form"></div>
</div>

Hopes this helps.

Upvotes: 0

Related Questions