By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,740 Members | 844 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,740 IT Pros & Developers. It's quick & easy.

nowrap floating divs and horizontal scroll

dlite922
Expert 100+
P: 1,584
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

Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. .eventCont {
  4.     position: relative;
  5.     width: 820px;
  6.     height: 600px;
  7.     overflow-x: auto;
  8.     overflow-y: hidden;
  9. }
  10.  
  11.  
  12. .event {    
  13.     position: relative;
  14.     float: left;
  15.     width: 200px;
  16.     height: 74px;
  17.     overflow: hidden;
  18.     border-left: 2px solid white;
  19.     border-bottom: 1px solid white;    
  20. }
  21.  
  22.  
  23.  
.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
Feb 24 '09 #1
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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.
Feb 24 '09 #2

dlite922
Expert 100+
P: 1,584
@drhowarddrfine
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:

Expand|Select|Wrap|Line Numbers
  1.  
  2. #parent {
  3.     overflow: auto; 
  4.     width: 500px; 
  5.     border: 1px solid red;
  6. }
  7.  
  8. .child {
  9.     float: left; 
  10.     width: 100px; 
  11.     border: 1px solid green;
  12. }
  13. </style> 
  14.  
  15.  
  16. <div id="parent">
  17.     <div class="child">Test</div>
  18.     <div class="child">Test</div>
  19.     <div class="child">Test</div>
  20.     <div class="child">Test</div>
  21.     <div class="child">Test</div>
  22.     <div class="child">Test</div>
  23.     <div class="child">Test</div>
  24. </div>
  25.  
  26.  
Sorry to hurt your brain :D



Dan
Feb 24 '09 #3

dlite922
Expert 100+
P: 1,584
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:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <style>
  3. #grandParent {
  4.  
  5.     overflow: auto; 
  6.     width: 500px; 
  7.     height: 50px;
  8.     border: 1px solid red;
  9. }
  10.  
  11. #parent{
  12.     width: 2000px;   /* <-- this makes the grandparent have a horz scroll */
  13.     border: 2px solid green;
  14. }
  15.  
  16. .child {
  17.     width: 100px;
  18.     float: left;
  19.     border: 2px solid blue; 
  20. }
  21. </style> 
  22.  
  23.  
  24. <div id="grandParent ">
  25.     <div id="parent">
  26.         <div class="child">Event</div>
  27.         <div class="child">Event</div>
  28.         <div class="child">Event</div>
  29.         <div class="child">Event</div>
  30.         <div class="child">Event</div>
  31.     </div>
  32. </div>
  33.  
  34.  
Feb 25 '09 #4

dlite922
Expert 100+
P: 1,584
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
Feb 25 '09 #5

Post your reply

Sign in to post your reply or Sign up for a free account.