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:
this current outcome:
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; }
Comments
Post a Comment