Geek Answers Handbook

DIVs are not vertically aligned in horizontal scrolling DIV

I am trying to make a <div> only with horizontal scrolling, and I have achieved this using <span> with white-space: no-wrap; within the <div> with overflow-x: scroll; . The problem is that I cannot use paragraphs with text wrapping around these <span> s because it breaks the layout in Chrome.

This is what I want (works in Firefox) and what I have in Chrome:

In Chrome, only the first field in the horizontal scrolling of the DIV is aligned at the top, the other some of them are slightly lower. In Firefox, all fields are correctly aligned.

The problem occurs every time the paragraph text is wrapped inside <span> s.

This is my HTML and CSS:

 .info { width: 250px; height: 200px; float: left; } .list { height: 200px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } .item { height: 175px; width: 175px; display: inline-block; margin-left: 5px; overflow: hidden; /* without this, the layout breaks in Firefox, too */ } .item * { white-space: normal; } 
 <div id="listOne red"> <div class="info blue"> <p>Info regarding this list of items</p> </div> <div class="list orange"> <span class="item yellow"> <p>text</p> <p>more text, in another line, now wrapping</p> <p>and etc and etc</p> </span> <span class="item yellow"> <p>second item</p> </span> <span class="item yellow"> <p>third item</p> </span> <span class="item yellow"> <p>and more</p> </span> </div> <div class="clear"></div> </div>

Does anyone know how to fix this? Or does someone know another way to make this <div> scroll horizontally? (Im using a fluid layout, so my orange div has no fixed width).

+6
html css scroll
source share
5 answers

Fixed: -)

The problem was not line breaks, but vertical alignment. Thanks to tahdhaze09, which helped me deal with the problem, this is the solution I have:

 .item { height: 175px; width: 175px; display: inline-block; margin-left: 5px; /*overflow: hidden; without this, the layout breaks in FF too - REMOVED */ vertical-align:text-top; /* ADDED */ }

I don't know why, but overflow:hidden made inline elements align on top of Firefox. That is unnecessary. vertical-align:text-top fixed the problem in all major browsers.

+5
source share

Have you tried adding top: 0 to the list specification? (I can’t try here, only my thoughts).

0
source share

Just a shot in the dark, but can you try to remove all the empty space between the divs? (Without recesses).

And FYI, <p> inside the <span> will not be checked. This is probably not the root of your problem, but having the right HTML is always when looking for an error.

0
source share

Is it possible to change the .item class to position:relative with float:left so that they appear next to each other?

This works for me in FF / Chrome:

 .item { height: 175px; width: 175px; position: relative; float: left; margin-left: 5px; overflow: hidden; }
0
source share

I have no problem with your code in FF, Chrome or Safari.

This is the same code, but of course:

 <!DOCTYPE HTML> <html> <head> <title>Highlighting Elements</title> <style> .info { width: 250px; height: 200px; float: left; } .list { height: 200px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } .item { height: 175px; width: 175px; display: inline-block; margin-left: 5px; overflow: hidden; /* without this, the layout breaks in FF too */ } .item * { white-space: normal; } </style> </head> <body> <div id="listOne red"> <div class="info blue"> <p>info regarding this list of itens</p> </div> <div class="list"> <span class="item"> <p>text</p> <p>more text, in another line, now wrapping</p> <p>and etc and etc</p> </span> <span class="item"> <p>text</p> <p>more text, in another line, now wrapping</p> <p>and etc and etc</p> </span> <span class="item"> <p>text</p> <p>more text, in another line, now wrapping</p> <p>and etc and etc</p> </span> <span class="item"> <p>text</p> <p>more text, in another line, now wrapping</p> <p>and etc and etc</p> </span> <span class="item"> <p>text</p> <p>more text, in another line, now wrapping</p> <p>and etc and etc</p> </span> <span class="item"> <p>text</p> <p>more text, in another line, now wrapping</p> <p>and etc and etc</p> </span> <span class="item"> <p>text</p> <p>more text, in another line, now wrapping</p> <p>and etc and etc</p> </span> <span class="item"> <p>text</p> <p>more text, in another line, now wrapping</p> <p>and etc and etc</p> </span> </div> <div class="clear"></div> </div> </body> </html>
0
source share

More articles:


All Articles