Log in

View Full Version : Divs staying in a line and overflow-x.


pxlcreations
04-27-2010, 11:18 PM
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.



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




#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;
}
BLiZZaRD
04-28-2010, 12:44 AM
Your problem is here:



overflow-x:scroll;
overflow-y:hidden;


According to the spec "... some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’ ...".

Basically it means:



All browsers seem to further reduce the number of combinations giving different results:

* In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.
* In IE7, IE8 ‘visible’ becomes ‘hidden’ when combined with ‘hidden’.
* IE6 seems to render all combinations differently, but of course here ‘visible’ means ‘expand’ the box (in the specified direction) to enclose the content


Try changing both to auto, or both to scroll. Or just use overflow:auto.
BLiZZaRD
04-28-2010, 12:50 AM
I just thought of something else... you have the width set to 100%, of the container div. This doesn't include margins and padding. so technically you are dealing with < 100%. But also the 100% is the size of the viewport, not including scrolls. You have divs inside the div which are in themselves containers and not counted as true content, so the divs force themselves to fit in the container div, and can't at 100% so they drop to the next line.

So, you may want to set your width to 150% or 500% so they fit, with the scroll.
pxlcreations
04-28-2010, 08:24 PM
Thank you for the help, except I found the solution. It involves a div inside the overflow div with a huge width.
guilo
05-04-2010, 05:33 AM
hey pxlcreation, thanks for your note.

I'm trying to do pretty much the exact same thing.
Was this the only way you could get the inner DIV to overflow? By setting the containers WIDTH?
I've gotten to the same point as you on my own, but I want the width of the container to be based on it's contents, and setting the HEIGHT doesn't seem to help.

I Have a container DIV with the OVERFLOW set, and another DIV inside with a width of 10000px, which will contain a set of thumbnails (each in their own DIV, FLOAT:LEFT). I then made this a thumb-scroll using some JAVA to change the scrollLeft for that inner DIV.

It works perfectly fine now, but I want the WIDTH on the container to be more dynamic, and not static?
Did you think of anything, or work around the fixed width?

CSS Sample:

#scroller {
width:800px;
height:125px;
overflow:hidden;
float:left; /*This aligns to other floating DIVs/*
}

#scroller_mask {
width:10000px; /*I want this value to be automatic*/
height:65px;
}

#thumb {
width:125px;
height: 125px;
float:left;
}