How to apply horizontal space between absolute positioned elements
I created a set of four tags div
with background-color
yellow color and specified a width
and height
, and then I set its position to absolute
and bottom
to 0px
as shown in the code below:
#votingmeter {
width:25em;
height:20em;
background-color:black;
}
.voteindex {
width:2em;
height:8em;
background-color:yellow;
float:left;
position:absolute;
bottom:0;
margin:2em;
}
<div id="votingmeter">
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
</div>
(see .votingindex
)
But the problem is that the elements .votingindex
overlap. I want to apply some space between each element div
.
Can anyone suggest me a way to do this?
Also, I want the yellow divs (.voteindex) to stay inside the black div ( #votingmeter
).
source to share
Wrap the .voteindex divs in a div with an absolute position.
#votingmeter { width:25em;height:20em;background-color:black; position: relative; }
.voteindex { width:2em;height:8em;
background-color:yellow;float:left;
margin:2em;}
.bottom {
position:absolute;bottom:0;
}
<body>
<div id="votingmeter">
<div class="bottom">
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
</div>
</div>
</body>
source to share
position:absolute;
is the one that makes the elements overlap. If I remove that part, the elements are split evenly across the area, so it looks like you did your calculations well.
#votingmeter { width:25em;height:20em;background-color:black; }
.voteindex { width:2em;height:8em;
background-color:yellow;float:left;
bottom:0;margin:2em;}
<body>
<div id="votingmeter">
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
</div>
</body>
With, position: absolute
you place elements inside the closest parent, which also has a position: absolute or relative. In your case this is now specified, which is why the body is used. That being said, you can give each of your yellow blocks top
and left
, but since you didn't, they all ended up in one place. In this case, I think that removing a position is more elegant than specifying coordinates on an element.
Alternative solution if you want to put items at the bottom. You can make yellow blocks inline-block
. This will make them behave like images: they will be included in the text stream. Then you can make the line-height of the container very high, so the black box will actually become one line of "text".
#votingmeter { width:25em;line-height:20em;background-color:black; }
.voteindex {
display: inline-block;
vertical-align: bottom;
width:2em;
height:8em;
background-color:yellow;
bottom:0;
margin:2em;
}
<body>
<div id="votingmeter">
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
</div>
</body>
source to share
Why are you using positioning absolute
? Just float the elements div
and use px instead of em, for the container and for the inner elements. In addition, the interior elements had to set the headroom on the left in order to have some space.
#votingmeter {
width:400px;
height:20em;
background-color:black;
}
.voteindex {
width:50px;
height:100px;
background-color:red;
float:left;
margin-left:10px
}
Here's a working code for testing.
source to share
I think you need like the following. It uses pure css.
#votingmeter {
height: 100px;
text-align:center;
position: relative;
background-color:black;
width:100%;
}
.voteindex {
background: yellow;
bottom: 1px;
height: 30px;
position: absolute;
width: 10px;
animation: sound 0ms -800ms linear infinite alternate;
}
@keyframes sound {
0% {
opacity: .35;
height: 30px;
}
100% {
opacity: 1;
height: 99px;
}
}
.voteindex:nth-child(1) { left: 1px; animation-duration: 474ms; }
.voteindex:nth-child(2) { left: 12px; animation-duration: 433ms; }
.voteindex:nth-child(3) { left: 25px; animation-duration: 407ms; }
.voteindex:nth-child(4) { left: 37px; animation-duration: 458ms; }
.voteindex:nth-child(5) { left: 49px; animation-duration: 400ms; }
.voteindex:nth-child(6) { left: 52px; animation-duration: 427ms; }
.voteindex:nth-child(7) { left: 65px; animation-duration: 441ms; }
.voteindex:nth-child(8) { left: 77px; animation-duration: 419ms; }
.voteindex:nth-child(9) { left: 89px; animation-duration: 487ms; }
.voteindex:nth-child(10) { left: 102px; animation-duration: 442ms; }
<div id="votingmeter">
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
<div class="voteindex"></div>
</div>
Hope it helps.
You can check the Fiddle Here.
source to share