Constantin Finkbeiner Constantin Finkbeiner - 3 months ago 11
CSS Question

How did I get my Images side by side without using "Float"?

I'm working on my own Website and on the section my skills there should me 2 Programmes side by side but my Problem is that this doesn't work and i have no Idea why this is not working.

I already tryed to use Float but I failed on this so maybe there is annother option to use.



.Skills {
width: auto;
background-color: #262626;
}
.Meine {
padding-top: 54px;
padding-left: 50px;
font-size: 30px;
font-weight: 900;
letter-spacing: 15px;
color: #fff;
}
.skills {
padding-top: 4px;
padding-left: 50px;
font-size: 30px;
font-weight: 900;
letter-spacing: 15px;
color: #fff;
}
.UnterschriftNo3 {
padding-top: 7px;
padding-left: 50px;
font-size: 13px;
font-weight: 400;
color: #fff;
}
.TrennungNo3 {
padding-top: 7px;
padding-left: 50px;
}
.Photoshop > div > img {
margin-top: 36px;
padding-left: 49px;
}
.Illustrator > div > img {
margin-top: 36px;
padding-left: 49px;
}
.InDesign > div > img {
margin-top: 36px;
padding-left: 49px;
}
.Dreamweaver > div > img {
margin-top: 36px;
padding-left: 49px;
}
.AfterEffects > div > img {
margin-top: 36px;
padding-left: 49px;
}
.PremierePro > div > img {
margin-top: 36px;
padding-left: 49px;
}
.SonyVegas > div > img {
margin-top: 36px;
padding-left: 49px;
}
.Cinema4D > div > img {
margin-top: 36px;
padding-left: 49px;
margin-bottom: 30px;
}

<div class="Skills">

<div class="Meine">
<div>MEINE</div>
</div>
<!--Meine-->

<div class="skills">
<div>SKILLS</div>
</div>
<!--skills-->

<div class="UnterschriftNo3">
<div>DAS IST MEIN K├ľNNEN</div>
</div>
<!--UnterschriftNo3-->

<div class="TrennungNo3">
<img src="Images/Strich_320.jpg" alt="" />
</div>
<!--TrennungNo3-->

<div class="Programme">
<div class="Photoshop">
<div>
<img src="Images/Photoshop.png" alt="" />
</div>
</div>

<p>
<div class="Illustrator">
<div>
<img src="Images/Illustrator.png" alt="" />
</div>
</div>
</p>

<div class="InDesign">
<div>
<img src="Images/InDesign.png" alt="" />
</div>
</div>

<div class="Dreamweaver">
<div>
<img src="Images/Dreamweaver.png" alt="" />
</div>
</div>

<div class="AfterEffects">
<div>
<img src="Images/AfterEffects.png" alt="" />
</div>
</div>

<div class="PremierePro">
<div>
<img src="Images/PremierePro.png" alt="" />
</div>
</div>

<div class="SonyVegas">
<div>
<img src="Images/SonyVegas.png" alt="" />
</div>
</div>

<div class="Cinema4D">
<div>
<img src="Images/Cinema4D.png" alt="" />
</div>
</div>
</div>


</div>
<!--Skills-->




Answer

Adding this should get you going. Just edit the .Programme>div to you wishes :p

.Programme{
    display:flex;
    flex-direciton:row;
    flex-wrap:wrap
}

.Programme>div{
    width:40%;
   margin:0 auto;
}
Comments