Im trying to get a row of boxes on the same line as each other but the second box shown in the picture is way off. Any useful codes to get them next to each other?

 

Heres css:

 

.container{

width: 950px;

height: 600px;

border-top-left-radius: 30px;

border-top-right-radius: 30px;

border-bottom-right-radius: 30px;

-moz-border-radius-topleft: 30px;

-moz-border-radius-topright: 30px;

-moz-border-radius-bottomright: 30px;

-webkit-border-top-left-radius: 30px;

-webkit-border-top-right-radius: 30px;

-webkit-border-bottom-right-radius: 30px;

border: solid; color: #ffffff;

background: #FFA500;

margin: -100px 0px ;

padding: 10px 0px;

}

.box1{

width: 200px;

height: 200px;

border-radius: 10px ;

-moz-border-radius: 10px ;

-webkit-border-radius: 10px ;

border: solid; color: #000000;

background: #ffffff;

margin: 0px auto;

padding: 0px;

}

.box2{

width: 200px;

height: 200px;

border-radius: 10px ;

-moz-border-radius: 10px ;

-webkit-border-radius: 10px ;

border: solid; color: #000000;

background: #ffffff;

padding: 0px;

float: right;

}

.content{

width: 900px;

height: 250px;

border-radius: 10px ;

-moz-border-radius: 10px ;

-webkit-border-radius: 10px ;

border: solid; color: #000000;

background: #ffffff;

margin: 0px auto;

padding: 0px;

}

All boxes that you want side by side have to have a float. so if you want .box1 and .box2 side bay side, add float: left; to .box1 and make sure that the container has enough width for both.

As Wickham said, add a float to allow your boxes to line up side-by-side. When they run out of space to fit on the same line, they will wrap to the next line.

 

You may need to establish a new block formatting context on your container div by giving it one of the following properties:

* float: left

* float: right

* position: absolute

* display: inline-block

* display: inline-table

* display: table-cell

* display: table

* overflow: auto

* overflow: scroll

* overflow: hidden

 

The block formatting will allow your container to "hold" the floated elements, which may otherwise overlap with the parent container.