Making inline elements using various Methods

by Kheema Pandey

HTML

<div class="topbar">
       </div>

         <div id="titlename">
         </div>

    <img src="title.gif" alt="title">
    </div>

     <div class="navbar">
      <div class="button"><a href="#" target="_blank">HOME</a>
      <div class="button"><a href="#" target="_blank">ABOUT</a>
      <div class="button"><a href="#" target="_blank">LINKS</a>
      <div class="button"><a href="#" target="_blank">CONTACT</a>
     </div>

CSS

body{margin:1px;background:green;}
.topbar {background:url(topbar.gif);position:absolute;top: 5px;right: 15px;margin: 2px;width: 1200px;height: 100px;}

.navbar{position:absolute; float:left;width:1200px;height:100px;border-style:groove;}
a:link {text-decoration:none;color:yellow;}
a:hover{color:red;}


/*--Method 1 using float--*/
/*.navbar div a{float:left;padding:0 10px;}*/


/*--Method 2 using Flex property--*/
/*div.navbar{
  display:flex;   
  display: -moz-box; 
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
}
div.navbar div {display:inline; margin:10px;
}*/



/*---Method 3 using display property--*/
/*.navbar div{display:inline-table; padding:0 10px;}*/



/*---Method 4 using table property--*/

div.navbar {display:table;}
div.navbar div{display:table-cell; display:inline; margin:0 10px;}