CODEWITHSUNDEEP
csshtml
Kallol Das
Kallol Das

Reputation: 141

html5 tags or float property not working properly

I am trying to design a layout with html5 tags. they work when I don't use float. But when I use float they don't work. when I use "float:left" property and want to show articles inline, the articles come out from section. But when I don't use "float" property the articles display as block and remain inside the section. What I have to do if I want to show my articles inline, Not as block? Codes are below. 

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

<style>
body {
font-family: Verdana, sans-serif; 
font-size:0.8em;
}

header, nav, section, footer{
border:1px solid grey; 
margin:5px; 
padding:8px;
}

article{
border:1px solid grey; 
margin:5px; 
padding:8px;
width: 28%; 
float: left; 
}

nav ul {
margin:0;
padding:0;
}
nav ul li {
display:inline; 
margin:5px;
}

footer{
clear: both; 
}
</style>
</head>

<body>

<header>
<h1>HTML5 Skeleton</h1>
</header>

<nav>
  <ul>
    <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
    <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
    <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
  </ul>
</nav>

<section>

<h2>Famous Cities</h2>

    <article>
    <h2>London</h2>
    <p>London is the capital city of England. It is the most</p>      
    </article>

    <article>
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
    </article>

    <article>
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center </p>
    </article>
</section>

<footer>
    <p>&copy; 2014 W3Schools. All rights reserved.</p>
</footer>

</body>
</html>

Upvotes: 0

Views: 91

Answers (2)

Imran Bughio
Imran Bughio

Reputation: 4941

It has nothing to do with HTML5 elements specifically!

It's float, when ever you use float the elements get out of normal document flow.

Solution: Use famous clearfix hack.

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
    line-height: 0;
}
.clearfix:after {
    clear: both;
}

Apply class clearfix on the parent of elements that are floated in your case section tag.

DEMO

Upvotes: 0

Shomz
Shomz

Reputation: 37701

I believe you're looking for inline-block display:

article {display: inline-block}


body {
font-family: Verdana, sans-serif; 
font-size:0.8em;
}

header, nav, section, footer{
border:1px solid grey; 
margin:5px; 
padding:8px;
}

article{
border:1px solid grey; 
margin:5px; 
padding:8px;
width: 25%; 
display: inline-block; 
}

nav ul {
margin:0;
padding:0;
}
nav ul li {
display:inline; 
margin:5px;
}

footer{
clear: both; 
}
<header>
<h1>HTML5 Skeleton</h1>
</header>

<nav>
  <ul>
    <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
    <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
    <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
  </ul>
</nav>

<section>

<h2>Famous Cities</h2>

    <article>
    <h2>London</h2>
    <p>London is the capital city of England. It is the most</p>      
    </article>

    <article>
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
    </article>

    <article>
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center </p>
    </article>
</section>

<footer>
    <p>&copy; 2014 W3Schools. All rights reserved.</p>
</footer>

Upvotes: 1

Related Questions