CODEWITHSUNDEEP
css
Agilaz
Agilaz

Reputation: 11

How can I put two divs next to each other in CSS?

I want to put two divs next to each other but no matter what I do, the second div always ends up somewhere under the first. I have tried:

div.one {
width:50%;
float:left;
}

div.two {
width:50%
float:right;
margin-left:50%;
}

and

div.one {
width:50%;
display:inline-block;
}

div.two {
width:50%;
display:inline-block;
}

Upvotes: 1

Views: 11821

Answers (4)

Jessica
Jessica

Reputation: 87

#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

Here is a link to a great tutorial that gives you several examples of positioning: http://www.barelyfitz.com/screencast/html-training/css/positioning

Upvotes: 1

Artem Svirskyi
Artem Svirskyi

Reputation: 7849

.one {
    width: 50%;
    float: left;
    background: green;
    height: 100px;
}

.two {
    width: 50%;
    float: right;
    height: 100px;
    background: red;
}

http://jsfiddle.net/qf9GD/

Upvotes: 0

mfit
mfit

Reputation: 818

Both should be "float:left;"

The elements have to fit - when there is a border , margin or padding, the "width:50%;" might be too high.

Upvotes: 0

Jared
Jared

Reputation: 12524

From your first example try removing the margin.

div.one {
   width:50%;
   float:left;
}

div.two {
    width:50%
    float: left;
}

Upvotes: 3

Related Questions