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

Horizontal alignment of 3 boxes of div – Photoshop

I’m create html page called AboutUs.html. I was tasked to complete the page but there is a problem. I want to align the three box in horizontally something like this:

correct output

but I try using some CSS code but still could not align in horizontal.

Wrong Output:

click here

I want the first box to be left, for second box to be center and the third box to be right. Can anyone please help me fix this problem.

This is About.html code:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Two Trees Creative - About Us </title> 

     <link rel="stylesheet" href="_stylesheets/Css_Reset.css"/>

    <link rel="stylesheet" href="_stylesheets/mystyle.css"/>
</head>
    <body>
<div id="wrapper">
    <header>
        <a id="logo" href="#">Two Tree Creative</a>
        <nav id="mainNav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="About.html">About Us</a></li>
                <li><a href="Portfolio.html">Portfolio</a></li>
                <li><a href="Contact.html">Contact</a></li>
            </ul>
        </nav>

    </header>
        <section id="welcome">

            <h1>Designing your world</h1>
            <p>One pixel at a time</p>
        </section>

        <section id="about">
            <h2>About us</h2>
            <article id="about_info">
            <p>Two Trees Creative is a full-service graphic design agency based in Ventura, CA. Our goal is to provide elegant work and unsurpassed customer service to our clients in every way.</p>
            <h3>Meet Our Team of Creatives</h3>
            <p>Collectively we have over 15 years experience in the graphic design industry, and our services include brand identity development, business cards, brochures, flyers, catalogs, and more. Thank you for considering us for your next project, and we hope to hear from you soon.</p>
            </article>

        <aside id="about_team">
          <div class="row">
          <div class="image">
            <img src="_images/team/alex_morrales.jpg" alt="Alex Morrales" width="150" height="150">
              <p>Alex Morrales</p>
          </div>

          <div class="image">
            <img src="_images/team/david_kim.jpg" alt="David Kim" width="150" height="150">
              <p>David Kim</p>
          </div>

          <div class="image">
            <img src="_images/team/jenny_tabers.jpg" alt="Jenny Tabers" width="150" height="150">
              <p>Jenny</p>
          </div>
        </div>

        <div class="row"></div>
        </aside>

        </section>





    <footer>
        <p>Photoshop adapted from www.lynda.com - Photoshop CC for Web Designed by Justin Seeley</p>
    </footer>

</div>


</body>
</html>

For mystyle.css code, under about_team id element i need to code something in order for the 3 box to be align in horizontally.

#wrapper {
    max-width: 1280px;
    margin: auto;

}

/*header*/
header {
    background-color: white;
    width:100%;
    height: 165px;
    text-align: center;
    margin-top: 60px;
}

#logo {
    background: url(../_images/ttc_logo.png) no-repeat;
    width: 85px;
    height: 85px;
    margin: auto;
    margin-bottom: 0px;
    display: block;
    text-indent: -9999px;
}

#welcome 
{
    background: url(../_images/banner.jpg);
    width:100%;
    height:650px;
    overflow:hidden;
    text-align:center;
    color:white;
    vertical-align:middle;

}


#welcome h1
{
    font-size:4em;
    font-family:'Adobe Garamond , serif';
    padding-top:200px;
    text-transform:uppercase;
}
#welcome p
{
    font-size:3em;
    font-family:'Adobe Garamond , serif';
    font-style:italic;
    font-weight:bold;

}

#about
{
    margin:auto;
    height:550px;
    background-image:url(../_images/tree1.gif), url(../_images/tree1.gif);
    background-position:-150px, 115%;
    background-repeat:no-repeat, no-repeat;
}

#about h2
{
    text-align:center;
    text-transform: uppercase;
    font: 3em 'Adobe Garamond, serif';
    font-weight:bold;
    padding-top:50px;
    margin-bottom:25px;
    color:rgb(82, 71,65);
}

#about h3
{
    font:36px Arial, sans-serif;
    margin-top:60px;
    margin-bottom:10px;
    color:rgb(134,118,92);
}

