CODEWITHSUNDEEP
htmlcss
saloua
saloua

Reputation: 329

Align divs vertically

I have a trouble with my html page. I have 3 sections : header, wrapper and footer, and I would like these three sections to be aligned vertically. But the problem is my section five isn't inside my section wrapper, but under it, at the same level than the section footer

Here is my HTML page :

<<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    </head> 
    <body>
        <!-- Header-->
        <section id="header">
        </section>
        <!-- Wrapper -->
        <section id="wrapper">
            <section id="initial">
            </section>
            <!-- Main -->
            <div id="main">
                <!-- Prices -->
                <section id="one">
                    <section id="two">
                    </section>
                    <section id="three">
                    </section>
                </section>
                <section id="four">
                </section>
            </div>
            <section id="five">
            </section>
        </section>
        <section id="footer">
        </section>
    </body> 
</html>


#wrapper {
    transition : transform 0.5s;
    padding: 44px 0 1px 0;
    border :0;
    font-size : 100%;
    font : inherit;
    vertical-align : baseline;
    box-sizing : border-box;
    display :block;
    height : 990px;
}

#footer {
    background-image: url("../img/logos.png");
    position:relative;
    display:block;
    background-repeat:no-repeat;
    height : 100px;
    font-size : 200%;
    text-align: center;
}

#main {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    display: block;
}

Upvotes: 1

Views: 81

Answers (1)

Aston
Aston

Reputation: 85

I believe this is the effect that you want:

HTML:

<header>
    <h1>Header</h1>
</header>
<div id="main" role="main">
    <section id="one">
        <h2>Section Heading One</h2>        
    </section>
    <section id="two">
        <h2>Section Heading Two</h2>        
    </section>
    <section id="three">
        <h2>Section Heading Three</h2>        
    </section>
    <section id="four">
        <h2>Section Heading Four</h2>        
    </section>
    <section id="five">
        <h2>Section Heading Five</h2>        
    </section>
</div>
<footer>
    <p>Footer</p>    
</footer>

CSS:

header
{
    width: 100%;
    height: auto;

    text-align: center;

    background-color: whitesmoke;
}

#main
{
    width: 100%;
    height: auto;

    background-color: khaki;
}

section
{
    width: 100%;
    height: auto;

    text-align: center;
    padding: 5px 0 5px 0;
}

footer
{
    width: 100%;
    height: auto;

    text-align: center;

    background-color: lightgrey;
}

Upvotes: 1

Related Questions