How to make two divs appear side by side using CSS not tables?

Question

How can I make two div appear side by side? I want the first div appear on left, and second to appear right beside that.

<div class="first">first</div>
<div class="second">second</div>

What I want:

first second

What I get:

first

second

Workaround with tables:

<table>
    <tr>
        <td>first</td>
        <td>second</td>
    </tr>
</table>

How to make two divs behave like these two table cells?

See [this post](http://stackoverflow.com/a/10240515/727208) and explore the source. All of "answers" here will fail when left column has no content. — tereško, Sep 20 '13 at 06:21
Remember if you are using CSS float property to align div side by side don't forget to clear float otherwise parent elements will be collapsed. Check this page to learn perfect alignment of div tag using float property - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php — Alex, Sep 20 '13 at 06:33
This question is not a genuine issue, instead it is the result of not learning the basics of HTML or CSS. Also, there are multiple duplicate questions on SO that answer this question perfectly — DividedByZero, Sep 26 '14 at 13:42

score 8 · Accepted Answer · answered Sep 20 '13 at 06:00

8

You just need to add float left to your first div and it will work!

answered Sep 20 '13 at 06:00

Jayesh Amin

3

He needs to float **both** – Mr. Alien Sep 20 '13 at 06:01
add float to both divs – Voonic Sep 20 '13 at 06:02
floating the "first" div defined in the markup is enough. – andrewb Sep 20 '13 at 06:03
@andrewb I commented on your answer already – Mr. Alien Sep 20 '13 at 06:04

score 7 · Answer 2 · answered Sep 20 '13 at 06:04

7

you can use

 float:left

answered Sep 20 '13 at 06:04

Anusha Honey

avrahamcool · Answer 3 · 2013-09-20T06:14:31.187

6

basically there are 2 techniques.

using float. assign a floating value (left | right) to your elements, and they will span one after each other like inline elements based on available space. Downsize: floating breaks the normal flow of the page, so you'll have to use clearfix methods to make the parent container long as his content. (actually not so bad)
using inline-block. assign display:inline-block to your block elements to make them span one after each other like 'inline' elements based on available space. Downsize: each 'new-line' in the markup is treated like a white-space with inline-block elements, causing gapes between elements in the view. and also, assigning 'inline-block' to 'inline-block' elements isn't supported in IE7, so you'll have to use methods to overcome the gap, and IE7 Hack.

I actually prefer the inline-block method.

edited Sep 20 '13 at 06:14

answered Sep 20 '13 at 06:08

avrahamcool

IIRC, the `inline-block` in IE7 will be actually rendered as `inline`, which can (and usually - will) cause additional problems. Anyway, IE7 in most projects is not supported an the 3px gap has [known solutions](http://haslayout.net/css/3px-Gap-Bug-aka-Text-Jog-Bug). – tereško Sep 20 '13 at 06:27
I already linked to good articles about those problems and how to address them. – avrahamcool Sep 20 '13 at 06:32

Sobin Augustine · Answer 4 · 2013-09-20T06:08:28.970

4

simple, Use float:left; to the divs css,

<div style="float:left" > </div>
<div style="float:left" > </div>

and CSS Floats 101, best place to make an understandind of it, very helpful.

edited Sep 20 '13 at 06:08

answered Sep 20 '13 at 06:01

Sobin Augustine

The reason to float the 2nd div is so it doesn't necessarily extend to the right margin. Right? – Bob Stein Aug 05 '17 at 14:25
@BobStein-VisiBone The question is to make two div appear side by side, so to make the second div right next to the first div. – Sobin Augustine May 04 '18 at 13:27

score 1 · Answer 5 · answered Sep 20 '13 at 06:03

1

Many ways. You could float the "first"/leftmost div like in this fiddle.

CSS:

div.left
{
    float: left;
    border: 1px solid red;
}

div.lefthugger
{
    border: 1px solid blue;
}

answered Sep 20 '13 at 06:03

andrewb

[Fails](http://jsfiddle.net/2ENMK/1/) and see [this](http://jsfiddle.net/2ENMK/2/) – Mr. Alien Sep 20 '13 at 06:04

5 Answers5