Forums

lyleyboy

I have a row of DIV's which I am floating left to make them display inline.

What I'd like to do is to get them to flow outside of their container to the right and then with overflow get a horizontal scrollbar.

At the moment the div's wrap as they get to the end of the containing div.

<!DOCTYPE html>

Horiz

#content{
width: 500px;
margin: 0 auto;
height: 100px;
border: 1px solid green;
overflow-x: visible;
overflow: hidden;
white-space: nowrap;
}
.h{
border: 1px solid #000;
display: block;
float: left;

height: 80px;
width: 200px;
}

It all goes here

It all goes here

It all goes here

It all goes here

It all goes here

Paulie_D

Please put this in a JSFiddle or provide a link as it's really hard to understand what you are trying to achieve.

If you want divs to flow outside of a container then why on earth are you putting them in a container?

krysak4ever

@lyleyboy

use
http://jsfiddle.net/

do you aim for such result ?
http://jsfiddle.net/krysak4ever/pbpZz/5/

Paulie_D

I think I can visualise what you're after but it's not going to work the way you think it will with pure CSS based on the markup you have.

I suspect you're really going to need some sort of 'Slider' which will rely on javascript.

Of course, someone better than me will now come along and prove me completely wrong.

EDIT: I was encouraged by 'overflow-style' but then found out no-one supports it yet.

: http://www.w3schools.com/cssref/css3_pr_overflow-style.asp

Adman

To position the div's to the left and so the content will have a scroll you would just need have only overflow turned on for x. e.g overflow-y:hidden; then also make sure the content div is big enough to fit the paragraphs or content inside it. So if you have four paragraphs that have a width of 200px each you would need a box of 808px (assuming you have the borders. Check out the jsfiddle to see. Is this what you were looking for?

http://jsfiddle.net/ZnpZH/2/

Paulie_D

@Adman If the content box is wide enough for all the divs inside it then the scroll won't do anything. If the container isn't wide enough then the the floats will step down

I think he's after a set of say 5+ divs with only the middle 4 showing but being able to scroll left & right to see the others....but I don't think you can do that with CSS.

Of course, I could be wrong.

Adman

@Paulie_D oops you are correct. my browser was cutting off some so it was allowing it to scroll.

Adman

@lyleyboy

Semantically, why not put it as a list? It works with css if you use an unordered list.

http://jsfiddle.net/ZnpZH/4/

Paulie_D

@Adman That's a nice solution but I have the feeling that he's going to want to put a lot of content in the divs which might not work in a list format.

Although, of course, I THINK under HTML5 you can put divs in a list...but I may be mis-remembering that.

wolfcry911

@Paulie_D, you can put divs in a list-item under html4.
@lyleboy, you'd need to know the total width of all the floats and give that width (or wider) to their parent and then scroll the overflow on its parent, like this (not tested):

<div id="containment">
  <div id="scroller">
    <div class="slidepart">
      <h1>Heading</h1>
      <p>Here is some content</p>
    </div>
    <div class="slidepart">
      <h1>Heading</h1>
      <p>Here is some content</p>
    </div>
    <div class="slidepart">
      <h1>Heading</h1>
      <p>Here is some content</p>
    </div>
    <div class="slidepart">
      <h1>Heading</h1>
      <p>Here is some content</p>
    </div>
    <div class="slidepart">
      <h1>Heading</h1>
      <p>Here is some content</p>
    </div>
  </div> <!-- end scroller -->
</div> <!-- end containment -->

#containment {
    width: 800px;
    height: 400px;
    overflow-x: scroll;
    }

#scroller {
    width: 3010px;
    height: 380px;
    }

.slidepart {
    width: 600px;
    height: 300px;
    padding: 30px 0;
    border: 1px solid #000;
    float: left;
    }

treehouse : what would you like to learn today?

Forums

Horizontal Scroll