Its_ToXiiC Its_ToXiiC - 2 months ago 24
CSS Question

Divs overlapping

So what I am trying to do is make a horizontal list, but instead of using ul and li. I trying to align divs. Here is the JSFiddle

HTML:

<div class="card">
<img src="img/toxiic-logo.jpg" alt="ToXiiC Avitar" style="width: 100%" />
<div class="container">
<h4><b>ToXiiC</b></h4>
<p>Founder and CTO</p>
</div>
</div>

Answer

If you want to align divs horizontally, use CSS-Flexbox.
Create a parent element containing the divs with CSS

display: flex;
flexflow: row wrap;     /* or no-wrap instead of wrap, if you want to make 100% sure, they are all in the same row, even if they don't really fit */
justify-content: space-around;

and remove the absolute positioning form .card:

position: absolute;
left: 50%;
transform: translateX(-50%);

this should do it.