nowrap floating divs and horizontal scroll

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • dlite922
    Recognized Expert Top Contributor
    • Dec 2007
    • 1586
    #1

    nowrap floating divs and horizontal scroll

    This is just barely above my head when it comes to css.

    I have a div that needs to contain rows of floating divs, but I need each row not to wrap on to the next one and continue to go right. The user will use a overflow: auto scroll to scroll to see the rest of the divs.

    illustration:

    # = === = = === ===
    # = == = =
    # == =============== ===
    # =========

    if an "=" is a floating fixed-height div, how do I make it so it doesn't wrap when it is longer than the parent?

    This is for a similar app as a TV guide you see on your cable/sat tv.

    The channels remain on the right, but you can "scroll" horizontally to see what's playing later on in the day. You only see 2 hours at a time, but you can scroll to see the full 24 hours if you wanted to.

    Here's what my css

    Code:
    
.eventCont {
	position: relative;
	width: 820px;
	height: 600px;
	overflow-x: auto;
	overflow-y: hidden;
}


.event {	
	position: relative;
	float: left;
	width: 200px;
	height: 74px;
	overflow: hidden;
	border-left: 2px solid white;
	border-bottom: 1px solid white;	
}
    .eventContainer is the parent div and .event is the floating divs.

    I've tried many things among:

    white-space: nowrap; display + float + position combinations etc. with
    no-avail.

    The difficult part is, they all have to be in the same div so that there's only one scroll bar, otherwise I could put each row in a <td>.

    Thanks,





    Dan
    Tags: div nowrap
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      Hmm. Never tried this but I've seen some sites with horizontal sites. I'll have to look them up. Tried a couple things that didn't work. The only thing that limits this is the body so setting the body to something like 2000px width will do it but it would be nice if you didn't have to set a width.

      I'll have to think about this but I hate to think.

        Comment

        • dlite922
          Recognized Expert Top Contributor
          • Dec 2007
          • 1586
          #3
          Originally posted by drhowarddrfine
          Hmm. Never tried this but I've seen some sites with horizontal sites. I'll have to look them up. Tried a couple things that didn't work. The only thing that limits this is the body so setting the body to something like 2000px width will do it but it would be nice if you didn't have to set a width.

          I'll have to think about this but I hate to think.
          I don't mind the body being that wide, but how did you get that to work? I set the body tag to 2000 and it didn't affect it. Reason I think it doesn't is because the parent div is a fixed length, e.g. 500px.

          can you post your code?

          here's mine:

          Code:
          #parent {
	overflow: auto; 
	width: 500px; 
	border: 1px solid red;
}

.child {
	float: left; 
	width: 100px; 
	border: 1px solid green;
}
</style> 


<div id="parent">
	<div class="child">Test</div>
	<div class="child">Test</div>
	<div class="child">Test</div>
	<div class="child">Test</div>
	<div class="child">Test</div>
	<div class="child">Test</div>
	<div class="child">Test</div>
</div>
          Sorry to hurt your brain :D



          Dan

            Comment

            • dlite922
              Recognized Expert Top Contributor
              • Dec 2007
              • 1586
              #4
              RESOLVED

              Don't hurt yourself Dr H, I solved it.

              if you have 2 divs (grandParent, parent) within eachother and you have the fixed length floating divs (children) inside the parent you can accomplish a horizontal scroll if you have set the parent to a longer width than the grandParent. The children can float inside the parent without knowing the shorter width of the outter/grandParent div.

              if that confused you, here's the code:

              Code:
              <style>
#grandParent {

	overflow: auto; 
	width: 500px; 
	height: 50px;
	border: 1px solid red;
}

#parent{
	width: 2000px;   /* <-- this makes the grandparent have a horz scroll */
	border: 2px solid green;
}

.child {
	width: 100px;
	float: left;
	border: 2px solid blue; 
}
</style> 


<div id="grandParent ">
	<div id="parent">
		<div class="child">Event</div>
		<div class="child">Event</div>
		<div class="child">Event</div>
		<div class="child">Event</div>
		<div class="child">Event</div>
	</div>
</div>

                Comment

                • dlite922
                  Recognized Expert Top Contributor
                  • Dec 2007
                  • 1586
                  #5
                  By the way, if anyone else is looking for other solutions there's two other things you can do.

                  1. IFRAME (blegh!)
                  2. Let the Browser window have horz on a wide <body> (width="5000px" ); This is what the Dr. ordered in the second post above.

                  Thought I might add that,




                  Dan

                    Comment

                    Previous template Next
                    Working...