CODEWITHSUNDEEP
htmlcss
Juliver Galleto
Juliver Galleto

Reputation: 9037

how to float the section tags in html5

this might be a wee easy question, and so, how to float - left the <section> tag? i tried to use float: left; but does not work or is it possible to align vertically the tag along with content of it?

here's my try.

html.

<div id="divcontent">
    <section>
        <h1>heyo</h1>
        <a href="dropitinmyass.html" ><p>asdasdasdasd</p></a>
    </section>
    <section>
        <h1>heyo</h1>
        <a href="dropitinmyass.html" ><p>asdasdasdasd</p></a>
    </section>
    <section>
        <h1>heyo</h1>
        <a href="dropitinmyass.html" ><p>asdasdasdasd</p></a>
    </section>
</div>

and here's the css.

#divcontent {overflow: auto; padding: 15px;}
#divcontent section {float:left; width: 300px;}

Upvotes: 3

Views: 11353

Answers (2)

Mark
Mark

Reputation: 6855

You can just float <section> like it was a <div> Best you give it a width too, so that floats are working.

section {
  float: left;
  width: 200px;
  display: block; /* for old browsers */
}

Upvotes: 0

Edward Ruchevits
Edward Ruchevits

Reputation: 6696

All HTML5 new elements are inline by default. You have to specify display:block for all of them, which are supposed to be displayed as divs.

#divcontent {overflow: auto; padding: 15px;}
#divcontent section {display: block; float: left; width: 300px;}

Upvotes: 3

Related Questions