Full width div + full width responsive image causing horizontal scroll

HTML & CSS
1

Whats Good Sitepointers!
I have a full width div that purposfully breaks its fixed width container. Inside of it I want a responsive image that grows/shrinks to the full width of its container.

Independently, the divs work fine by themselves, and the image is responsive by itself. But when I add the image to the full width div, I get a horizontal scroll bar when using large images.

How can I get rid of the scroll bar?

My code below:

CSS

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

div {
  min-height: 40px;
  box-sizing: border-box;
}

#container {
  width: 400px;
  border: 1px solid red;
  margin: 0 auto;
}

#some-content {
  border: 2px solid black;
}

#wide-div {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  border: 2px solid green;
}

img {
  max-width: 100%;
  height: auto;
}

<div id="container">
          <div id="some-content">Some content</div>
          <div id="wide-div"><img src="http://via.placeholder.com/1920x1190" alt=""></div>
          <div id="more-content">Some additional content</div>
        </div>
2

I’m not sure about the logic of having a child element larger than its parent, it’s over complicating things.
Why not just make a class for the content that has a max-width: 400px and leave your full width div with its natural default behaviour?

2 Likes
3

Hi there GOLGO_13,

keep it simple. :winky:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
html,body {
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
  }

#container {
    border: 1px solid #000;
    background-color: #fff;
 }

.content {
    max-width: 25em;;
    padding: 1em;
    margin: 0.5em auto;
    border: 1px solid #999;
 }

img {
    display: block;
    width: 100%;
    height: auto;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666; 
 }
</style>

</head>
<body> 

 <div id="container">
  <div class="content">Some content</div>
    <img src="http://via.placeholder.com/1920x1190" width="1920" height="1190" alt="">
  <div class="content">Some additional content</div>
 </div>

</body>
</html>

coothead

2 Likes
4

Thanks guys!

So the container is actually a flex box and the content divs are actually several blocks of content laid out in both one and two column grids, occasionally broken up visually with full width images that stretch beyond the container for aesthetics. The container was also providing the outside gutters for the content blocks and centering the overall layout. Both of your approaches work quite well :grinning::sunglasses: :grinning: !, but to implement I’ll have to specify and keep track of additional properties for the content blocks.

Thanks so much for your responses, they are highly appreciated!

5

The vw unit includes the vertical scrollbar width and that’s why you get a scrollbar appearing.

Let me think about this some more :slight_smile:

1 Like
6

Thought about it a bit more and it can’t be done without guessing at some magic numbers to account for scrollbar width which would result in incorrect placement when the vertical scrollbar was not triggered anyway.

I commented on this 3 years ago that including the scrollbar in the vh unit was a very poor choice and makes it more or less useless unless you have hidden scrollbars on html and body. If they’d implemented vh to not include scrollbars then you could have just made scrollbars visible and all would be well. The reverse isn’t true unfortunately.

Looks like the only viable solution is to have separate containers as already mention by Sam and coothead.:slight_smile:

In case you were interested in the magic number solution you could do this.

#wide-div {
	margin-left: calc(-50vw + 50% + 8px);
    width: calc(100vw - 17px);
	border: 2px solid green;
}

That will account for most browser scrollbar widths but of course on browsers that don’t have a scrollbar (like those on the mac that appear overlaid on top of the content when scrolling) then you will get a slight gap at the left and right edges of the div. The same applies when there is no vertical scrollbar on the viewport also. Other than the above there seems to be no other solution for this.

2 Likes
7

Thanks PaulOB for your detailed explanation! Unfortunately, this is going to likely be the cause of extensive site-wide changes, but at least now I know exactly what’s going on and can determine how to move forward. Again, I really appreciate the full explanation and I’m going to go take a look at your previous thread on the topic!.

8

^ This.

2 Likes
9

I entirely agree but sometimes when you make (or are forced to make) changes to an existing site then you have to work within the structures of that site or basically start again. You can never really plan for everything in advance otherwise you’d have spaghetti to start with. Of course sometimes you just have to bite the bullet and get on with it.

If your whole existing site is in a parent container of fixed/responsive width (as is the OPs) then the only option is to break that page up into multiple containers so that the full width elements are children of the body. At times like this the simplicity of the vw calc hack (if it had worked) would have been nice in that it accomplishes the layout required without changing mark up at all and is basically one line of css.

It’s such a shame that the vw unit didn’t simply refer to the viewport layout space available rather than stupidly including the scrollbar width.:slight_smile:

2 Likes
10

 
   Unfortunately, poor coding methodology
   will invariably come back and bite you. :wonky:
 
 
   coothead

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.