Reputation: 329
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
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