Float blocks and percentage width in HTML and CSS

Description

The following code shows how to float blocks and percentage width.

Example


<!--from   www.  j  a v  a2  s. c om-->




<html>
<head>

<style type='text/css'>
div#container {
margin: 0 20px;
background: lightyellow;
}
div#float {
background: lightgrey;
float: left;
border: 1px solid black;
width: 75px;
height: 50px;
}
div#follow {
margin-left: 77px;
}
table {
border: 1px solid black;
width: 100%;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<div id='container'>
<div id='float'>
Float text.
</div>
<div id='follow'>
<table>
<tr>
<td>
Table text.
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Float blocks and percentage width in HTML and CSS

Home »
  HTML CSS Tutorial »
    Layout »
      Size

HTML CSS Tutorial Size
Compare height setting in inch and pixel in...
Compare width between pixel and inch measur...

Float blocks and percentage width in HTML a...