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

Question

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-->

I tryed float on the "Programm" Class but that doesn't work for me and i tryed everything I know — Constantin Finkbeiner, Aug 05 '16 at 01:21
Apply `display: flex` to your `.Skills` container. If that works for you, here some more details: http://stackoverflow.com/a/32122011/3597276 — Michael Benjamin, Aug 05 '16 at 01:26

Nishanth Matha · Answer 1 · 2016-08-05T01:47:19.403

0

Just set width :50% to your inner contents of Programmes div and set width:100% to Programmes div

.Photoshop, .Illustrator  {
  width: 50%
}
.Programme {
    width: 100%
}

edited Aug 05 '16 at 01:47

answered Aug 05 '16 at 01:20

Nishanth Matha

5,993
2
19
28

Thanks but my icons are just getting much bigger than before – Constantin Finkbeiner Aug 05 '16 at 01:24

score 0 · Accepted Answer · answered Aug 05 '16 at 01:37

0

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;
}

answered Aug 05 '16 at 01:37

Siebe.V

136
1
10

Thats it ;) Thanks – Constantin Finkbeiner Aug 05 '16 at 01:41
You should be able to delete all the div tags around your programs which display your program name. Since now they are not needed anymore. – Siebe.V Aug 05 '16 at 01:44
If you need more help you can always contact me on my skype live:verschaevesiebe – Siebe.V Aug 05 '16 at 01:45
Just be cautious with this approach. If you need to support IE9 or earlier it won't work (http://caniuse.com/#feat=flexbox) – Jon P Aug 05 '16 at 01:56
That's true. But since microsoft came with the new Edge i'm not really paying any attention to it. Since edge uses flexbox too :p – Siebe.V Aug 05 '16 at 02:01

score 0 · Answer 3 · answered Aug 05 '16 at 02:20

Let's clean up this a bit and giv you a float option. You have list of programes so lets use a list. Then we will reduce the duplicated CSS.

.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;
}

.Programme
{
  list-style-type:none;
  padding-left:0;
}

.Programme > li {
  float:left;
  width:50%;
}

/*Set Base settings for images */
.Programme img
{
  margin-top: 36px;
  padding-left: 49px;
}

//Cinema 4d seems to be special so lets add what is needed
.Cinema4D  img {  
  margin-bottom: 30px;
}

.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

<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-->
  
  <ul class="Programme clearfix">    
    <li class="Photoshop">   
        <img src="Images/Photoshop.png" alt="" />      
    </li>
    <li class="Illustrator">
         <img src="Images/Illustrator.png" alt="" />        
    </li>
    <li class="InDesign">      
        <img src="Images/InDesign.png" alt="" />      
    </li>
    <li class="Dreamweaver">    
        <img src="Images/Dreamweaver.png" alt="" />      
    </li>
    <li class="AfterEffects">      
        <img src="Images/AfterEffects.png" alt="" />      
    </li>
    <li class="PremierePro">      
        <img src="Images/PremierePro.png" alt="" />
    </li>
    <li class="SonyVegas">
      
        <img src="Images/SonyVegas.png" alt="" />
      
    </li>

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


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

See http://cssmojo.com/the-very-latest-clearfix-reloaded/ for why I've used clearfix and what you might need to change depending on the browsers you are targetting.

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

3 Answers3