CODEWITHSUNDEEP
html
paulyay
paulyay

Reputation: 67

HTML5 block positioning

https://i.sstatic.net/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;
}

Upvotes: 0

Views: 7138

Answers (1)

raymond.idema
raymond.idema

Reputation: 210

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!

Upvotes: 1

Related Questions