Advanced Search

Results 1 to 10 of 10

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

  1. #1
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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.

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,624
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    ...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.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  3. #3
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,624
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    that explains a lot. try using the display: table-* properties.
    Code:
    #row{ display: table-row; }
    .cell{ display: table-cell; }
    .content{
       height: 300px;
       min-width: 300px;
       margin: 1em;
    }
    HTML Code:
    <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/
    Last edited by traq; 04-16-2012 at 04:12 AM.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  5. #5
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,624
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  7. #7
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

  8. #8
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,624
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    ...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.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  9. #9
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by madnhate; 04-21-2012 at 10:08 PM.

  10. #10
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,624
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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.)
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •