How do I make sections push other sections down depending on size?

[JustRob]

Hi,

 

So on my content page I have a couple of different sections in the same area, but the problem is the text of the top part goes through the heading of the bottom part. I've set a margin to position the bottom section, but it doesn't change dynamically. I want it to position itself depending on how much text is in the area above, and push it down if need be.

 

This is the problem:

 

 

Relevant HTML:

<section id="content">
<h1>Today on Gaming World</h1><br>
<section id="highlights">
<a href="http://gamingw.net/games/632"><img class="thumb" src="images/game-632.jpg" width="80" height="65">
<h1>Coastercraft Gold</h1></a><img class="icon" src="images/maker-rmxp.gif">
<p>Enter the World of CoasterCraft. Builds rides, hire staff and do all sorts of other 
    Theme-park managemently-things in this fun and refreshing game.</p>
<br><br>
<a href="http://gamingw.net/games/631"><img class="thumb" src="images/game-631.jpg" width="80" height="65">
<h1>Cliche</h1></a><img class="icon" src="images/maker-gamemaker.gif">
<p>Fight monsters explore dungeons and find valuable treasure in this dungeon raider game.
    Reminiscent of the classic arcade game Gauntlet.</p>
<br><br>
<a href="http://gamingw.net/games/630"><img class="thumb" src="images/game-630.jpg" width="80" height="65">
<h1>High Voltage</h1></a><img class="icon" src="images/maker-gamemaker.gif">
<p>A neat Breakout clone with quite a few gameplay tweaks. Definitely worth checking out.</p>
<br><br>
<a href="http://gamingw.net/games/629"><img class="thumb" src="images/game-629.jpg" width="80" height="65">
<h1>Final Fantasy: Chaos Shadows</h1></a><img class="icon" src="images/maker-rm2k3.gif">
<p>A thousand years ago, the magical kingdom of Heldanna was mysteriously destroyed, most of its
    history remains unknown. Now, in the present, an archaeological group has found one of Heldanna's
    greatest citadels.</p>
</section>

<section id="news">
<h1>News</h1>
<a href=""><img class="avatar" src="images/noavatar.gif" width="33" height="33">Review update #126,251,754</a><br>
<p>You should know the drill by now.</p>
<br><br>
<a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">I'm alive.</a><br>
<p>And angry.</p>
<br><br>
<a href=""><img class="avatar" src="images/noavatar.gif" width="33" height="33">Well now, what do we have here?</a><br>
<p>I do believe that it's a review update.....</p>
<br><br>
<a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">I blame society.</a><br>
<p>Games! Games? Games?</p>
<br><br>
<a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">Fade may have lied.</a><br>
<p>Have I?</p>
<br><br>
<a href=""><img class="avatar" src="images/bartavvy.gif" width="33" height="33">THE GAME DROUGHT IS OVER!</a><br>
<p>Click here for lots of exciting new games!</p>
<br><br>
</section>
<br>
<section id="gameupdates">
<h1>Game Updates and Articles</h1>

</section>

</section>

CSS:

#content {
	margin-left: 130px;
	width: 706px;
	height: 700px;
	padding: 5px;
	font-size: 100%;
	text-align: left;
	background-color: #eee;
	vertical-align: top;
}

#content h1 {
	padding: 5px;
	font-weight: bold;
	background-color: #6272A0;
	font-size: 13px;
	margin-bottom: 2px;
	color: #FFFFFF;
	margin: 0px;
}

#highlights {
	width: 55%;
	float: left;
}

#highlights p {
	margin-left: 90px;
	margin-right: 30px;
}

#highlights img.thumb {
	margin-left: 5px;
	float: left;
	border: 1px #00366C solid;
}

#highlights img.icon {
	margin-left: 5px;
	float: left;
}

#highlights h1 {
	display: inline;
	color: #00366C;
	font-weight: bold;
	font-size: 10px;
	background: none;
}

#highlights a {
	color: #00366C;
}

#news {
	float: right;
	width: 45%;
}

#news h1 {
	font-weight: bold;
	background-color: #828CAA;
	font-size: 13px;
	color: #FFFFFF;
	margin-bottom: 5px;
}

#news a {
	color: #00366C;
	margin-top: 3px;
	padding-left: 5px;
	font-weight: bold;
}

#news p {
	padding-left: 5px;
	display: inline;
}

#news .avatar {
	vertical-align: top;
	margin: 0;
	float: left;
	border: 1px #00366C solid;
}

#gameupdates {
	margin-top: 40%;
}

#gameupdates h1 {
	background-color: #828CAA;
}

[Ingolme]

Just set "clear: both" in a CSS selector that targets the "Game Updates and Articles" heading.

[dsonesuk]

Which will mean the gameupdates section element, will still be merging into news section but hey the headers ok.

 

Apply to gameupdates section instead.

[Ingolme]

I was just going by what was in the image. I didn't check through the code. But assuming that everything in the section follows the header, putting it on the header would work equally well.

[dsonesuk]

Actually it wouldn't because game upadates section has top margin, using header means you would have to adjust header top margin to get correct positioning achieved by margin of section.