CODEWITHSUNDEEP
htmlcss
user2870413
user2870413

Reputation:

How to make elements in same line [CSS]

I wanted to put box 1 in the same line with box 2. In the following code box 2 is under box 1. I want to know how to fix that problem. 

#container {
background-color: #999;
margin: 0px auto;
width: 1000px;
height: 620px;
z-index: 1;
}
#box1 {
background-color: #0F3;
width: 530px;
height: 75px;
display:inline-block;
z-index: 1;
margin-top: 0px;    
margin-left: 0px;
}
#box2 {
display:inline-block;
background-color: #00F;
width: 470px;
height: 75px;
z-index: 1;
margin-top: 0px;
margin-left: 530px;
}
<div id="container">
<div id="box1"></div>
<div id="box2"></div>
</div>

Upvotes: 1

Views: 113

Answers (2)

ibrahim
ibrahim

Reputation: 343

Your code is correct but except this:

#box2 {
    ...
    margin-left: 530px;
}

it calculates the margin value from right side of box1. But you think that it calculates from window or container div.

Change it like;

#box2 {
    ...
    margin-left: 0;
}

Upvotes: 0

Siamak Motlagh
Siamak Motlagh

Reputation: 5136

Simply Use display inline-block: LIVE DEMO

Also there is no need to set margin-left for the box2. You can remove it.

And if there is gap problem between inline elements you can check out this article:
How to remove the space between inline-block elements?

Upvotes: 2

Related Questions