Problem with a section not flowing properly

HTML & CSS
1

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:


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

* {
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. :slight_smile:

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 :blush:

Thanks.

.

2

You can try something like this:


section.container {
    display: block;    /* unnecessary; can be deleted. */
    margin: 20px auto 0;
    [color=blue]overflow: hidden;[/color]   /* ADD. */
    width: 1000px;
}

article {
    [color=blue]float: left;[/color]        /* ADD. */
    margin: 10px 0;
    width: 600px;
}

section.rightside {
    display: block;     /* unnecessary; can be deleted. */
    [color=blue]float: right;[/color]       /* ADD this property [b]OR ...[/b] */
    [color=blue]margin-left:700px[/color]   /* [b]OR[/b] ADD this property (not both). */
    width: 300px;
}

footer {
    background: none repeat scroll 0 0 red;
    display: block;     /* unnecessary; can be deleted. */
    height: 100px;
    margin: 0 auto;
}
3

hmmmm…

actually your structure is a bit iffy. Generally floats must be placed FIRST in the markup, so as Ron pointed out you would need to float article {
float: left; }. Of course the problem there would be that if you had more than one article they would begin to stack horizontally, untill they rapped around and then your right side would appear to the right or bellow the articles. so what you need is a wrapper element for the articles , which you then would float left. at this point floating the right side would be optional.

I didn’t see if you had a html5 reset or not, but I disagree with ronpat about display:block being optional ( unless you are floating the element). The reason I bring this up is that (other than IE which of course just FUBARs everything) older, non HTML5 capable UAs interpret unknown tags as INLINE. so having a reset is still a prudent idea.

4

Thanks for the note about the unknown tags, Ray. I didn’t realize they were interpreted as inline; thought they were interpreted as block.

Cheers