CODEWITHSUNDEEP
javascripthtmlcss
B.T
B.T

Reputation: 551

Div list horizontaly

I would like to be able to create a list to code with javascript as you can see here :

What I want to do

However, I can't figure how to code this using html and css. I've tried multiple way found here,on this site, or otherwhere on the net.

I found a way to "align them" but they are not centered.

You can see my actual code here : 

<div id="div1">
<div id="div2">Content2</div>
<div id="div3">Content3</div>
<div id="div4">Content4</div>
<div id="div5">Content5</div>
<div id="div6">Content6</div>
<div id="div7">Content7</div>
</div>


#div1 div{
width: 65px;
height: 100px;
margin-left:2%;
float:left;
color: white;
align:center; 
}

#div1{
margin:0px auto;
width:500px;
height: 100px;
background-color:black;
overflow:hidden;
}

Upvotes: 0

Views: 85

Answers (3)

Anand G
Anand G

Reputation: 3210

I hope, you are looking something like below

.box{
    background-color: #53BBFB;
    float: left;
    height: 74px;
    margin: 15px 5px 5px 0;
    padding-top: 22px;
    width: 181px;
    text-align:center;
}
<div id="div1" class="box">Content1</div>
<div id="div2" class="box">Content2</div>
<div id="div3" class="box">Content3</div>
<div id="div4" class="box">Content4</div>
<div id="div5" class="box">Content5</div>
<div id="div6" class="box">Cont
Check it working here http://codepen.io/anon/pen/zvoLWG

EDIT: If you are looking something like the image you have in link, then try below

.box{    
    float: left;    
    margin: 15px 5px 5px 0;
    padding-top: 22px;    
    text-align:center;
}
.grid-box1 {
  background-color: #F2F2F2;
  height: 30px;
  width: 65px;
  margin-top:40px;
}
.grid-box2 {
  background-color: #DFDFDF;
  height: 40px;
  width: 70px;
  margin-top:35px;
}

.grid-box3 {
  background-color: #C0C0C0;
  height: 50px;
  width: 75px;
  margin-top:10px;
  margin-top:30px;
}
.grid-box4 {
  background-color: #A1A1A1;
  height: 60px;
  width: 80px;
  margin-top:10px;
  margin-top:25px;
}
<div id="div1" class="box grid-box1">Content1</div>
<div id="div2" class="box grid-box2">Content2</div>
<div id="div3" class="box grid-box3">Content3</div>
<div id="div4" class="box grid-box4">Content4</div>
<div id="div5" class="box grid-box3">Content5</div>
<div id="div6" class="box grid-box2">Content6</div>
<div id="div7" class="box grid-box1">Content7</div>

Check it working here http://codepen.io/anon/pen/zvoLmv

Upvotes: 1

M3o
M3o

Reputation: 143

I would recommend you to use UL and LI that way you control your margins. I've seen that this have been asked here before.

Code snippet from the previous question:

* {
margin: 0;
padding: 0;
}
ul {
background: #48D;
height: 35px;
line-height: 25px;
width: 300px;
}
li {
float: left;
list-style-type: none;
margin: 5px 0 0 5px;
}
li div {
background: #6AF;
padding: 0 5px;
}

HTML

<ul>
<li><div>Text</div></li>
<li><div>Text</div></li>
<li><div>Text</div></li>
</ul>

Hope this helps.

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46795

Instead of floating the elements, use display: inline-block and text-align: center on the parent container.

#div1 div {
  width: 65px;
  height: 100px;
  margin: 0% 2%;
  display: inline-block;
  color: white;
  border: 1px dotted yellow;
}
#div1 {
  margin: 0px auto;
  width: 500px;
  height: 100px;
  background-color: black;
  overflow: hidden;
  text-align: center;
}
<div id="div1">
  <div id="div2">Content2</div>
  <div id="div3">Content3</div>
  <div id="div4">Content4</div>
  <div id="div5">Content5</div>
  <div id="div6">Content6</div>
  <div id="div7">Content7</div>
</div>

Upvotes: 1

Related Questions