How to Prevent Linke break for Divs in CSS?

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

If float is working, I'd recommend sticking with that - you might just need a clearing element afterwards, since this is a common source of problems.

If you really can't go with floats, you could use display: inline-block

Answer 2

You have some possibilities, but i think float is the best way.

1. You could set the div's to display:inline-block (but i wouldn't recommend that)
2. Also you could do absolute positioning, but this is also no neat solution.

Answer 3

Your items are probably inside a block level element (ex: div, li, p).

In short: Block elements, below the last one. Inline, next to the last one.

You need to make your items as inline. Simply replace the block level tags with inlines (ex: span) or style them with display: inline or display: inline-block.

Answer 4

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.