CODEWITHSUNDEEP
csshtml
Jasper
Jasper

Reputation: 8705

stacking DIVs one below another vertically

HTML:

<div id="container">
    <div id="topdiv" />
    <div id="maindiv" />
</div>

CSS:

#topdiv {   
    height: 25%;   
    width:100%;  
    border:dashed;
}

#maindiv {  
    height: 75%;    
    width:100%;     
    border:solid;
}

Unable to stack DIVs (topdiv, maindiv) vertically one below the other. What am i doing wrong?

Upvotes: 1

Views: 10836

Answers (5)

Ankit Jain
Ankit Jain

Reputation: 1286

If you will not close div tag, next div start from same point of first div Close Div tag

<div id="container">
    <div id="topdiv"> </div>
    <div id="maindiv"> </div>
</div>

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157414

What you are doing wrong is really basic thing, you are self closing the div element tags, thus it renders incorrectly.

Correct Syntax

<div id="container">
    <div id="topdiv"></div>
    <div id="maindiv"></div>
</div>

You cannot self close the div tags

Demo

enter image description here

Click here to validate your HTML documents

Upvotes: 4

emerson.marini
emerson.marini

Reputation: 9348

First, when you use a percentage for width/height, it's based on the parent element (width/height), which you didn't define. Second, div is not a self-closing tag.

HTML

<div id="container">
    <div id="topdiv"></div>
    <div id="maindiv"></div>
</div>

CSS

html, body, #container {
    height: 100%;
}

#topdiv {   
    height: 25%;   
    width:100%;  
    border:dashed;
}

#maindiv {  
    height: 75%;    
    width:100%;     
    border:solid;
}

Working example: http://jsfiddle.net/QJC8x/

Upvotes: 0

user2365865
user2365865

Reputation:

html:

<div id="container">
    <div id="topdiv"> </div>
    <div id="maindiv"> </div>
</div>

css:

    #topdiv {
        height: 25%;
        width:100%;
        border:dashed;
    }

    #maindiv {
        height: 75%;
        width:100%;     
        border:solid;
    }

You must close the div tags

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this

http://jsfiddle.net/QVPA3/1/

<div id="container">
    <div id="topdiv"></div>       
    <div id="maindiv"></div>
</div>

CSS

html, body, #container {
    height: 100%;
}

Upvotes: 1

Related Questions