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

Few problems with my website Please Help!

I have created a <div> with an id "content" and within that I have a <ul> with an id "info". I have a total of 4 <li> in the <ul> with display:inline-block so that I can have two next to each other on the screen. I have given them a width of 40% so there would be a bit of space between them. However the problems that im facing are that:

A) The <li> boxes do not appear on the same height as one <li> is positioned higher than the other.

B) The content within the <li> goes outside of it.

C) the <li> goes outside of the parents height and therefore above of the footer.

D) Margins are not working.

Here is the code I have used:

html:

<div id="content">
            <ul id="info">
                <li>
                    <img src="images/backboards.jpg">
                    <h2>How These Boards are Created</h2>
                    <p>Immo videri fortasse. Quare attende, quaeso. Aliter enim nosmet ipsos nosse non possumus. Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Cum audissem Antiochum, Brute, ut solebam, cum M. Aliter enim nosmet ipsos nosse non possumus.

Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Servari enim iustitia nisi a forti viro, nisi a sapiente non potest. Sic enim censent, oportunitatis esse beate vivere. Satis est ad hoc responsum. Collige omnia, quae soletis: Praesidium amicorum. Aut, Pylades cum sis, dices te esse Orestem, ut moriare pro amico?</p>
                </li>
                <li>
                    <img src="images/thierry.jpg">
                    <h2>About the Creator</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. An dolor longissimus quisque miserrimus, voluptatem non optabiliorem diuturnitas facit? Illum mallem levares, quo optimum atque humanissimum virum, Cn. Duo Reges: constructio interrete. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Sed vos squalidius, illorum vides quam niteat oratio.

Sin tantum modo ad indicia veteris memoriae cognoscenda, curiosorum. Laboro autem non sine causa; Hoc est non modo cor non habere, sed ne palatum quidem. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Huic ego, si negaret quicquam interesse ad beate vivendum quali uteretur victu, concederem, laudarem etiam; Memini vero, inquam; Hoc ipsum elegantius poni meliusque potuit. Tollenda est atque extrahenda radicitus</p>
                </li>
                <li>
                    <img src="images/woman.jpg">
                    <h2>Create a Custom Deck For You</h2>
                    <p>Utilitatem tantae pecuniae? Cuius quidem, quoniam Stoicus fuit, sententia condemnata mihi videtur esse inanitas ista verborum. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Nec enim, dum metuit, iustus est, et certe, si metuere destiterit, non erit; Beatus sibi videtur esse moriens. Quibus natura iure responderit non esse verum aliunde finem beate vivendi, a se principia rei gerendae peti;

Ergo opifex plus sibi proponet ad formarum quam civis excellens ad factorum pulchritudinem? Aristoteles, Xenocrates, tota illa familia non dabit, quippe qui valitudinem, vires, divitias, gloriam, multa alia bona esse dicant, laudabilia non dicant. At miser, si in flagitiosa et vitiosa vita afflueret voluptatibus. Hoc dictum in una re latissime patet, ut in omnibus factis re, non teste moveamur. Si enim ad populum me vocas, eum. Aufidio, praetorio, erudito homine, oculis capto, saepe audiebam, cum se lucis magis quam utilitatis desiderio moveri diceret. Prioris generis est docilitas, memoria; Multoque hoc melius nos veriusque quam Stoici. Nos quidem Virtutes sic natae sumus, ut tibi serviremus, aliud negotii nihil habemus. Hoc enim identidem dicitis, non intellegere nos quam dicatis voluptatem. Ut enim consuetudo loquitur, id solum dicitur honestum, quod est populari fama gloriosum.</p>
                </li>
                <li>
                    <img src="frontdeck.jpg">
                    <h2>A Truely Unique Ride</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. Idemque diviserunt naturam hominis in animum et corpus. Et hunc idem dico, inquieta sed ad virtutes et ad vitia nihil interesse. At vero illa, quae Peripatetici, quae Stoici dicunt, semper tibi in ore sunt in iudiciis, in senatu. Duo Reges: constructio interrete. Quis tibi ergo istud dabit praeter Pyrrhonem, Aristonem eorumve similes, quos tu non probas? An eum discere ea mavis, quae cum plane perdidiceriti nihil sciat? Progredientibus autem aetatibus sensim tardeve potius quasi nosmet ipsos cognoscimus. Bona autem corporis huic sunt, quod posterius posui, similiora. Igitur ne dolorem quidem. Nihil minus, contraque illa hereditate dives ob eamque rem laetus. An quod ita callida est, ut optime possit architectari voluptates? Cur post Tarentum ad Archytam?</p>
                </li>
            </ul>
        </div>
        <div id="footer">
        </div>

CSS:

content {

width: 100%;
height: 1400px;
border-bottom: 2px solid #2d2d2d;

}

info {

width: 100%;
height: 1400px;

}

info li {

list-style: none;
display: inline-block;
width: 40%;
height: 675px;
padding: 2px 2px;
margin 5px 50px;
border: 1px solid #2d2d2d;

}

info img {

width: 100%;
height: 325px;
border: 1px solid #5d5d5d;

}

info h2 {

color: #bdbdbd;

}

info p {

color: #cdcdcd;
line-height: 1.25;

}

footer {

clear: both;
bottom: 0;
height: 200px;
width: 100%;
margin-top: 50px;
background-color: grey;

}

Could anyone please help? I'm new to website developing and am clearly doing something incorrectly.

Thank You,

Santos,

1 Answer

Try this. Float your list items left and make sure you have a colon after margin. That should put them in line, based on my quick test. Because you've set a specific height for the items, it's going to be hard to fit all the text inside them without spilling over. You can try setting the overflow to auto, but you might not want a scroll bar to appear. Maybe someone more experienced and creative can suggest something else, but I'd either trim the content or change the layout of the list items so they don't have to be the exact same size.

Thank you Travis. I added an overflow with scroll to fix the problem, and for now it seems to work fine. Thank you!