CODEWITHSUNDEEP
html
yooouuri
yooouuri

Reputation: 2658

Width 100%, center wont work

I have a problem with HTML.

The #content div wont get the width.
div test is centered, and #menu should have 15% width and #info to.
I tried clear: both; but it wont work...
Maybe its a issue to width 100%.

<!doctype html>
<html>
<head>

<style>
html, body {
    height: 100%;
}

body {
    margin: 0px;

    overflow: hidden;
}

#wrapper {
    background-color: green;

    width: 100%;
    height: 100%;
    position: fixed;
}

#upper {
    height: 15%;

    background-color: blue;
}

#test {
    height: 85%;

    width: 100%;
    margin: 0px auto;
}

#test #menu {
    width: 15%;
    height: 100%;

    float: left;

    /* scroll bar */
    overflow-y: scroll;
    overflow-x: hidden;

    background-color: red;
}

#test #content {
    width: 70%;
    height: 100%;

    float: left;
}

#test #content {
    width: 15%;
    height: 100%;

    float: left;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="upper">
        upper
        <!-- logo etc -->
    </div>
    <div id="test">
        <div id="menu">
            menu
        </div>
        <div id="content">
            content
        </div>
        <div id="info">
            info
        </div>
    </div>
</div>
</body>
</html>

Could somebody help me!

Upvotes: 0

Views: 93

Answers (3)

avrahamcool
avrahamcool

Reputation: 14094

I would recommend the Use of inline-block on the element instead of floating. although it has is own faults..

http://jsfiddle.net/avrahamcool/gMMHL/1/

Upvotes: 0

Alex
Alex

Reputation: 14523

The problem is that you are overwriting your declarations:

#test #content {
    width: 70%;
    height: 100%;

    float: left;
}

#test #content {
    width: 15%;
    height: 100%;

    float: left;
}

Upvotes: 2

Phix
Phix

Reputation: 9920

Auto margins don't work with percentages. You'll have to give it a fixed dimension in order for the margin centering to work.

Upvotes: -1

Related Questions