html - Create header of webpage with three columns -


this in style.css:

#top{     background: white;     text-align: center;     height: 180px;     border-bottom: solid 1px #efeecc; }  #toplogo{     background: yellow;     width: 25%;     float:left; }  #topdescription {     background: red;      width: 75%;     text-align: center; }  #topdepartment {     background: blue;     float:right;     width: 25%;     text-align: right; } 

this index.html:

<div id="top">     <div id="toplogo">         <a href="index.html"><img src="img/book.jpg" width="170" height="160" border="0"/></a>     </div>     <div id="topdescription">         page title     </div>     <div id="topdepartment">         category             </div> </div> 

this expected outcome: enter image description here

this current outcome: enter image description here

http://jsfiddle.net/p2t5q/

here's demo: http://jsfiddle.net/p2t5q/7/

css:

#top{     background: white;     text-align: center;     display:table;     height: 180px;     border-bottom: solid 1px #efeecc; }  #toplogo{     background: yellow;     width: 25%;     display:table-cell; }  #topdescription {     background: red;     display:table-cell;     width: 50%;     text-align: center; }  #topdepartment {     background: blue;     display:table-cell;     width: 25%;     text-align: right; } 

enter image description here


Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

javascript - addthis share facebook and google+ url -

ios - Show keyboard with UITextField in the input accessory view -