• Locked
1 reply [Last post]
Thu, 2010-03-11 05:09
rahesh
rahesh's picture
User offline. Last seen 1 year 47 weeks ago. Offline
newbie
Timezone: GMT+5.5
Joined: 2010-03-11
Posts: 5
Points: 7

hi

I want to show the data(child divs) inside a div container horizontally. ie, when i enter new div inside the main container I want those to be displayed on left side of the previous div.I am pasting the code that i wrote to do that. Anybody please help me in this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Try overflow</title>
    <style type="text/css">
        .test{
            width:100%;
            height:200px;
            position:relative;
            float:left;
            outline:solid 1px red;
            overflow:auto;
        }
        #main{
            width:500px;
            height:200px;
            position:relative;
            margin:0 auto;
        }
        .child{
            position:relative;
            float:left;
            width:10%;
            height:100%;
            outline:solid 1px black;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="cont" class="test">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </div>
</body>
</html>

Here i have a main container(div 'main') of width=500 and height=200;. i have child div("cont") inside main container which fits the main container (width=100% and height=200px;).I have a set of child divs inside the div("cont").
I want to show a horizontal scroll to the div("cont") so that all the chil divs will show horizontally.

Thanks in advance

Rahesh

Top
Tags:
Thu, 2010-03-11 05:17
#1
Tony
Tony's picture
User offline. Last seen 4 hours 7 min ago. Offline
rank Moderator
Moderator
Timezone: GMT+10
Joined: 2003-03-12
Posts: 3705
Points: 1115

When you have a container

When you have a container with a set width, setting the width of the inner is a percentage of the container.
So 100% in this case should be 500px.

Put the overflow auto on #main and set the width of .test to something large enough to fit all the .childs

Your question may have already been answered, search and read before you ask.

Top
  • Locked