
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en">


<head>

<title>Inline elements with a width and floats | CSS Class</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<meta name="copyright" content="Copyright © 2007, Alan Gresley" />


<style type="text/css">


body {font-family: Tahoma, sans-serif;background: #f9f9f9;}


.wrapper {width: 400px;border:2px solid #00f}


.container {margin: 25px 0;}


.inlineblock {display:inline-block}


.floatleft {float: left;background-color:gray ;/*width:150px;*/width:50%;height:25px;}


.floatleft2 {float: left;background-color:gray ;/*width:300px;*/width:100%;height:75px;}


.box-bfc {height:150px;width:50%;background:#cce0f9;} /* blue box - new block formatting context */

</style>


</head>


<body>

<div class="wrapper">

<div class="container">


        <div class="floatleft"><!--  --></div>

        <div class="floatleft2"><!--  --></div>


        <div class="box-bfc inlineblock">display:inline-block x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x</div>


</div>


</body>

</html>