CODEWITHSUNDEEP
htmlcss
mles
mles

Reputation: 3466

divs don't align horizontally

I'm trying to align the tab divs horizontally, but It doesn't work and I can't find my fault?

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Employees</title>
    <link rel="stylesheet" href="/calc/stylesheets/style.css">
  </head>
  <body>
    <div class="tabs">
      <div class="tab"><a href="/">Home</a></div>
      <div class="tab"><a href="/employee/new">Add Expenses</a></div>
      <div class="tab"><a href="/employee/new">Tags</a></div>
      <div class="tab"><a href="/employee/new">Overview     </a></div>
    </div>
  </body>
</html>

style.css:

#tabs {
  overflow: hidden;
}
#tab {
  float: left;
}

Upvotes: 1

Views: 168

Answers (5)

Charles Ingalls
Charles Ingalls

Reputation: 4561

You have to float your class .tab instead of an id. Also, when you float elements you need to clear at one point. Like this:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Employees</title>
    <link rel="stylesheet" href="/calc/stylesheets/style.css">
  </head>
  <body>
    <div class="tabs">
      <div class="tab"><a href="/">Home</a></div>
      <div class="tab"><a href="/employee/new">Add Expenses</a></div>
      <div class="tab"><a href="/employee/new">Tags</a></div>
      <div class="tab"><a href="/employee/new">Overview     </a></div>
      <div class="clear"></div>
    </div>
  </body>
</html>

CSS

#tabs {
  overflow: hidden;
}

.tab {
  float: left;
}

.clear {
   clear: both;
}

Fiddle: http://jsfiddle.net/hM62P/

Upvotes: 1

Vinod VT
Vinod VT

Reputation: 7159

Use this CSS,

.tabs {
   width:100%;
}
.tab {
    width:25%;
    float:left;
}

The problem is that you are using #tab instead of .tab. Here id is not used. # is for id

Upvotes: 0

user1853128
user1853128

Reputation: 1114

You are using #tabs and #tab, which is not at all available in your HTML. # refers to ID. You need to use .tabs and .tab which refers to a class.

.tabs{
     width:100%;
    border:1px solid red;
}

.tab{
    float:left;
}

Demo Link

Upvotes: 0

Reinder Wit
Reinder Wit

Reputation: 6615

You've mixed up classes and ID's. Modify your css to this:

.tabs {
   overflow: hidden;
}
.tab {
   float: left;
}

Upvotes: 2

myfunkyside
myfunkyside

Reputation: 3950

#tab should be .tab, according to your HTML

Upvotes: 1

Related Questions