I'm having issue with CSS (first time experience), trying to align the sections I have created. I have a main <section>
, and sitting within several other nested <section>
's and an <aside>
. I'm trying to get the <aside>
to the right hand side of the page, whilst staying within in the coloured borders. Pictures attached show what im going for.
I've tried using float:left
& float:right
for the aside
and "blogcontainer"
sections in my CSS sheet, as well as just trying float:right
for the aside, but am not getting what I intended. I managed to get the aside to were i want it, but this then messes with my main <section>
. Can anybody help? The 'intended.png' is what im shooting for. Code below. Help much appreciated.
index.php:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="myStyle2.css" type="text/css" media="screen" />
<title>Page Title</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!--Page header goes here-->
<section id="top">
<header>
<!--Logo here -->
</header>
<!--Navigation Menu here -->
<nav>
<?php include('menu.php'); ?>
</nav>
</section>
<section id="main">
<section id="blogcontainer">
<section id="blogpost">
<article>
<header>
<h2>Blog Post Title Here</h2>
</header>
<p>Blog post contents here</p>
<article>
</section>
<section id="comments">
<article>
<header>
<h2>Comment Title 1</h2>
</header>
<p>Comment content 1</p>
</article>
<article>
<header>
<h2>Comment Title 2</h2>
</header>
<p>Comment content 2</p>
</article>
<article>
<header>
<h2>Comment Title 3</h2>
</header>
<p>Comment content 3</p>
</article>
</section>
<section id="commentsform">
<form action="#" method="post">
<h3>Post a comment</h3>
<p>
<label for="name">Name:</label>
<input name="name" id="name" type="text" required />
</p>
<p>
<label for="email">E-mail:</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Website:</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comment">Comment:</label>
<textarea name="comment" id="comment" required></textarea>
</p>
</form>
</section>
</section>
<aside id="rightaside">
<section>
<header>
<h3>Recent Posts</h3>
</header>
<ul>
<li><a href="#">Post 1</a></li>
<li><a href="#">Post 2</a></li>
<li><a href="#">Post 3</a></li>
<li><a href="#">Post 4</a></li>
</ul>
</section>
<section>
<header>
<h3>Recommended Sites</h3>
</header>
<ul>
<li><a href="http://www.stackoverflow.com">StackOverflow.Com</a></li>
</ul>
</section>
</aside>
</section>
<footer>
</footer>
</body>
</html>
CSS:
/* Makeshift CSS Reset */
{
margin: 0;
padding: 0;
}
/* Tell the browser to render HTML 5 elements as block. Add more tags as needed. */
header, footer, aside, nav, article {
display: block;
}
img.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
nav {
margin: 1%;
padding: 1%;
border: 5px solid purple;
}
nav li {
display: inline;
}
#main {
margin: 1%;
padding: 1%;
border: 5px solid black;
}
#blogcontainer {
width: 60%;
margin: 1%;
padding: 1%;
border: 5px solid gold;
}
#blogpost {
margin: 1%;
padding: 1%;
border: 5px solid green;
}
#comments {
margin: 1%;
padding: 1%;
border: 5px solid grey;
}
#comments > article {
margin: 1%;
padding: 1%;
border: 5px solid red;
}
#commentsform {
margin: 1%;
padding: 1%;
border: 5px solid yellow;
}
#rightaside {
float: right;
width: 20%;
margin: 1%;
padding: 1%;
border: 5px solid blue;
}
This is what is intended below. Above are the adverse results.