Hi,
As far as I can see, there is plenty of room for my
<section class="rightside"> to display to the right of the
<article>
The containing section is 1000px wide and the
<article> is 600px and the <section.rightside> is only 300px
For some reason the <section.rightside> doesn't go to
the rightside but insists on displaying underneath the <article>
See it here:
My Site
Here is the HTML:
PHP Code:
<header>
<section>
<h1>Great Lobster Resturants</h1>
<h2>The Best Lobster Eating Guide</h2>
</section>
</header>
<section class="container">
<article>
<h1>Rod and Line Care</h1>
<section class="meta">
<p>By Author: John Thomas <span class="time">25th August 2012</span></p>
</section>
<p>
Intro
</p>
<aside>
This is the pullquote - a nice little quotation to peak interest - 80 chars
</aside>
<p>
The main article
</p>
<p>
Conclusion
</p>
</article>
<section class="rightside">
<div class="cats">Categories</div>
<nav>
<ul><li><h3><a href="#">Fishing</a></h3></li>
<li><h3><a href="#">Dreams</a></h3></li>
<li><h3><a href="#">Catering</a></h3></li>
<li><h3><a href="#">Cooking</a></h3></li>
<li><h3><a href="#">Loose Weight</a></h3></li>
</ul>
</nav>
<div class="cats">Helpful Offers</div>
<div>
<ul>
<li>This is an advert block</li>
</ul>
</div>
<div class="cats">Useful Links</div>
<nav>
<ul><li><h3><a href="#">Fishing</a></h3></li>
<li><h3><a href="#">Dreams</a></h3></li>
<li><h3><a href="#">Catering</a></h3></li>
<li><h3><a href="#">Cooking</a></h3></li>
<li><h3><a href="#">Loose Weight</a></h3></li>
</ul>
</nav>
</section>
</section>
<footer>
<br>Footer<br>
</footer>
</body>
</html>
And the CSS:
Code:
* {
margin:0 0;
padding:0 0;
}
html{
height:100%;
font-family:helvetica;
background:#FFFFFF;
}
h1 {
font-family:helvetica;
font-size:20px;
color:#000000;
}
h2 {
font-family:helvetica;
font-size:16px;
color:#000000;
}
h3,h4,h5,p,li,a {
font-family:helvetica;
}
header, footer {
display:block;
width:1060px;
margin:0 auto;
}
header {
height:200px;
background: blue;
border-radius:0px 0px 12px 12px;
-moz-border-radius:0px 0px 12px 12px;
-webkit-border-radius:0px 0px 12px 12px;
}
header section {
display:block;
width:1000px;
height:150px;
background:#FFFFFF;
padding:20px;
margin:0 0;
margin-left:10px;
border-radius:0px 0px 12px 12px;
-moz-border-radius:0px 0px 12px 12px;
-webkit-border-radius:0px 0px 12px 12px;
}
section.container {
display:block;
width:1000px;
margin:0 auto;
margin-top:20px;
}
aside {
display:block;
float:right;
width:140px;
background:green;
font-family:giorgia;
font-style:italic;
font-size:32px;
color:#DA1C1C;
line-height:25px;
padding:15px;
margin:20px;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
section.rightside{
display:block;
width:300px;
}
.cats {
text-align:center;
font-size:20px;
}
section.rightside ul {
margin-bottom:20px;
padding:20px;
list-style:none;
border:1px solid #AAA;
border-radius:12px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
background:#FFF;
min-height:200px;
}
section.rightside ul li {
margin:5px 5px;
padding:0 0;
position:relative;
}
article {
width:600px;
margin:10px 0;
}
article p {
font-size:13px;
line-height:16px;
margin:10px 0;
padding-right:20px;
}
footer {
display:block;
clear:left;
height:100px;
background:red;
margin:0 auto;
}
Of course all that can be seen in the source code, but I put it here for convenience.
Can anyone see why the <section.rightside> is not on the right. ??
I don't think it needs a float because it should go there as part of the natural flow.
Must have done something wrong
Thanks.
.
__________________
If you want to attract and keep more clients, then offer great
customer support.
Support-Focus.com. automates the process and gives you a
trust seal to place on your website.
I recommend that you at least take
the 30 day free trial.
Before you post, read our: 
