Question 243988 in Html Question posted in
Some basic documentation can be found here.

Html – Horizontal scrollbars missing on wide right-floated image

I am struggling to set up a horizontal scrollbar on an image that is right-floated. It should only appear when the browser window is too narrow to view it all. I have the following HTML code below, as well as the CSS, but I also have this fiddle: https://jsfiddle.net/zk4ue5xc/.

.outer_container {
  border: 1px solid #c8ccd1;
  background-color: #f8f9fa;
  float: right;
  padding: 3px;
  margin: 0.5em 0 1.3em 1.4em
}

.annotated_img_container {
  background-color: white;
  border: 1px solid #c8ccd1;
  float: right;
  position: relative;
}

.caption_text {
  clear: both;
  font-size: smaller;
  max-width: 400px;
  padding: 0.5em 0 0 2px
}
<h2>Title</h2>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
</p>
<div class="outer_container">
  <div class="annotated_img_container" style="width: 382.4px; padding-top: 57.7px; padding-bottom: 76px;">
    <figure><img src="//upload.wikimedia.org/wikipedia/commons/thumb/1/11/Reading-Glasses.jpg/300px-Reading-Glasses.jpg" width="300" height="128">
    </figure>
  </div>
  <p class="caption_text" style="max-width: 382.4px;">Eyeglasses parts.</p>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
</p>

I have tried using width: 392px; and overflow-x: scroll; on the outer container, but it only creates a useless scrollbar below the image, and does not work.

Is it possible to have a wide image that is both right-floated and scrollable horizontally on narrower devices? On larger devices, the scrollbar should be hidden.

I’m beginning to think these two properties may be incompatible.

Thanks.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I think I have found a solution by using a width for the outer container that is min(100%, npx);, where n is the width of the inner container. See here for a solution https://jsfiddle.net/0jzep72h/1/ .


  2. 0

    You can avoid some of that position:relative etc. Not directly part of the question but you can use display:grid; then set up the elements inside that grid including "super center" for example the caption text etc. easily. The key part here is the overflow-x: auto; on the container. I put some ugly style in just to show what was where. Comments in the CSS on some things. Some scroll can be suppressed with margin:0; also. Alternatively instead of a float:right you might consider display:flex which is a single dimension instead of the 2 dimension a grid uses but the text flow will differ when it is large enough to go below the image container also.

    .page_container {
  font-size: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.outer_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "toppart" "bottompart";
  border: 1px solid #8B008B;
  background-color: #f8f9fa;
  margin-left: 0.25em;
  float: right;
}

.annotated_img_container {
  grid-area: toppart;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: #ffffff;
  border: 1px solid #c8ccd1;
  overflow-x: auto;
  margin: 0;
}

.annotated_img_container figure,
.caption_text {
  /* super center the text and image */
  display: grid;
  place-items: center;
}

.caption_text {
  grid-area: bottompart;
  font-size: 0.75em;
  height: 1.5em;
}

.annotated_img_container figure,
.annotated_img_container figure img {
  margin: 0;
  padding: 0;
}

.annotated_img_container figure img {
  /* size it; 8em = 128px/16px = 8  given 16px from our container font */
  height: 8em;
  /* just to show where it is */
  border: solid cyan 1px;
}
    <div class="page_container">
  <h2>Title</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
  </p>
  <div class="outer_container">
    <div class="annotated_img_container">
      <figure><img src="//upload.wikimedia.org/wikipedia/commons/thumb/1/11/Reading-Glasses.jpg/300px-Reading-Glasses.jpg">
      </figure>
    </div>
    <p class="caption_text">Eyeglasses parts.</p>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
  </p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search