Is there a way to make the width depend on the content?

[madnhate]

Is there any way to make the size of the width depend on the content within it? For example if I wanted to make a horizontal page and I had floated elements is there anyway to have the width be as wide as the amount of content that is within that div? Like auto width adjustment based on the content.

[traq]

...should happen automatically if the element is block-level, and floated (and, you don't set a non-"auto" width on the element anywhere else).

Please post a link to the page on your site that contains the problematic script so we can check it out.

[madnhate]

The thing the div takes in all the content it can but if it goes off the screen floated elements jump to the next line. I want a horizontal page so I don't want width size all the time as I would have to do that everytime I add a new element.

I want divs within the div floated but after it reaches the end of the screen instead of giving me horizontal scrolling which is what I want for the whole page it breaks into a new line of floated elements. From what I have learned you have to specify the width to have horizontal scrolling(as I dont' want the bars to be specific to the div such as with overflow-x: auto)


Jfiddle Code

Example of what I want

[traq]

that explains a lot. try using the display: table-* properties.

#row{ display: table-row; }
.cell{ display: table-cell; }
.content{
   height: 300px;
   min-width: 300px;
   margin: 1em;
}

<div id="row">
   <div class="cell">
      <div class="content">
         <p>Wrappers are ugly, I know; but it works.</p>
      </div>
   </div>
   <div class="cell">
      <div class="content">
         <p>and so on, and so forth, etc..</p>
      </div>
   </div>
</div>

http://jsfiddle.net/bbuMr/

[madnhate]

Thanks, I actually have never seen that code but recently I've seen people use it. Is it a new css code? Also would it be correct to display that as a table since it's not table data? So using this method I wouldn't have to set a width or something to the containing divs?

[traq]

no, actually, display: table (et.all) was added in CSS2.1. support is good, basically in all browsers, since IE8.

It's okay to use display: table for non-tabular data. It's not a table, after all. You're only asking the browser to give it the same layout model.

The .row and .cell elements would not need a specified width.
However, note that the .content does need something to control its width: otherwise, the layout would adjust so that all the .cells shrink to share the screen width (try removing the width property in the css in my jsfiddle to see the effect).

You don't need to use a fixed width; you could also use min-width/ max-width if it suited your layout better.

[madnhate]

oh thanks, so in my case the .content would be .post in the jfiddle you made? meaning the actual content within the container needs a width. That I'm fine with each of the list items or what not having a width but I didn't want my container to have a set width that I'd need to change every time. This way no matter how much content I have it will always float left and I will be able to scroll the stuff horizontally?

[traq]

...I'm not sure why I called it .post ... but, yes, each block of content goes inside that div, and each would need either a set width or a child element that would control the width (e.g., an image, or some block-level element with a minimum width).

note that each box could have a different width, too, if you preferred; they don't have to all be the same.

[madnhate]

I have to wrap the cell tag with each post? You called it .post because that's what I named it but you actually referred to it as .content before. Is there a way to align all the boxes at the top of cell row instead of bottom of cell row if the div boxes(posts) are different sizes? For example your jsfiddle everything is aligned to the top of the page is there a way to do that? I'm looking to not put it in the top of the page but the middle of page.

[traq]

1. .post is inside .cell is inside .row. yes, you must do that.

2. Stuff should be aligned to the top by default - perhaps you have some code elsewhere that defines otherwise? In any case, simply add vertical-align: middle; to the css for .cell. (Updated fiddle.)