Ways to make a div adjust to the width of its content

Question

Ways to make a div adjust to the width of its content

Hello, this is my first time posting a question here. I have found many helpful Java answers in this community before, so I thought I'd give it a try. I did some research beforehand, but please let me know if I have duplicated a question or done anything wrong.

My current project involves creating a thumbnails gallery and I have created a jsfiddle link to showcase my progress.

HTML

<body>
  <div id="main">
    <div id="wrapper">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</body>

CSS

#main {
  background-color: rgba(255, 105, 180, 0.5);
  height: 100vh;
  padding: 10px;
}

#wrapper {
  background-color: blue;
  display: inline-block;
  padding: 5px;
}

.box {
  display: inline-block;
  background-color: red;
  width: 200px;
  height: 200px;
  margin: 5px;
}

In the main div, I am attempting to center the red boxes horizontally without using text-align: center;. I want them to align left-to-right with space between them while keeping the entire block centered. My approach was to use a wrapper div for this purpose. However, I encountered an issue where the blue wrapper extends beyond its content filling the main div. I came across a solution on StackOverflow that suggests using inline-block to address this issue, but I am struggling to implement it correctly. I believe this should be a relatively simple fix, so what am I overlooking?

If you prefer a TLDR version, I have provided some snapshots here.

Thank you in advance!

css

Answer 1

Answer №1

To address this issue through CSS, you would need to create numerous media queries with specific values. Instead, I suggest using JavaScript to perform the following steps:

1) Determine the available width

2) Calculate the maximum number of blocks that can fit in one row

3) Set the required width for the wrapper container

Answer 2

To address this issue through CSS, you would need to create numerous media queries with specific values. Instead, I suggest using JavaScript to perform the following steps:

1) Determine the available width

2) Calculate the maximum number of blocks that can fit in one row

3) Set the required width for the wrapper container

Answer 3

Answer №2

One of the reasons your content expands to fit 100% of the space available is because the boxes are set as 'inline-block', which means they are part of a line that will take up 100% width if it wraps. The browser treats this like text, following standard behavior.

To change this, you can:

Specify the maximum width of the container.
Specify the number of elements that can be on one line before wrapping.

In either case, some assumptions/limitations need to be hardcoded (without using scripts or complex media queries).

The simplest way is to specify the maximum width of the wrapper:

body{
  width:100%;
}

#main {
  background-color: rgba(255, 105, 180, 0.5);
  height: 100%;
  padding: 10px;
  width:100%;
}

#wrapper {
  background-color: blue;
  display: block;
  padding: 5px;
  max-width:640px;
  margin: 0 auto;
}

.box {
  display: inline-block;
  background-color: red;
  width: 200px;
  /* To make it shrink instead of wrap, use:
  width: calc((100% / 3) - 15px);*/
  height: 200px;
  margin: 5px;
}

JS Fiddle: https://jsfiddle.net/Chipmo/z30fLv0v/

To control the number of elements before wrapping, add <br> tags after each box and selectively activate them using nth-child selector. While there may be ways without extra tags, this technique demonstrates the basic concept.

JS Fiddle: https://jsfiddle.net/Chipmo/xsf6c7e5/

SO snippets below:

Max-width

body{
  width:100%;
}

#main {
  background-color: rgba(255, 105, 180, 0.5);
  height: 100%;
  padding: 10px;
  width:100%;
}

#wrapper {
  background-color: blue;
  display: block;
  padding: 5px;
  max-width:640px;
  margin: 0 auto;
}

.box {
  display: inline-block;
  background-color: red;
  width: 200px;
  /* If you want it to shrink rather than wrap you could say
  width: calc((100% / 3) - 15px);*/
  height: 200px;
  margin: 5px;
}

<body>
  <div id="main">
    <div id="wrapper">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</body>

Number of elements

#main {
  background-color: rgba(255, 105, 180, 0.5);
  height: 100%;
  padding: 10px;
  text-align: center;
}
/*needs 2 ID's to gain higher precedence than the text-align center from above */

#main #wrapper {
  background-color: blue;
  display: inline-block;
  padding: 5px;
  text-align: left;
}
.box {
  display: inline-block;
  background-color: red;
  width: 200px;
  height: 200px;
  margin: 5px;
}
#wrapper br {
  display: none;
}

/*change to 8n for every fourth, 4n for every 2nd etc etc 
  You will probably want to use media queries with this */

#wrapper br:nth-child(4n) {
  display: block;
}

<body>
  <div id="main">
    <div id="wrapper">
      <div class="box"></div><br>
      <div class="box"></div><br>
      <div class="box"></div><br>
      <div class="box"></div><br>
      <div class="box"></div><br>
      <div class="box"></div><br>
      <div class="box"></div><br>
    </div>
  </div>
</body>

Answer 4

One of the reasons your content expands to fit 100% of the space available is because the boxes are set as 'inline-block', which means they are part of a line that will take up 100% width if it wraps. The browser treats this like text, following standard behavior.

To change this, you can:

Specify the maximum width of the container.
Specify the number of elements that can be on one line before wrapping.

In either case, some assumptions/limitations need to be hardcoded (without using scripts or complex media queries).

The simplest way is to specify the maximum width of the wrapper:

body{
  width:100%;
}

#main {
  background-color: rgba(255, 105, 180, 0.5);
  height: 100%;
  padding: 10px;
  width:100%;
}

#wrapper {
  background-color: blue;
  display: block;
  padding: 5px;
  max-width:640px;
  margin: 0 auto;
}

