0

In the bookmark_matrix in this fiddle

http://jsfiddle.net/sjD24/14/

I'm trying to hide content outside of the 500 px width

by setting

overflow:hidden

I'm not getting the desired effect as it wraps to the next line instead.

MDN Reference

The two examples I've seen show overflow working with vertical content, I'm not sure if this implies it does not work with horizontal content.

Please note that I do not want it to wrap. Perhaps that would have been a better title.

6
  • If you want a flexible height on the bookmark matrix to allow lots of different types to be displayed then you will need to specifiy widths on the inner elements that are much wider than the container with the overflow:hidden on it, otherwise they will just wrap. Commented Nov 19, 2013 at 17:51
  • that's what I did and it worked, don't know why. Commented Nov 19, 2013 at 17:53
  • jsfiddle.net/sjD24/27 Commented Nov 19, 2013 at 17:56
  • Like this jsfiddle.net/j08691/sjD24/33? Commented Nov 19, 2013 at 17:58
  • It's because the inner elements if not having a specific width set will simply become the width of their parent element. Therefore wrapping anything within them. Setting a specific width stops that wrap and forces them beyond the width of their parent, making the overflow:hidden useful again. Commented Nov 19, 2013 at 17:59

1 Answer 1

4

You have no height set, so the div's height expands as needed. There's no overflow.

You could do something like this:

#bookmark_matrix{
    border: 1px dotted #222222;
    padding: 5px;
    width: 500px;
    overflow: hidden;
    height: 1em;
}
Sign up to request clarification or add additional context in comments.

3 Comments

but I want to prevent horizontal wrapping, while keeping the my height large.
I want to be able to extend my rows with out them effecting the rows below them.
In that case, add white-space: nowrap; to the .bookmark_row styles

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.