Divs staying in a line and overflow-x.

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

 <head>

<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
 
<div id="dock">
 
        <div id="image">

        <a href="#" onclick="toggle_visibility('clock');" style="background-image:url(images/dock/clock.png);width:90px;height:127px;display:block;">

        <p style="padding-top:100px;">Clock</p>

        </a>

        </div>
 
        <div id="image">

        <a href="#" onclick="toggle_visibility('clock');" style="background-image:url(images/dock/clock.png);width:90px;height:127px;display:block;">

        <p style="padding-top:100px;">Clock</p>

        </a>

        </div>
 
</div>

Code:

Expand|Select|Wrap|Line Numbers

 #image{

height:127px;

width:90px;

float:left;

margin:0 10px;

text-align:center;

}
 
#dock a{

color:black;

text-decoration:none;

font-family:verdana;

font-size:13px;

}
 
#dock{

width:100%;

height:127px;

overflow-x:scroll;

overflow-y:hidden;

}

Apr 27 '10 #1

Subscribe Post Reply

2098

drhowarddrfine

7,435

Expert 4TB

@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

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 ...

HTML / CSS

Combining fixed and proportional divs

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...

HTML / CSS

Continuing CSS learning Divs not staying put in Mozilla

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...

HTML / CSS

Floating DIVs and "carriage returns"

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...

HTML / CSS

How do i center align divs

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...

HTML / CSS

divs transparency problem

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="dhtmlgoodies_scrolldiv"...

HTML / CSS

show divs according to what the user clicks from a menu choice

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...

Javascript

Scrollable div, left to right, inner divs

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.

HTML / CSS

Divs in Divs

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...

HTML / CSS

nowrap floating divs and horizontal scroll

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...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

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,...

C / C++

AI Job Threat for Devs

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,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

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...

Microsoft Access / VBA

Divs staying in a line and overflow-x.

Similar topics