473,807 Members | 2,825 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Divs staying in a line and overflow-x.

1 New Member
This is confusing me like crazy. I am making a webapp for the iPad but I can't seem to figure out how to keep my divs in a line, then have overflow-x kick in once the divs have hit the edge of the screen. Let me explain some more. I have a div that I set the width at 100% so it will fill the screen width wise. Then I would put more divs inside this div, and give them a float:left so that they would be in a line. This works until it hits the end of the screen, but then it goes to the next line. I want it to stay in one line, and at the end of the screen, overflow-x kicks in so that I can scroll it horizontally. If someone can help me, that would be great. My code is below.

Code:

Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <link rel="stylesheet" type="text/css" href="css/style.css" />
  3. </head>
  4.  
  5. <div id="dock">
  6.  
  7.         <div id="image">
  8.         <a href="#" onclick="toggle_visibility('clock');" style="background-image:url(images/dock/clock.png);width:90px;height:127px;display:block;">
  9.         <p style="padding-top:100px;">Clock</p>
  10.         </a>
  11.         </div>
  12.  
  13.  
  14.         <div id="image">
  15.         <a href="#" onclick="toggle_visibility('clock');" style="background-image:url(images/dock/clock.png);width:90px;height:127px;display:block;">
  16.         <p style="padding-top:100px;">Clock</p>
  17.         </a>
  18.         </div>
  19.  
  20.  
  21. </div>
Code:

Expand|Select|Wrap|Line Numbers
  1. #image{
  2. height:127px;
  3. width:90px;
  4. float:left;
  5. margin:0 10px;
  6. text-align:center;
  7. }
  8.  
  9. #dock a{
  10. color:black;
  11. text-decoration:none;
  12. font-family:verdana;
  13. font-size:13px;
  14. }
  15.  
  16. #dock{
  17. width:100%;
  18. height:127px;
  19. overflow-x:scroll;
  20. overflow-y:hidden;
  21. }
Apr 27 '10 #1
1 2111
drhowarddrfine
7,435 Recognized Expert Expert
@pxlcreations
I have a div that I set the width at 100% so it will fill the screen width wise.
This is the default. You do not need to set it.

Normally, just setting the parent element to a float or overflow would make that work but I didn't see it happening. Any percentages you use are always relative to the parent/containing element which may be the body. Don't have time to play with it.
Apr 28 '10 #2

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

Similar topics

7
6887
by: kaeli | last post by:
I've been trying to get away from using tables as a layout tool, but I've just come across what I consider to be a serious liability. If I specify a width (minimum, really) in a div, such as #body { width: 90%; margin-left: 5%; margin-right: 5%; border: 1px solid navy; padding: 10px;
0
1494
by: Paul E Collins | last post by:
Hello. Suppose I use the following code to split a Web page into four separately scrollable quarters, each having 50% page width and 50% page height. Is it then possible to add *fixed*-height header and footer divs without possibly tipping the total page height over 100%? How would this be coded? (I ask mainly out of academic interest. No doubt this layout has usability issues.)
5
1355
by: Patrick | last post by:
Hi All, Background image is in place and a Div (yellow border) inside center Div column is positioned where I want it to be. Now the problem is that in Mozilla my third column div is dropping down below the wrapper but is exactly where it is supposed to be in IE. I've tried some clears and stuff like that but to no avail. What is causing this and how do I fix it? http://ocg6.marine.usf.edu/patrick/test_css/test.html
2
3981
by: Arnost Sobota | last post by:
Hello, Suppose I want to play with DIVs as if they were type characters. I have a series of fixed-height (width is of no importance) blocks which must follow one another from left to right, with a small margin between them. This is easily done with the CSS float:left property. But in this context, what is the proper way to do a Line Feed/Carriage Return? Take a look at the code below for example's sake. I have 8 DIVs and I want to...
19
6207
roula
by: roula | last post by:
I HATE DIVS AND DIFFERENT BROWSERS!!! i spent the whole day and night searching for a way to center align stupid divs, the problem is that the code is so sensitive, i lost my mind trying to make them work in a certain way (like some should scroll with a fixed background and others shouldn't scroll bla bla..) and the divs are nested and positioned in different ways and if i change something it gets messed up and what works in in IE doesn't work...
3
1626
roula
by: roula | last post by:
Hi, I have the following nested divs, that I am not able to set them transparent in IE, but in firefox they are working fine: <div id=&quot;dhtmlgoodies_scrolldiv&quot; style=&quot;background-color:transparent !important;position:relative;top:255px;left:257px;&quot;> <div id=&quot;scrolldiv_parentContainer&quot; style=&quot;background-color:transparent !important;&quot;> <div id=&quot;scrolldiv_content&quot; style=&quot;background-color:transparent...
21
2405
by: daydream | last post by:
yeah i need some help(such a common line) ,i have a menu and each link has its own div respectively and yeah obviously when u click the link the div shows, the problem is i would like each div to show no matter how many times you click the link for it and if you click on another one and when u go back to the original , the div would still show. at the moment i have partially done that, i click on item a ,that shows then when i click item b that...
2
2602
by: Hugh Oxford | last post by:
Dear all, I am here our of desperation, having RTFM'd and hacked for hours. What I want is simple. I want a left to right scrollable div, containing other divs. Eg.
4
2042
by: Steffan A. Cline | last post by:
I have a situation where I am making a calendaring solution and need to have 5 scrollable divs side by side in a week view but the week div needs to scroll left and right. As it sits now, unless the week div is set to something like 1500px, they wrap. The idea is not to have the browser scroll left and right. Unfortunately this needs to work in IE6 also. =( <div style="overflow:scroll; height: 500px; width: 700px;"> <div...
4
32617
dlite922
by: dlite922 | last post by:
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: # = === = = === === # = == = = # == ================== # =========
0
10626
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10372
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10374
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9193
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7650
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5546
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5685
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4330
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
3011
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.