Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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
<!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

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
<!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

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

you can set width as per your requirements.