Question

https://i.stack.imgur.com/SEFNd.png

I’m new to HTML5 so my code is likely to be messy, I’m trying to lay out block elements as shown above, but because I’ve chosen the body to float left it ends up below the slideshow. Here’s how I’ve coded it:

#container {
    height: 800px;
    width: 985px;
    position:relative;
}


    <article> 
    <span class="titlespacer">title text here</span></p>

  <ul>
    <li class="bodyspacer">Bullet</li>
    <span class="bodyspacer"><br>
      </span>
    <li class="bodyspacer">Bullet</li>
    <span class="bodyspacer"><br>
      </span>
    <li class="bodyspacer">Bullet</li>
    <span class="bodyspacer"><br>
      </span>
    <li class="bodyspacer">Bullet</li>
    <span class="bodyspacer"><br>
      </span>
    <li class="bodyspacer">Bullet</li>
</ul>
<aside>
    <div id="slideshow">
    <img src="images/polaroid1.jpg" width="320" height="332" class="polaroid">
    <img src="images/polaroid2.jpg" width="320" height="332" class="polaroid">
    <img src="images/polaroid3.jpg" width="320" height="332" class="polaroid">
  </div>
    </aside>
</article>

CSS

    #slideshow {
        height:  332px;
        width:   320px;
        float: none;
        clear:both;
    } 

.bodyspacer {
    font-weight: normal;
    font-size: 18px;
    font-family: 'droid sans', Arial, Helvetica, sans-serif;
    text-align: left;
    display: block;
    float: left;
    width: 460px;
    padding-right: 70px;
    line-height: 20px;
    margin-left: 80px;
    padding-left: 5px;
    list-style-image: url(../fishing/images/rod.png);
    clear: none;
    overflow: hidden;
}
.titlespacer {
    font-family: 'Arvo', Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    display: block;
    float: left;
    width: 435px;
    padding-left: 50px;
    padding-right: 50px;
    background-repeat: no-repeat;
    background-color: #1B378B;
    margin-right: 10px;
    height: 35px;
    color: #FFF;
    margin-top: 30px;
    padding-top: 10px;
    border: 3px double #FFF;
    margin-left: 40px;
}

Answer 1

you’ll need the following:

your css

#container {
width:960px;
position:relative;
}
header{
float:left;
}
article{
width:600px;
float:left;
}
aside{
width:360px;
float:left;
}
.clear{
clear:both;
}

your html5

<div id="container">
<header>your header</header>
<article>
    <section>your content</section>
</article>
<aside>
    <div id="slideshow">
        <ul>
        <li><img src="..."></li>
        <li><img src="..."></li>
        </ul>
    </div>
</aside>
<div class="clear"></div>
<footer>your footer</footer>
</div>

i hope it helped you!