overflow help in css

Question

I have a div tag which is a main container and inside I have three more. now what I want to do is to put them to the right of everyone. I mean one div will be at the left side one in the middle and the third one on the right. but the only div which will be visible is the left first and the rest of them will not be visible. I used overflow hidden but not working.

here is my code. Please tell me what am I doing wrong.

<!DOCTYPE HTML>
<html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        body {
            margin: 0;
        }
        #header {
            width: 100%; height: 50px;
            background: aqua;
        }
        ul {
            list-style: none;
            margin: 0;
        }
        ul li {
            float: left;
            margin-right: 30px;
        }
        #contents {
            width: 100%; height: 600px; overflow: hidden;
            background: lightblue;
        }
        .contentsWrapper {
            display: block;
            width: 100%; height: 300px;
        }
        #contentsOne { background: red; }
        #contentsTwo { background: blue; }
        #contentsThree { background: grey; }
    </style>
    <title>title</title>
</head>
<body>
    <div id="header">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
    <div id="contents">
        <div class="contentsWrapper" id="contentsOne">One</div>
        <div class="contentsWrapper" id="contentsTwo">Two</div>
        <div class="contentsWrapper" id="contentsThree">Three</div>
    </div>
</body>
</html>

mcmwhfy · Accepted Answer · 2012-02-07 20:20:04Z

1

I don't know if I understood your problem, do you want something like this? http://jqueryui.com/demos/accordion/fillspace.html you can use jQuery plugin from demo for that and add on each part you want.

answered Feb 7, 2012 at 20:20

mcmwhfy

1,6966 gold badges36 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jorden van Foreest · Accepted Answer · 2012-02-07 15:54:39Z

0

Is this what you want?

Replace:

#contentsOne { background: red; }
#contentsTwo { background: blue; }
#contentsThree { background: grey; }

with:

#contentsOne { background: red; float:left;width:33%;}
#contentsTwo { background: blue; float:left;width:33%;visibility:hidden; }
#contentsThree { background: grey;visibility:hidden;}

answered Feb 7, 2012 at 15:54

Jorden van Foreest

6255 silver badges18 bronze badges

2 Comments

Om3ga Over a year ago

no. contentOne, Two and Three should have 100% width. But they will be stacked to the right of each div tag. so when the user clicks lets say FAQ links the contentsTwo will slide from right to left.

Vivek Chandra Over a year ago

@al0neevenings if you want sliding animation -- you need js.. and when it slides,the 1st column container will disappear,yes??

Collectives™ on Stack Overflow

overflow help in css

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related