CODEWITHSUNDEEP
htmlcss
Thamaraiselvam
Thamaraiselvam

Reputation: 7080

bring tiles besides in html

I need to get tiles beside but now whenever i add new one it comes under the old one. this is my codes 

<div class="tiles">
          <div id="metro-array">
              <a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; margin:10px; display: block; background-color: deepSkyBlue;  color: #fff;">
                Name
                Age
              </a>
              <a class="metro-tile" style="cursor: pointer; width: 110px; height: 110px; margin:10px; display: block; background-color: deepSkyBlue;  color: #fff;">
               name2
               Age 2
              </a>         
    </div>
    <script src="js/tileJs.js" type="text/javascript"></script>
  </div>

my css

 .tiles {
    margin: 0px;
    font-family:'Lato', Helvetica, sans-serif;
    line-height: 28px;
    font-size: 16px;
    color: #333;
    font-weight: lighter;
 }



 #metro-array a,  #downloads a {
    text-indent: 5px;
    font-weight: normal;
    text-transform: uppercase;
 }

i tried to add margin-left manually . it works , but i will add tiles dynamically so manually adding it is not possible. and please tell me what should i change in my css?

what i'm expecting

enter image description here

what i'm getting

enter image description here

Upvotes: 1

Views: 92

Answers (4)

Vinod VT
Vinod VT

Reputation: 7159

Add float:left to #metro-array a

Try this,

 #metro-array a,  #downloads a {
   text-indent: 5px;
   font-weight: normal;
   text-transform: uppercase;
   float:left;
   }

http://jsfiddle.net/La2g1md6/1/

Upvotes: 1

Srikanth
Srikanth

Reputation: 122

You can try this. #metro-array a{float:left;}

Upvotes: 1

Vaibhav Jain
Vaibhav Jain

Reputation: 3755

Add 

float:left

to your CSS #metro-array a

Here is the demo : Working Fiddle

Upvotes: 2

Jason
Jason

Reputation: 696

add float:left to #metro-array a

Upvotes: 1

Related Questions