CODEWITHSUNDEEP
csscss-floatwhitespace
Matrym
Matrym

Reputation: 17053

Preventing float wrapping without setting parent width

I would like to have several items stack horizontally infinitely (in one row), without setting the width of their parent container. I'm fully aware that setting the container div to width:1000px; will make them stack, but for various reasons I do not want to use this solution. Are there any alternatives?

<html>
<head>
<style type="text/css">
div {white-space:nowrap; clear:none;}
div div {width:300px; border:1px solid black; float:left; display:inline;}
</style>
</head>
<body>
<div>
    <div>x</div>
    <div>x</div>
    <div>x</div>
    <div>x</div>
    <div>x</div>
    <div>x</div>
</div>
</body>
</html>

Upvotes: 1

Views: 645

Answers (2)

Do Not Track Me
Do Not Track Me

Reputation: 2286

  display: inline;
  white-space: nowrap;
  float: none;

and on a parent element you'll need

  overflow:hidden;

Upvotes: 1

joelt
joelt

Reputation: 2680

It's not necessarily a robust solution, but if you can get exactly 300px of content in each of the inner divs, you could remove the float and width properties. Maybe include a 1x300 transparent image, and make sure you don't have too much text? Maybe

div.dummycontent {float:left; width:200px; background-color:Blue; }
<div class="dummycontent">&nbsp;</div>

Or if the reasons for not setting a width are primarily along the lines of not knowing until runtime what the size will need to be, maybe calculate with JavaScript, and set it then?

Upvotes: 0

Related Questions