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
KB Li
Courses Plus Student 625 PointsHow can I align three divs in this way?
There are two columns for three divs. One is floated on the left, the width of which is 60%, containing 1 div (an image). The other is floated on the right, the width of which is 40%, containing two divs. These two divs are vertically aligned, and the height of them equals the height of the image.
I am sorry if I did not make my question clear. It would be better if I can upload a picture here. Thank you in advance! I have tried to achieve this for almost 2 hours, but still failed. I really want to know how to do this.
3 Answers
gareth o'connor
1,755 Pointsah! that's a bit trickier! I've modified the jsfiddle so that the image width is responsive (resize the result pane to see it in action). But you will need to check out some more detailed resources on how to achieve your goal - https://css-tricks.com/fluid-width-equal-height-columns/
Also bear in mind that if you are stretching your image to the height of the neighboring divs it may throw the image aspect ratio off (skew the image). It's a big topic but have a search around for responsive image techniques. Hope this was of some help!
gareth o'connor
1,755 PointsHere you go, also on code pen - http://codepen.io/anon/pen/bVozqM Let me know if you need any more help :)
<div id="wrapper">
<div id="left">
</div>
<div id="right">
<div id="top-right">
</div>
<div id="bottom-right">
</div>
</div>
</div>
wrapper{
width:100%; height:100px; }
left{
width:60%; height:100%; background-color:red; float:left; }
right{
width:40%; height:100%; float:right; }
top-right{
height:50%; background-color:green; }
bottom-right{
height:50%; background-color:blue; }
KB Li
Courses Plus Student 625 PointsHi! Thank you for your comment! It worked fine when there is no content in it. But when I put the image in the left column and paragraphs is the right one. The border just crashed. Any suggestions on that?
Also, I wonder is it 100% for the height of the wrapper?
Thank you so much!
gareth o'connor
1,755 PointsHi, can you explain what you mean by 'the border just crashed'? The codepen site is down so I added an image and text on jsfiddle - https://jsfiddle.net/xqeytorz/
KB Li
Courses Plus Student 625 PointsThank you!
What I meant is when the paragraphs are long, then the height of them exceeds that of the picture. As in your example, the paragraphs are vertically longer than the picture.