12

I want to make 2 divs beside each other to be aligned on the same horizontal line WITHOUT FLOATs

I've tried Position:relative ,, but no luck

See the example below : http://jsfiddle.net/XVzLK

<div style="width:200px;height:100px;background:#ccc;"> 
<div style="background:Blue; float:left; width:100px; height:100px;"></div> 
<div style="background:red; float:left; margin-left:100px; width:100px; height:100px;"></div>
</div>

From the link above, I need the red box to be on the same line of blue box with no space below ..

EDIT : I want the red box to stay outside the container gray box (just as it is) thanks

Ahmed Moness
  • 237
  • 2
  • 4
  • 11

5 Answers5

16

Relative with inline-block display

#one {
  width: 200px;
  background: #ccc;
 }

 #two {
  display: inline-block;
  background: blue;
  position: relative;
  left: 0;
  width: 100px; height: 100px;
 }

 #three {
  display: inline-block;
  background: red;
  position: relative;
  left: 0;
  width: 100px; height: 100px;
 }
<div id="one"><div id="two"></div><div id="three"></div></div>

EDIT

The code below also works fine. Here, because of comments, the line feed is commented out and ignored.

#one {
  width: 200px;
  background: #ccc;
 }

 #two {
  display: inline-block;
  background: blue;
  position: relative;
  left: 0;
  width: 100px; height: 100px;
 }

 #three {
  display: inline-block;
  background: red;
  position: relative;
  left: 0;
  width: 100px; height: 100px;
 }
 <div id="one">
  <div id="two"></div><!--
  --><div id="three"></div>
 </div>

Why it works block displays take the whole width of their container, even if you set a very small width, rest of the space will be taken as margin (even if you remove margin). That's just how they behave. inline-block displays work much like inline displays except that they do respect the padding etc you give them. But they still ignore margins (someone correct me if I am wrong). Same as inline displays, if you give a line-feed between them in your HTML, it's converted to a small space. So to remove that, Here I have the HTML in a single line. If you indent the code then the div#three will be pushed down (as you have fixed width of div#one so height is only option.)

bugwheels94
  • 30,681
  • 3
  • 39
  • 60
Sourabh
  • 8,243
  • 10
  • 52
  • 98
  • Sorry, It wasn't me who downvoted, but thanks really for your time & effort .. still can't solve my problem using inline-block , actually I'm building a content slider with multiple slides and I want to arrange them all side by side with a viewport that has overflow-x:hidden , but still no luck with inline-blocks :( – Ahmed Moness Jun 16 '13 at 07:24
  • I just found out that `margin` does work on `inline-block`. For your slider if you change the `margin-left` of first block to `-100px`, then it will hide and you can see second block. With `absolute` you'd have to change `left` of every block if you want the sliding effect. **PS:** I didn't mean that you downvoted this answer, I was just asking the down voter, whosoever he is. – Sourabh Jun 16 '13 at 07:29
  • 2
    Fair enough. But I will leave it there, its not hurting anyone. If nothing else, then it might help someone in future. – Sourabh Jun 16 '13 at 09:01
5

Use Position properties when your height and width are fixed

<div style="width:200px;height:100px;position:relative;background:#ccc;"> 
   <div style="background:Blue; position:absolute; left:0%; width:50%; height:100%;">
   </div> 
   <div style="background:red; position:absolute; left:50%; width:50%; height:100%;">
   </div>
</div>
bugwheels94
  • 30,681
  • 3
  • 39
  • 60
4

If you want to avoid float, position and inline-block, here's a margin-only solution:

<div style="width:200px; background:#ccc;">
<div style="background:blue; width:100px; height:100px;"></div>
<div style="background:red; width:100px; height:100px; margin:-100px 0 0 100px;"></div>
</div>

Updated fiddle

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
1

If you want your divs on same line without floats you can use display: inline-block; and give some negative margin value to your div because inline-block contains some margin between them.

See this fiddle

As your Edited question I have submitted another fiddle here

Or you could simply add margin-top: -100px; to your fiddle.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • I don't think there's any margin between the `inline-block` elements. [**Read This.**](http://css-tricks.com/fighting-the-space-between-inline-block-elements/) Negative margin trick does work but it's not really margin. – Sourabh Jun 16 '13 at 07:09
  • The edited answer seems ok, but you had to close the container div before the red box, which is not a good option for dynamic content I think (?) – Ahmed Moness Jun 16 '13 at 07:09
0

http://jsfiddle.net/XVzLK/22/

<div style="width:200px;position: relative; background:#ccc;">
<div style="background:Blue; position:absolute; top:0; left: 0; width:100px;height:100px;"></div>
<div style="background:red; position:absolute; top:0; right: 0; width:100px;height:100px;"></div>
</div>

Setting position relative on the coloured divs makes their position relative to where they would have been in the document. I think what you wanted to do is make the containing div position relative, and the children divs positioned absolutely within it. I'm assuming that "with now space below" meant "with no space below"

There is a tutorial here that may be of use: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Michael
  • 2,189
  • 16
  • 23