.box {
  display: inline-block;
  background-color: red;
  width: 200px;
  /* To make it shrink instead of wrap, use:
  width: calc((100% / 3) - 15px);*/
  height: 200px;
  margin: 5px;
}

JS Fiddle: https://jsfiddle.net/Chipmo/z30fLv0v/

To control the number of elements before wrapping, add <br> tags after each box and selectively activate them using nth-child selector. While there may be ways without extra tags, this technique demonstrates the basic concept.

JS Fiddle: https://jsfiddle.net/Chipmo/xsf6c7e5/

SO snippets below:

Max-width

body{
  width:100%;
}

#main {
  background-color: rgba(255, 105, 180, 0.5);
  height: 100%;
  padding: 10px;
  width:100%;
}

#wrapper {
  background-color: blue;
  display: block;
  padding: 5px;
  max-width:640px;
  margin: 0 auto;
}

.box {
  display: inline-block;
  background-color: red;
  width: 200px;
  /* If you want it to shrink rather than wrap you could say
  width: calc((100% / 3) - 15px);*/
  height: 200px;
  margin: 5px;
}

<body>
  <div id="main">
    <div id="wrapper">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</body>

Number of elements

#main {
  background-color: rgba(255, 105, 180, 0.5);
  height: 100%;
  padding: 10px;
  text-align: center;
}
/*needs 2 ID's to gain higher precedence than the text-align center from above */

#main #wrapper {
  background-color: blue;
  display: inline-block;
  padding: 5px;
  text-align: left;
}
.box {
  display: inline-block;
  background-color: red;
  width: 200px;
  height: 200px;
  margin: 5px;
}
#wrapper br {
  display: none;
}

/*change to 8n for every fourth, 4n for every 2nd etc etc 
  You will probably want to use media queries with this */

#wrapper br:nth-child(4n) {
  display: block;
}

<body>
  <div id="main">
    <div id="wrapper">
      <div class="box"></div><br>
      <div class="box"></div><br>
      <div class="box"></div><br>
      <div class="box"></div><br>
      <div class="box"></div><br>
      <div class="box"></div><br>
      <div class="box"></div><br>
    </div>
  </div>
</body>

Answer 5

Answer №3

To achieve the desired layout, utilize flexbox with the following properties:

#wrapper {
  background-color: blue;
  height: auto;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: space-between;
  flex-wrap: wrap;
}

In order to position the last red box correctly, two invisible boxes have been added at the bottom of the layout.

View Fiddle

Snippet Preview

html,
body {
  width: 100%;
  height: 100%;
}
#main {
  width: 100vw;
  max-width: 640px;
  height: auto;
  background-color: rgba(255, 105, 180, 0.5);
  padding: 10px;
}
#wrapper {
  background-color: blue;
  height: auto;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: space-between;
  flex-wrap: wrap;
}
.box {
  display: block;
  background-color: red;
  margin: 2.5px auto 10px;
  width: 200px;
  height: 200px;
}
.space {
  background: none;
}

<body>
  <div id="main">
    <div id="wrapper">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="space box"></div>
      <div class="space box"></div>

    </div>
  </div>
</body>

Answer 6

To achieve the desired layout, utilize flexbox with the following properties:

#wrapper {
  background-color: blue;
  height: auto;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: space-between;
  flex-wrap: wrap;
}

In order to position the last red box correctly, two invisible boxes have been added at the bottom of the layout.

View Fiddle

Snippet Preview

html,
body {
  width: 100%;
  height: 100%;
}
#main {
  width: 100vw;
  max-width: 640px;
  height: auto;
  background-color: rgba(255, 105, 180, 0.5);
  padding: 10px;
}
#wrapper {
  background-color: blue;
  height: auto;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: space-between;
  flex-wrap: wrap;
}
.box {
  display: block;
  background-color: red;
  margin: 2.5px auto 10px;
  width: 200px;
  height: 200px;
}
.space {
  background: none;
}

<body>
  <div id="main">
    <div id="wrapper">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="space box"></div>
      <div class="space box"></div>

    </div>
  </div>
</body>

Ways to make a div adjust to the width of its content

Answer №1

Answer №2

Answer №3

Snippet Preview

Similar questions

Triggering a jQuery event when a CSS property is altered

Adjust the size of an image to fit within a set height row using CSS grid

Internet Explorer is failing to render SVG as content within a pseudo element such as :before or :after

Ensuring that the text in the Bootstrap navbar is responsive for all screen

Place text directly below the images for proper alignment

Incorporate an icon into an Angular Material input field

What exactly do discrete animations entail?

Resetting the Countdown Clock: A Transformation Process

"Pressing the 'back' button on your browser takes

Is it possible for a Bootstrap modal dialog to overlay another dialog window?

What is the best way to eliminate the gap between header, content, and footer sections when in mobile view?

Unable to implement Bootstrap 5 Hamburger Animation - Looking for solutions

What's preventing the buttons from shifting positions?

Styling with react-jss based on intricate conditionals

Parsing CSS with PHP

The issue of pseudo elements not functioning properly in Material-UI makeStyles with React.js has been a frustrating

Ways to evenly distribute children in a row using CSS

Issue with Bootstrap carousel: image protrudes past boundaries of parent container

Text "movement/vibration" in screen when adjusting dimensions in Firefox for Mac

Utilizing jQuery or Javascript to obtain the title of the current webpage, find a specific string within it, and then apply a class to the corresponding element