CSS content is wrapping rather than expanding the div

StackOverflow https://stackoverflow.com/questions/21445831

  •  04-10-2022
  •  | 
  •  

Question

I have this table:

<div class="info" id="item">
<div id="item_container">
    <div id="item" style="color: rgb(255,255,255); color: rgba(255,255,255,255); margin: 0 auto; width: auto; display:table; padding:3px; background: rgb(0,0,0); background: rgba(0,0,0,255);">
        <div id="table_row" style="display:table-row; width: auto;">
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
        </div>
    </div>
</div>

The full table is on the fiddle below and explains things a bit better. http://jsfiddle.net/k2mqB/12/

Some of the content is dynamically created and that is why you see some inline styling.

Now I know the first thing people might get hung up on is why I'm using divs to create a table. Well the problem I had was I needed a table but I didn't want the columns to line up so column 2 for all the rows is in the same place.

For example see below and in the fiddle, even if the cells differ in width from row to row notice that it still is rectangle in shape like a table as it expands to the furthest value (cheer) and doesn't end up looking like a few rows of lego. I could not figure out a way to do that with a table or a div but with both combined I could. It might not be true and there might be a way to do it better than this but I couldn't find it. This combination of divs styled as tables worked well for me. 

|--------|---------|----------|
| test   | happy days yep|----|
| another| test | is this|one   |
|this is the final|countdown|cheer|
|--------|---------|----------|---|

It might not be the perfect solution but CSS isn't my strong point. I find that I constantly end up adding things to control it and I get to the point I have so much stuff they interfere with each other and I'm not sure which to remove and which to add.

So if you look at my fiddle you will notice that the vertical scroll is working. But notice I have 12 cells on each row yet it wraps after 6 presumably cause of the width. I need to conserve the width on the outer column so what I want to do is have it do horizontal scroll too.

The reason is I have a 3 column layout on my site, this container is one of the 3, if it expands the height or width then it will move the columns out of order because one is higher or too wide.

Here is the CSS but that's also on the fiddle:

#item{
overflow:auto;
width:220px;
height:170px;
margin: 0 auto;
max-width: 92%;
background-color: #E6E4E4;
}

.info{
    padding:0px;
}

div{
    display: block;   
}

#item-container{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 220px;
    max-width: 220px;
    height: 170px;
    max-height: 170px;
    margin: 0px;
    padding: 0px;
}

#table-row{
    margin: 0px;
    padding: 0px;    
}

So a lot of data but my issue is simple, I need to have horizontal scroll so it keeps the dimension of the outer container.

Was it helpful?

Solution

First, ID's are unique, they cannot be used more than once on a page. Use classes instead.

Second, when you use float you take something out of the document flow. To get the parent to overflow horizontally, you need to remove that. Then instead of setting your cells to display: table-column, use display: table-cell. That should do it.

<div class="table_row" style="display:table-row; width: auto;">
  <div class="cell" style="font-size:7px; padding: 0px 2px; display:table-cell; width:auto;">40</div>
  ...
</div>

Demo

OTHER TIPS

I'm a big fan of using tables for displaying tabluated data.

In your CSS you have a width: 100px defined here;

#item{
overflow:auto;
width:100px;
height:100px;
margin: 0 auto;
max-width: 92%;
background-color: #E6E4E4;
}

You also have an inline style width: auto; which doesn't change anything.

Increase your width to around 200px and you will see that all 12 divs fit on a row.

Cheers,

Darren

You can't use an ID on a page more than once. It's an ID to point to only one element.

Use class instead. Example:

<div class="info" id="item">
    <div id="item_container">
        <div id="item" ... >
...
             <div id="cell" ... >
             <div id="cell" ... >

In the above, only the first #item and first #cell will be changed with your CSS.

More appropriate CSS/HTML demo

This demo shows the same page, but with the HTML and CSS using classes instead of IDs.

As first, you should alter your CSS rules:

#item {
    overflow: scroll;
    /* ... */
}

Then, you should change your HTML code to:

<div class="info" id="item">
  <div id="item_container">
    <div id="item" style="color: rgb(255,255,255); color: rgba(255,255,255,255); margin: 0 auto; width: auto; display:table; padding:3px; background: rgb(0,0,0); background: rgba(0,0,0,255);">
      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>


      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>


      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>


      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>


      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>


      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>


      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>


      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>
    </div>
  </div>
</div>

I think this way you will achieve what you want to achieve.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top