CODEWITHSUNDEEP
htmlcss
ammcom
ammcom

Reputation: 1034

make div width match content

I am designing a horizontal image viewer where images are viewed in a horizontal line with the following html:

<div style="margin-top: 10%;width: 95%;margin: 0 auto">
  <div style="width: 1950px" id="innerScroll">
       <span style="display: inline-block;">
          <a href="...">
                <img src="..."  />
          </a>
        </span>
    <span style="display: inline-block;">
          <a href="...">
                <img src="..."  />
          </a>
        </span>
    <span style="display: inline-block;">
          <a href="...">
                <img src="..."  />
          </a>
        </span>
    ...
    ...
</div>

and later I am going to make the inner div scroll using jQuery.

The problem is the width of the inner div, the content may be displayed differently on different screens so on some screens the total width of the content exceeds the width of the div and goes down to a second line, so event setting it as a fixed number of pixels did not work.

How can I set the width of the div so that it automatically expand to fit the content?

Upvotes: 1

Views: 504

Answers (1)

rmolinamir
rmolinamir

Reputation: 1470

Try adding:

#innerScroll{
  overflow-x: scroll 
}

On the inner div with 1950px of width and see if it works. That may cause the whole page to scroll with it though, I can't test it since I don't have a full example of your CSS.

Here's an example of viewport-percentage lengths:

#innerScroll{
  overflow-x: scroll 
  width: 95vw; 
}

A width of 95vw will make the div's width be equal to 95% of the screen's viewport width.

You can also use the width's fit-content property, but it is not supported by Microsoft Edge. More info here.

#innerScroll{
  overflow-x: scroll 
  width: fit-content; 
}

Alright, I tried something a bit different but I removed the inline styling from your original post, but tried to keep it as similar as possible. I added white-space: nowrap; to the CSS in order to avoid line breaks, and set the width to 100% so that it'll equal 100% of it's parent's width.

#innerScroll {
  overflow-x: scroll;
  width: 100%;
  white-space: nowrap;
}

#wrapper {
  margin-top: 10%;
  width: 95%;
  margin: 0 auto;
}
<div id="wrapper">
  <div id="innerScroll">
       <span style="display: inline-block;">
          <a href="#">
                <img src="https://lh6.googleusercontent.com/proxy/NI1Fg3Rn_msYkSv0qXSZzNbwWqz9yNt_yB-0DlRgoJ_8P09ZCSwQiHDd5qCb-UpnHatmzFBbwMT-OB03IdunDsTeb-XxgMNS5zX6a_P3sxf8Us4WK7vYiWGCrKR8un_jOuxA39iulUXRW3zk65LO13HEkejs1HV5OWS3zIcRNvtRwy_crL8MUCS9nMqQIRgyjLMUSU8=w5000-h5000"  />
          </a>
        </span>
    <span style="display: inline-block;">
          <a href="#">
                <img src="https://lh6.googleusercontent.com/proxy/NI1Fg3Rn_msYkSv0qXSZzNbwWqz9yNt_yB-0DlRgoJ_8P09ZCSwQiHDd5qCb-UpnHatmzFBbwMT-OB03IdunDsTeb-XxgMNS5zX6a_P3sxf8Us4WK7vYiWGCrKR8un_jOuxA39iulUXRW3zk65LO13HEkejs1HV5OWS3zIcRNvtRwy_crL8MUCS9nMqQIRgyjLMUSU8=w5000-h5000"  />
          </a>
        </span>
    <span style="display: inline-block;">
          <a href="#">
                <img src="https://lh6.googleusercontent.com/proxy/NI1Fg3Rn_msYkSv0qXSZzNbwWqz9yNt_yB-0DlRgoJ_8P09ZCSwQiHDd5qCb-UpnHatmzFBbwMT-OB03IdunDsTeb-XxgMNS5zX6a_P3sxf8Us4WK7vYiWGCrKR8un_jOuxA39iulUXRW3zk65LO13HEkejs1HV5OWS3zIcRNvtRwy_crL8MUCS9nMqQIRgyjLMUSU8=w5000-h5000"  />
          </a>
        </span>
</div>
<div>
  Hello world!
</div>

https://jsfiddle.net/y43zraos/

Upvotes: 1

Related Questions