Question

I am creating menu for a website. for each item (Home, Contact us, About us) I use Background color and text of size 125X30. In CSS, When i use float it works correct. But when i removed float, all individual item such as home, contact etc come down one by one. I need it left to right in a single line without float. Help me

Answer 1

Rajasekar,

Stu Nicholls of CSSplay has the following horizontal menu without using floats:

CSS

.menu {display:inline-block;}
.menu {display:inline;}
.holder {display:table;}

.menu {
  display:table-row;
  padding:0;
  margin:0;
  list-style-type:none;
  white-space:nowrap; 
  }
.menu li {display:inline;}
.menu a, .menu a:visited {
  display:block;
  float:left;
  padding:4px 16px;
  color:#000; 
  background:#d4d4d4; 
  border:1px solid #fff; 
  text-decoration:none;
  }
.menu a:hover {
  color:#fff; 
  background:#08c;
  }

#wrapper1 {text-align:left;}
#wrapper1 .holder {margin:0;

html

<div id="wrapper1">
<div class="holder">
<ul class="menu">
<li><a href="#nogo">Tab One</a></li>
<li><a href="#nogo">Tab Two: Longer</a></li>
<li><a href="#nogo">Tab Three: Longest</a></li>
<li><a href="#nogo">Tab Four</a></li>

</ul>
</div>
</div>

Further explanation (including the use of display:inline-block) is on CSSplay.