Jump to content

<aside> is overlaying <section> ?


vmars316
 Share

Recommended Posts

I'll try again with no <code> .

Maybe I'll try a Quote .

 

<!DOCTYPE html>

<html>
<head>
<title>Sample HTML5 Layout</title>
<!--
-->
<style>
body {
margin: 0 auto;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}
article
{
padding:5px;
border:dotted 3px #ff006e;
margin-top:5px;
}
header
{
padding:0px;
text-align:center;
}
aside
{
margin-top:5px;
background-color:#f0eaea;
padding:5px;
text-align:center;
font-style:italic;
border:double 3px #b200ff;
float: left;
width: 20%;
}
section
{
padding:5px;
border:dashed 3px #0026ff;
margin-top:5px;
margin-left:5px;
width:-50%;
}
footer
{
padding:5px;
text-align:center;
font-weight:bold;
}
nav
{
text-align:center;
}
ul li
{
display:inline;
padding-left:5px;
padding-right:5px;
text-align:left;
font-size:16px;
font-weight:bold;
}
</style>
</head>
<body>
<header>
<h1>This is page heading</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<article>
<h1>This is article heading</h1>
<p>
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
</p>
</article>
<aside>
<figure>
<img src="myFavs-Screenshot.png" height="100px" width="100px" />
<figcaption>Figure caption goes here</figcaption>
</figure>
<p>
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
</p>
</aside>
<!-- <aside>
<h1>This is a section heading</h1>
<p>
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
</p>
</aside>
-->
<section>
<h2>This is a section is next to and to the right of an aside+figure </h2>
<p>
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
</p>
</section>
<footer>
<hr />
Copyright © 2013. All rights reserved.
</footer>
</body>
</html>

 

Thanks...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...