Divs staying in a line and overflow-x.

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • pxlcreations
    New Member
    • Apr 2010
    • 1
    #1

    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:

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

    Code:
    #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;
}
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      Originally posted by pxlcreations
      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:

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

      Code:
      #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;
}
      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.

        Comment

        Previous template Next
        Working...