[Solved] css – width fit to content

[ErwinV]

I built a site with the following structure:

body
div pos: absolute; width: 3200px
div pos: static; width: fit-content <- 20 – 30 pcs in a row
div pos: relative; width: 100%
div pos: absolute; width 30%

The first div is actually a long slider, the width is manually set to fit the contents. But I want the width to be set automatically. The fit-content option results in no width at all. Any ideas how to fix this?

Thanks!

[Paulie_D]

width: fit-content

…and what’s this?

If it’s what I think it is…as far as I know no browser supports it yet unless you have the ‘experimental’ flags on and vendor prefix it…oh…and IE..forget it!

[ErwinV]

Allright, below a simple version of the html.
I want to place the red squares in a row, so that the wrapper will be expanded to the right and there will be only one long row and a horizontal scrollbar.
preview: http://jsbin.com/rabosofosu/1/edit?html,css,output

<div class="wrapper">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<style>
.square     {width: 200px; height: 200px; background-color: red; float: left; }
.wrapper    {width: auto; height: 100%; background-color: green;}
</style>

`

[Beverleyh]

I’m on iPhone it the mo so can’t test much, but how about removing float:left; on .square and going for display:inline-block; instead.

Also, set white-space:nowrap; on .wrapper

This will introduce a gap around the squares – something Chris covers here with some counteractive solutions https://css-tricks.com/fighting-the-space-between-inline-block-elements/ – but at least it should get them sat in a row.

[ErwinV]

Beverleyh
Also, set white-space:nowrap; on .wrapper

right! that does the trick

Thanks!

[david263]

Why are so many simple styling problems so incredibly difficult to fix? Why was the original css1 so poorly designed, with few fixes for fundamental styling, especially positioning and sizing, ever?

CSS requires experimenting, unlike HTML and programming, both of which are elegant and reliable relative to CSS. Why?

It’s a nightmare for professional and newcomer alike. Why does HTML get simpler and more elegant, but CSS stays complicated and hacky? What is wrong with the standards creators?

I’d love to write my own simple styling engine in a programming language and use it instead of CSS, but there is no hook for such a substitution in HTML.

[Author]

Posts