Photoshop Question posted in
The official user guide can be found here.

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

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

3

Answers


  1. 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%
}
    Login or Signup to reply.
  2. 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;
}
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search