floating to right div not showing chosen width

Question

I have an div that is floating to the right with a width of 740px set up in css. Displaying in the browser I don't see a 740px width, what is going wrong? Placing a H1 text inside doesn't make the div 740px wide; it only shows the width of the text.

While making it float to the left, it has the total width of 740px. What am I missing here of the concept of floating?

<div id='banner'>
  <h1>Website Title</h1>
</div>

div#banner
{   
padding: 0px;
margin: 5px;


border-style: solid;
border-width: 1px;
border-color: blue;

width: 740 px;
height: 310 px;
display: inline-block;
float: right;
text-align:left;
}

I can fix it with the use of min-width, but that feels more like a fix then solving the problem why the div isn't at 740px wide.

Thanks for helping!

Answer 1

Your css problem you use width: 740 px; height: 310 px;

please remove space 740 and px

and use width:740px; & height:310px;

try this

http://jsfiddle.net/7CCDK/2/

div#banner
{   
padding: 0px;
margin: 5px;


border-style: solid;
border-width: 1px;
border-color: blue;

width: 740px;
height: 310px;
display: inline-block;
float: right;
text-align:left;
}