How to make elements in same line [CSS]

Question

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>

@HMS8 So you might made a mistake. It has worked for more than a decade. — Hashem Qolami, Jan 18 '14 at 21:45
I changed the height of box 2 to -75px, and they became in the line — , Jan 18 '14 at 21:52
margin-left: 530px is making the declared width of box1 and box2 1530px, which is causing a problem. also set padding to 0. display:inline-block; is the CSS rule to place blocks on the same line and make them work like images. But margins and padding on images would cause them to not fit either, you can treat inline-blocks like images for the most part. — Wayne, Jan 18 '14 at 21:53

score 2 · Answer 1 · edited May 23 '17 at 12:21

2

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?

edited May 23 '17 at 12:21

Community

1
1

answered Jan 18 '14 at 21:38

Siamak A.Motlagh

4,538
6
38
60

1

And beware of the gap between `inline-block` elements – Hashem Qolami Jan 18 '14 at 21:39
What do you mean by saying "beware of the gap between inline-block elements" – Jan 18 '14 at 21:44
1

By "beware of the gap" I'm sure he means the way inline elements will have a space rendered between them if the tags have any white space between them. This is annoying for developers who like to put each tag on its own line with indentation etc. This page has some useful tips for getting around it: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ – Jan 18 '14 at 21:47
@HMS8 web browsers render all the space and tab or newline characters between inline elements, as a single space. So it would be a gap between `inline-block` elements too. – Hashem Qolami Jan 18 '14 at 21:48
Personally, I have my HTML minified on the fly, which removes newlines and tabs in nonessential places. So I can code tidy and have `inline-block`s :3 – Niet the Dark Absol Jan 18 '14 at 22:08
@Siamak.A.M jsfiddle the code is working fine, but when I save it on my computer, it shows the block are under each other. I used W3 Validator, there was nothing wrong with it – Jan 18 '14 at 22:22
@NiettheDarkAbsol Good idea. But I prefer to minify things on the ground :D before lunching (by using a task runner like GruntJS) – Hashem Qolami Jan 18 '14 at 22:24
1

I tried it on Chrome, Fire Fox and Opera, and still giving the same error. I uploaded the HTML file; in case someone wanted to see it https://www.dropbox.com/s/y4cc9674chz0umh/box.htm – Jan 18 '14 at 22:39

score 0 · Answer 2 · answered Jan 18 '14 at 23:16

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;
}

How to make elements in same line [CSS]

2 Answers2