#about_info{
    float:left;
    margin: 0 auto;
    padding-top:37px;
    width:40%;
    height:400px;
    padding-left:125px;
}

#about_team
{
    float:left;
    margin: auto;
    height:400px;
    padding-top:37px;
    padding-left:20px;
}




#mainNav{
    width: 680px;
    margin: auto;
}

#mainNav ul li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: inline;
}
#mainNav li a:link{
    text-align: center;
    display: block;
    float: left;
    width: 110px;
    text-decoration: none;
    text-transform: uppercase;
    color: #5b866b;
    margin: 20px 20px;
    height: 20px;
    padding: 5px;
    border-radius: 5px;
}
#mainNav ul li a:hover,
#mainNav ul li a:focus

{
    background: rgb(185,140,72);
    color: white;
    box-shadow: 2px 3px 4px 0px #CC9933;
}

footer{
    background-color: #dee7e1;
    text-align:center;
    height:20px
    padding:20px;
    clear:both;

}
Tags:

3

Answers


  1. 0

    https://jsfiddle.net/ow6hc90f/1/

    Just add

    .image {
float: left;
}

    and remove the float from this

    #about_team {
/* float:left; */
margin: auto;
height:400px;
padding-top:37px;
padding-left:20px;
}
    Login or Signup to reply.
  2. 0

    Add width: 3 times (imageWidth+margin) into #about_team and add width: 150px and display: inline-block into .image. font-size: 0 in #about_team is to remove space between inline-block element, and you need to restore the size in the .image.

    #about_team {
  width: 480px;
  float: right;
  font-size: 0;
}

#about_team .image{
   display: inline-block; 
   width: 150px;
   margin-right: 10px;
   font-size: 14px;
}
      <aside id="about_team">
    <div class="row">
      <div class="image">
        <img src="https://avatars3.githubusercontent.com/u/1024025?v=3&s=400" alt="Alex Morrales" width="150" height="150">
        <p>Alex Morrales</p>
      </div>

      <div class="image">
        <img src="https://pbs.twimg.com/profile_images/558109954561679360/j1f9DiJi.jpeg" alt="David Kim" width="150" height="150">
        <p>David Kim</p>
      </div>

      <div class="image">
        <img src="http://a5.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE5NDg0MDU0NTIzODQwMDE1.jpg" alt="Jenny Tabers" width="150" height="150">
        <p>Jenny</p>
      </div>

      <div class="image">
        <img src="http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE1ODA0OTcxNjk3OTMxNzg5.jpg" alt="Jenny Tabers" width="150" height="150">
        <p>Jenny</p>
      </div>

      <div class="image">
        <img src="http://i142.photobucket.com/albums/r96/thisdayinmusic/PaulMcCartneyHandsomePaul.png" alt="Jenny Tabers" width="150" height="150">
        <p>Jenny</p>
      </div>

      <div class="image">
        <img src="http://static.giantbomb.com/uploads/original/8/84561/1465721-georgeharrison.jpg" alt="Jenny Tabers" width="150" height="150">
        <p>Jenny</p>
      </div>
    </div>
  </aside>
    Login or Signup to reply.
  3. 0

    You can use CSS Flexbox. Make your three .image divs wrap under a parent div (.image-block – in my case).

    Look at this Codepen

    Something like this:

    .image-block {
  display: flex;
  justify-content: center;
}

.image {
  margin-right: 10px;
  text-align: center;
}
    <div class="image-block">
            <div class="image">
              <img src="http://placehold.it/200x200" alt="Alex Morrales" width="150" height="150">
                <p>Alex Morrales</p>
            </div>

            <div class="image">
              <img src="http://placehold.it/200x200" alt="David Kim" width="150" height="150">
                <p>David Kim</p>
            </div>

            <div class="image">
              <img src="http://placehold.it/200x200" alt="Jenny Tabers" width="150" height="150">
                <p>Jenny</p>
            </div>
          </div>

    Hope this helps!

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

Back To Top
Search