JustRob Posted February 24, 2016 Share Posted February 24, 2016 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; } Link to comment Share on other sites More sharing options...
Ingolme Posted February 26, 2016 Share Posted February 26, 2016 Just set "clear: both" in a CSS selector that targets the "Game Updates and Articles" heading. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 27, 2016 Share Posted February 27, 2016 Which will mean the gameupdates section element, will still be merging into news section but hey the headers ok. Apply to gameupdates section instead. Link to comment Share on other sites More sharing options...
Ingolme Posted February 27, 2016 Share Posted February 27, 2016 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 27, 2016 Share Posted February 27, 2016 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now