ansaurus

Question

Answer 1

A:

Have you tried adding top:0 to the list specification ? (can't try it out here, just my thoughts).

Edelcom 2009-12-30 13:54:20

Yeap. And nothing...

raphael 2009-12-30 16:01:30

And adding position:absolute (as I said before I 'm just reading this site, can't try it out because I'm not sitting on my development pc). Maybe I'm just stating obvious things, though.

Edelcom 2009-12-30 17:16:38

Yeap, afaik you can only set top, bottom, right and left attributes if you set a position. I tried absolute and relative positions, neither of the two worked. (don't worry about stating the obvious, perhaps it's not as that obvious for the one who is reading :). I know you're only trying to help)

raphael 2009-12-30 20:56:42

Answer 2

A:

Just a shot in the dark, but can you try removing all the white space between the divs? (No indentation).

And FYI, <p>s inside <span> s won't validate. That is probably not the root of your problem, but having valid HTML is always when hunting for a bug.

Pekka 2009-12-30 13:54:37

Thanks for the advice, but I'm already aware of the validation problem too. Actually I was using divs, but I couldn't find a way to make the horizontal scroll work. That's why I'm using spans:http://stackoverflow.com/questions/1015809"[...] only elements that behave as inline by default will behave properly when set to inline-block in Internet Explorer, so the inner containers need to be <span> instead of <div>."Just in case, I tried to remove the indentation. Didn't work too.

raphael 2009-12-30 16:08:24

I hear you, I've struggled with this stuff for ages :) but hey, with fixed widths a `float: left` should do just fine. Could it be that you're inheriting some styles from somewhere else?

Pekka 2009-12-30 17:35:28

no inheritance, this code is within the body tag (with no styles set). :p Using float were my first and intuitive idea, but, as I said to James Goodwin, the itens will wrap inside my div and fall below the other itens when they reach the right bound of the container.

raphael 2009-12-30 21:12:14

Answer 3

A:

Can't you just change the .item class to position:relative with a float:left so 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;
}

James 2009-12-30 13:59:28

I tried this, and unfortunately it doesn't work. The itens will wrap inside my div and fall below the other itens. I want them all in a line (setting overflow-y:auto in .list will show what happens). :T

raphael 2009-12-30 15:59:04

Answer 4

A:

I'm not having a problem with your code in FF, Chrome, or Safari.

It's the same code, but to be sure:

<!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>

tahdhaze09 2009-12-30 17:00:40

Ha! Actually your code didn't work either. Try to delete some text in one of your spans, leaving only one paragraph with only one word, and test it on Chrome. See? It goes down and the text that's inside aligns to the bottom. So well, it didn't fix my problem but it helped me to figure out the real problem. Thanks! :-D

raphael 2009-12-30 21:34:16

I see now. The span drops to the bottom! I tried a vertical-align and it doesn't work, either. What a pain in the a**.

tahdhaze09 2009-12-30 21:57:34

Answer 5

+1 A:

Fixed :-)

The problem was not the line breaks, it was the vertical alignment. Thanks to tahdhaze09 who helped me to figure out the problem, this is the solution I've got:

.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 forced the inline elements to align on top on Firefox. It is unnecessary then. vertical-align:text-top fixed the issue in all major browsers.

raphael 2009-12-30 22:09:23

Answer 6

A:

sorry ..

did not read it carefully

salah 2010-07-17 09:57:24

ansaurus

tags:

views:

answers:

Problem with horizontal scrolling div

related questions