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

HTML

Marco La Terra
Marco La Terra
5,427 Points
Posted by Marco La Terra
Marco La Terra
5,427 Points

i dont understand.. where is the error?

so my problem is that the second div is going down! they should not be aligned on the top border? why the second is a bit more down the the first div? *im using https://jsfiddle.net/ for testing! there is no html head or body and you can test without rel ecc.

Pls Help! html: <div class="contenitore">

<div class="box"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic vero, dolor rerum. Porro quis odit officiis rerum dignissimos doloribus, quae. Omnis praesentium voluptatibus quae recusandae ipsum sit beatae, voluptatum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, ea? </p> </div>

<div class="box"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic vero, dolor rerum. Porro quis odit officiis rerum dignissimos doloribus, quae. Omnis praesentium voluptatibus quae recusandae ipsum sit beatae, voluptatum sequi. </p> </div> </div>

css: *{

margin:0; padding:0; } .box{ box-sizing:border-box; font-size:0px; display:inline-block; width:30%;

padding:15px; border:1px solid black; } .contenitore{ margin-top:12px; font-size:0; text-align:center; } p{ font-size:20px; }

3 Answers

SP Prabhakar
SP Prabhakar
11,429 Points
SP Prabhakar
SP Prabhakar
11,429 Points 
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<style type="text/css">

*{

    margin:0; 
    padding:0; 
} 

.contenitore
{ 
     margin:10px;
     width: 70%;
     margin: 0 auto;


} 

.box{ box-sizing:border-box;
     font-size:0px; 
     float: left; <!-- use float property-->
     width: 30%;
     padding:15px; 
     border:1px solid black;
     margin-top: 20px;
     max-height: 200px;<!--give some height of the box-->
     overflow: hidden;


} 



p{ font-size:20px; }


</style>


<div class="contenitore">

<div class="box"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic vero, dolor rerum. Porro quis odit officiis rerum dignissimos doloribus, quae. Omnis praesentium voluptatibus quae recusandae ipsum sit beatae, voluptatum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, ea? </p> </div>

<div class="box"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic vero, dolor rerum. Porro quis odit officiis rerum dignissimos doloribus, quae. Omnis praesentium voluptatibus quae recusandae ipsum sit beatae,voluptatum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, ea?  </p> </div> </div>

<!-- Try to keep no. of text equal in both boxes otherwise it will get small or large from downside. that is why i have given it max-height and overflow property. -->
<!--- I hope it might help you a little bit -->
</body>
</html>
Marco La Terra
Marco La Terra
5,427 Points
Marco La Terra
Marco La Terra
5,427 Points

ty now it also increase in a normal way if i decide to remove max-height and give the divs more words , no more space at the top of the div!

SP Prabhakar
SP Prabhakar
11,429 Points
SP Prabhakar
SP Prabhakar
11,429 Points 
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<style type="text/css">
*{

margin:0; padding:0; } 
.box{ box-sizing:border-box;
     font-size:0px; 
     display:block; 
     width: 50%;
     padding:15px; 
     border:1px solid black; } 

.contenitore{ margin-top:12px;
     font-size:0; 
     text-align:center;
     width: 80%;
     margin: 0 auto; } 

p{ font-size:20px; }


</style>


<div class="contenitore">

<div class="box"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic vero, dolor rerum. Porro quis odit officiis rerum dignissimos doloribus, quae. Omnis praesentium voluptatibus quae recusandae ipsum sit beatae, voluptatum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, ea? </p> </div>

<div class="box"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic vero, dolor rerum. Porro quis odit officiis rerum dignissimos doloribus, quae. Omnis praesentium voluptatibus quae recusandae ipsum sit beatae, voluptatum sequi. </p> </div> </div>



</body>
</html>
Marco La Terra
Marco La Terra
5,427 Points
Marco La Terra
Marco La Terra
5,427 Points

but like this the boxes are one above the other, what i was trying to do is put them one side the other, but the problem is that my second div is in going more down then the first one, leaving some space on the top, and that's not normal cause it should leave the space bottom! cause it's shorter then the first one

SP Prabhakar
SP Prabhakar
11,429 Points
SP Prabhakar
SP Prabhakar
11,429 Points

you can set width as per your requirements.