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
David Hinton
3,070 PointsSide 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
Full Stack JavaScript Techdegree Graduate 27,918 PointsHi 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
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>
David Hinton
3,070 PointsHi sorry new to this. https://teamtreehouse.com/workspaces/41582985
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,918 PointsHmm, the link didn't work...
David Hinton
3,070 PointsThat's the link I have on my workspace :/
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,918 PointsCan you take a "snapshot" of the workspace? That should give me a workable link. Thanks!
David Hinton
3,070 PointsThank you for your patients https://ibb.co/JFJY6qJ
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,918 PointsThere'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
3,070 PointsOh I see thank you I didn't realise https://w.trhou.se/qqedvac3gn
David Hinton
3,070 PointsThank you this really helped a lot and made sense
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,918 PointsBert Witzel
Full Stack JavaScript Techdegree Graduate 27,918 PointsCan you share your workspace so I can take a look?