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

}

7 Answers

Bert Witzel
seal-mask
.a{fill-rule:evenodd;}techdegree
Bert Witzel
Front End Web Development Techdegree Student 9,004 Points

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
5,342 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>
David Hinton
David Hinton
3,070 Points

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

Bert Witzel
seal-mask
.a{fill-rule:evenodd;}techdegree
Bert Witzel
Front End Web Development Techdegree Student 9,004 Points

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