cannot get full width of page and image divs arent sized properly

Question

I've put a codepen example to explain:

Basically, I'm wondering why the html and body tags will not go full width. My screen is 1920x1080, but the html tag refuses to be 1920 - it always goes to 1903 for some reason? Any idea why? Also the parent div of the img tag is adding some padding somewhere - because the img is 1900 wide and the surrounding div goes to 1903? Im wondering where this padding is coming from? Ive tried adding display:block, and also vertical-align:top to the image, but no dice...

Here's the code:

HTML

<div class="gallery"  >
  <div class="gallery-cell">
    <div class="innerG">
      <img src="http://lorempixel.com/image_output/animals-q-c-1900-850-2.jpg" />
    </div>
  </div>
  <div class="gallery-cell">Lorem ipsum dolor sit</div>
</div>

CSS

html, body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.gallery-cell {
  padding: 0;
  margin: 0;
}

I cannot see any padding and I cannot fully understand that you want to aim, you want your img to be full screen? — silviagreen, Feb 19 '16 at 15:17

Sprazer · Accepted Answer · 2016-02-19T15:23:50.237

2

I believe this is the case:

The scrollbar is 17 pixels wide

Also the div you have called "innerG" is display block, so it has the width of the full page. No padding is hidden anywhere. :)

Just zoom out and you will see that it's size is changing to match the screen width

edited Feb 19 '16 at 15:23

answered Feb 19 '16 at 15:18

Sprazer

520
2
11

Where is the scrollbar coming from? Is this part of the codepen site? Its weird because their body/html tag works correctly at 1920 in my browser - whereas my html body shows 1903??? – Ke. Feb 19 '16 at 15:30
This is the correct answer. How are we supposed to work around the scrollbar being introduced? – Ke. Feb 19 '16 at 15:32
Is this perhaps the answer? - http://stackoverflow.com/questions/18548465/prevent-scroll-bar-from-adding-up-to-the-width-of-page-on-chrome – Ke. Feb 19 '16 at 15:33

score 0 · Answer 2 · answered Feb 19 '16 at 15:21

0

If you want to have full body width all the time, you can set this in CSS:

html, body {
  padding: 0;
  margin: 0;
  min-width: 1920px;
}

answered Feb 19 '16 at 15:21

HuorCulnamo

336
2
11

I would like it to be percentage not fixed - hence would like to use 100% but it's not working - still 1903px – Ke. Feb 19 '16 at 15:29

score 0 · Answer 3 · answered Feb 19 '16 at 15:21

0

You could try to set both your HTML and Body to width: 100%;

Is there any content that is longer than the window's height? If so, might be the scroll bar as Silviagreen said.

answered Feb 19 '16 at 15:21

Séane

101
1
9

It wont go to 100% - still 1903 pixels ... :/ – Ke. Feb 19 '16 at 15:28

cannot get full width of page and image divs arent sized properly

3 Answers3