overflow:hidden with variable 100% width

Question

I have some side by side lists in a container div. The container div needs to be a width of 100%.

Any lists within the container should overflow out of the window should they exceed the browser width.

The only way I can get this to work as desired is if I give my container a fixed px width.

I'm stuck and I'm sure it's something simple.

Please see: http://jsfiddle.net/sPKEp/7/

.small-list {
background-color:#797979;
display:block;
width:640px; /* <-- This at 640px behaves correct. I need this to be 100% though */
height:81px;
max-height:81px;
margin:0px;
padding:0px;
}
ul {
display:block;
float:left;
overflow:hidden;
height:81px;
max-height:81px;
width: 100px;
list-style-type: none;
padding: 0px;
margin: 0 5px 0 5px;
background-color:#c9c9c9;
}
li {
display:block;
padding:0px;
width: 100px;
height: 25px;
background-color:#2b2b2b;
border:1px solid #fff;
line-height:1em;
}

score 2 · Answer 1 · answered Nov 29 '12 at 07:43

2

Add white-space: nowrap to your .small-list and change your float: left ul's to display: inline-block's

http://jsfiddle.net/sPKEp/30/

But it seems like what you really want here is a <table>.

answered Nov 29 '12 at 07:43

chbrown

11,865
2
52
60

score 0 · Answer 2 · answered Nov 29 '12 at 07:38

Some change of your css as like this

.small-list {
background-color:#797979;
display:block;
width:640px; /* <-- This at 640px behaves correct. I need this to be 100% though */
height:81px; // remove this line
max-height:81px; // remove this line
margin:0px;
padding:0px;
overflow:hidden; // add this line
}
ul {
display:block; // remove this line
float:left;
overflow:hidden;  // remove this line
height:81px;
max-height:81px;
width: 100px;
list-style-type: none;
padding: 0px;
margin: 0 5px 0 5px;
background-color:#c9c9c9;
}
li {
display:block;
padding:0px;
width: 100px;  // remove this line
height: 25px;
background-color:#2b2b2b;
border:1px solid #fff;
line-height:1em;
}

Live Demo

score 0 · Answer 3 · answered Nov 29 '12 at 07:39

You could try this for the .small-list div but it depends on how you'd like the lists to be hidden.

.small-list {
  background-color:#797979;
  display:block;
  width:100%;
  height:81px;
  max-height:81px;
  margin:0px;
  padding:0px;
  overflow: hidden;
}

overflow:hidden with variable 100% width

3 Answers3