Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 02-26-2012, 09:14 AM
Junior Member
 
Join Date: 02-19-12
Posts: 11
iTrader: 0 / 0%
Div inside another div, how to scroll horizontally?

I have a div where the images are accommodated within another div.
However scroll occurs only vertically.
How to scroll horizontally?
In the CSS I put:
overflow-y: hidden;
overflow-x: scroll;
But does not work.
Thanks.
 
Reply With Quote
  #2 (permalink)  
Old 02-26-2012, 09:59 AM
Contributing Member
Latest Blog:
None

 
Join Date: 01-06-12
Location: Jackson Mo
Posts: 250
iTrader: 0 / 0%
Lock down the height of the parent div and force the photos side my side.
__________________
HouseViewOnline: Real estate for Cape Girardeau, Jackson, Festus and St. Louis.
 
Reply With Quote
  #3 (permalink)  
Old 02-26-2012, 07:32 PM
Banned
Latest Blog:
None

 
Join Date: 05-01-06
Location: I live in the real world!
Posts: 329
iTrader: 0 / 0%
try using

overflow : auto;
 
Reply With Quote
  #4 (permalink)  
Old 02-26-2012, 08:33 PM
Junior Member
 
Join Date: 02-19-12
Posts: 11
iTrader: 0 / 0%
Scroll occurs only vertically...

Tks, Nealrm and an0n.

But...

Scroll occurs only vertically.
How to scroll horizontally?

CSS

Code:
.content_h05_v02 { float:left; width:970px; height:451px; } .content_h05_v02_h01 { float:left; width:970px; height:260px; margin-top:101px; overflow:hidden; } .content_h05_v02_h01_h01 { float:left; width:970px; height:260px; overflow-y:hidden; overflow-x:scroll; } .content_h05_v02_h01_h01_media { float:left; width:180px; height:120px; position:relative; margin:5px; }
HTML

Code:
<div class="content_h05_v02"> <div class="content_h05_v02_h01"> <div class="content_h05_v02_h01_h01"> <div class="content_h05_v02_h01_h01_media"> ... ... ... ... ... ... ... ... </div><!-- content_h05_v02_h01_h01_media --> </div><!-- content_h05_v02_h01_h01 --> </div><!-- content_h05_v02_h01 --> </div><!-- content_h05_v02 -->
 
Reply With Quote
  #5 (permalink)  
Old 02-27-2012, 10:27 PM
Banned
Latest Blog:
None

 
Join Date: 05-01-06
Location: I live in the real world!
Posts: 329
iTrader: 0 / 0%
Try this


Code:
.content_h05_v02_h01_h01_media { float:left; width:970px;; height:120px; position:relative; margin:5px; }
this *should* only show horizontal bar based on what you have. But remember to check cross browser compatibility because IE can be a pain.
 
Reply With Quote
  #6 (permalink)  
Old 02-29-2012, 04:32 AM
JohnnyS's Avatar
Contributing Member
 
Join Date: 07-05-11
Location: philippines
Posts: 312
iTrader: 0 / 0%
try to add white-space:nowrap on the container it will force the contents in one line of course if the elements are declared as display:inline or inline-block
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Menu suspended horizontally at the top of the page? webipsum Coding Forum 2 02-23-2012 02:57 PM
Scroll box with scroll button instead of bar UnP0ssible Coding Forum 7 04-05-2011 05:17 AM
scroll in Firefox outside swf heliosphan Coding Forum 0 01-06-2011 05:06 PM
horizontally aligning form elements netentropy Coding Forum 1 06-12-2010 01:23 PM
image in center horizontally and vertically jonathangalt Web Design Lobby 8 08-14-2008 10:43 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 02:14 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2014 Escalate Media




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.