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
Peter Vanderlind de Oliveira
7,376 PointsCan't float two container divs one bellow the other
I created two divs (parents, I guess), each one has other divs inside.
The parents are called: #block and #wrapClickables.
I want to get the parents to display one bellow the other, not side by side, but I can't find a way. I tried to CSS rule them as : ~~ clear: both; width: 100%; + overflow: auto; ~~ but nothing works.
The code:
<html> <head> <meta charset="utf-8"> <title> conjugation table</title>
<style>
<!-- CSS rules for the blocks -->
#block {
<!-- HERE -->
}
#blockOne {
width: 80px;
height: 1em;
background: tomato;
float: left;
}
#blockTwo {
width: 80px;
height: 1em;
background: sienna;
float:left;
}
#blockThree {
width: 80px;
height: 1em;
background: wheat;
float:left;
}
<!-- CSS rules for the clickable items -->
#wrapClickables {
<!-- HERE -->
width:600px;
height: 600px;
position: fixed;
background: cyan;
}
#verb {
float: left;
border: solid black;
}
#verbPresentAffirmative {
float: left;
}
</style>
</head>
<body>
<!-- Blocks -->
<div id = "block">
<div id = "blockOne">
Verb
</div>
<div id = "blockTwo">
Conjugation
</div>
<div id = "blockThree">
something
</div>
</div>
<!-- verbs -->
<div id = "wrapClickables">
<div id = "verb">
some cont
</div>
<div id = "verbPresentAffirmative">
Present affirmative
</div>
</div>
</body>
I tried Google the problem, but I couldn't get my problem solved.
3 Answers
Chris Jardine
13,299 PointsHi Peter
Just display your #block and #wrapClickables as block. display: block;
Peter Vanderlind de Oliveira
7,376 PointsHi Ryan, I just edited the file, I tried the display: inline; but it didn't work, it's as if the height were 0px.
The only thing that worked was editing on the chrome dev tool to width: 100%; + overflow: auto;. But once I edited the original file, everything went back to side by side view.
Peter Vanderlind de Oliveira
7,376 PointsSorry, I found out the reason and I feel really dumb about it.
The problem isen't related to the CSS rules, but the comments.
Instead of using: <!-- CSS rules for the blocks -->
I should have used: /* CSS rules for the blocks */
I can't believe myself, such a stupid mistake :/
Everything works just fine now. Thanks Chris, Ryan.
Ryan Bacastow
Courses Plus Student 1,658 PointsRyan Bacastow
Courses Plus Student 1,658 PointsHave you tried fiddling around with the display property? Perhaps inline-block would allow you to clear to the next level.