Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

David Hinton
David Hinton
3,070 Points

Side by side images

Hi i'm trying to get 2 images to appear side by side on a page. At first I did manage to do this but one was always higher than the other. Can anybody please help me?

Images are being used by the firstboard and secondboard classes. /* Web Fonts -------------------- */ @font-face{ font-family: 'abolition Regular'; src: url('../fonts/abolition-regular-webfont.eot'); src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/abolition-regular-webfont.woff') format('woff'), url('../fonts/abolition-regular-webfont.ttf') format('truetype'); }

/* Base Styles -------------------- */

  • { box-sizing: border-box; /* The CSS box-sizing property allows us to include the padding and border in an element's total width and height. */ }

body {

color: firebrick; margin: 0; font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;

}

/* Pseudo-classes ------------------ */

a:link { color: rgb(255, 169, 73); text-decoration: none; }

a:visited { color: lightblue; }

a:hover { color: rgba(255, 169, 73, .4); }

a:active { color: lightcoral; }

/* Main Styles --------------------- */

.main-header{ padding-top: 170px; height: 350px;

background: linear-gradient(#ffa949, transparent 90%), linear-gradient(0deg, #fff, transparent), #ffa949 url('../img/banner.jpg') no-repeat center;

background-size:cover; text-align:center;

}

.title{ color: white; font-size: 1.625rem; /* 26px divided by 16px */ letter-spacing: .065em; font-weight: 200; border-bottom: 2px solid; padding-bottom: 10px;

}

.intro{ font-size: 1.25em; line-height: 1.6; text-align:center;

}

.primary-content, .main-header, .main-footer{ text-align:center; border-top: 2px solid #dfe2e6; }

.secondboard{ text-align:center; padding-top: 25px; padding-bottom: 95px;

}

.primary-content{ padding-top: 80px; padding-bottom: 70px;

}

.callout { font-size: 1.25em; border-bottom: 3px solid; padding: 0 9px 3px; margin-top: 20px; display: inline-block;

}

.main-footer { padding-top: 60px; padding-bottom: 60px; border-bottom: 10px solid #ffa949; }

.firstboard, .secondboard{

width: 46.5%; }

.firstboard { float: left; }

.secondboard{ float: right; }

.group:after { content: ""; display: table; clear: both; }

/* ------------------------------------------------*/

@media (max-width: 960px) { body { background: royalblue;

}

}

@media (max-width: 480px){ body { background: darkred; } }

@media (min-width: 481px) and (max-width: 700px){ body { background: seagreen; } p { color: white; } } */

@media (max-width: 1024px) { .primary-content, .secondary-content { width: 90%; }

.firstboard{ padding: 10% 12%; margin: 50px 0 20px; }

}

@media (max-width: 768px) { .primary-content, .secondary-content {

width: 100%; padding: 20px; border-top: none; } .main-header { max-height: 380px; padding: 50px 25px 0px; }

.title { font-size: 1.3rem; border: none; }

h1{ font-size: 5rem; line-height: 1.1; } .arrow { display: none; } .intro { font-size: 1rem; } .firstboard, .secondboard { float: none; width: 100%;

}

.main-footer { padding: 20px 0; }

}

Can you share your workspace so I can take a look?

7 Answers

Hi David, thanks for being patient and getting me your code. I took a look and I see what the problem is. You are wanting to have the two floats side by side, and you have them floated correctly, the only issue is that you have them in separate <div> elements. That's why .secondboard is below .firstboard, even though it's floating right.

What I did was move the .secondboard <div> to the .primary-content <div>, so now .firstboard and .secondboard can float in the same div. You also have some padding-top in .secondboard that is keeping it from looking level with .firstboard, so just take that out in the CSS and you should be good to go.

<div class="primary-content t-border group">

          <div class="firstboard">
                <h1>This is where the first board will be</h1>
            <img src="img/board.jpg" alt="firstboardimg">
          </div>

          <div class="secondboard">
              <h1>Second Board</h1>
                  <img src ="img/board.jpg" alt="secondboardimg">   
          </div>
    </div>
Fran ADP
Fran ADP
6,304 Points

<div class="primary-content t-border group">

      <div class="firstboard">
            <h1>This is where the first board will be</h1>
        <img src="img/board.jpg" alt="firstboardimg">
      </div>

      <div class="secondboard">
          <h1>Second Board</h1>
              <img src ="img/board.jpg" alt="secondboardimg">   
      </div>
</div>

Hmm, the link didn't work...

David Hinton
David Hinton
3,070 Points

That's the link I have on my workspace :/

Can you take a "snapshot" of the workspace? That should give me a workable link. Thanks!

There's a feature at the top right of your workspace where you can take a snapshot and then post the link. This way I can access all of the files.

David Hinton
David Hinton
3,070 Points

Thank you this really helped a lot and made sense