How to display two divs together in html?

Question

I want to show two divisions side by side. I have tried a few possible solutions, but they still overlap. Thank you in advance.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
    .sidebar
    {
        width:200px;
        background:yellow;
        color:orange;
        padding:50px;
    }
    .content
    {
        width:600px;
        background:silver;
        color:red;
        padding:50px;
    }
</style>
</head>
<body>
       <div class="sidebar">
        This is sidebar div
    </div>
    <div class="content">
        This is Content div
    </div>
</body>
</html>

Possible duplicate of [CSS two divs next to each other](http://stackoverflow.com/questions/446060/css-two-divs-next-to-each-other) — Alexei Levenkov, May 31 '16 at 06:21

score 2 · Answer 1 · answered May 31 '16 at 06:20

Use float:left; Learn about CSS float Property

.sidebar
    {
        width:150px;
        background:yellow;
        color:orange;
        padding:50px;
  float:left;
    }
    .content
    {
        width:200px;
        background:silver;
        color:red;
        padding:50px;
  float:left;
    }

<div class="sidebar">
 This is sidebar div
</div>
<div class="content">
 This is Content div
</div>

score 2 · Answer 2 · answered May 31 '16 at 06:21

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
    .sidebar
    {
        width:200px;
        background:yellow;
        color:orange;
        float:left;
        padding:50px;
    }
    .content
    {
        width:200px;
        background:silver;
        color:red;
        float:left;
        padding:50px;
    }
</style>
</head>
<body>
       <div class="sidebar">
        This is sidebar div
    </div>
    <div class="content">
        This is Content div
    </div>
</body>
</html>

score 0 · Answer 3 · answered May 31 '16 at 06:22

I think do you mean just display two div in one row is it right so it is just simple add float:left in first div it will solve your issue.

Like :

    .sidebar {
        width: 200px;
        background: yellow;
        color: orange;
        padding: 50px;
        float:left;
    }

score 0 · Answer 4 · answered May 31 '16 at 06:23

<!DOCTYPE html>
<html>
<head>
   <title></title>
<style type="text/css">
    .sidebar
    {
        width:200px;
        background:yellow;
        color:orange;
        padding:50px;
        float:left;
    }
    .content
    {
        width:600px;
        background:silver;
        color:red;
        padding:50px;
        float:left;
        margin-left:10px;
    }
</style>
</head>
<body>
    <div class="sidebar">
        This is sidebar div
    </div>
    <div class="content">
        This is Content div
    </div>
</body>
</html>

score 0 · Answer 5 · answered May 31 '16 at 06:24

Just added main parent to both div and used display:inline-flex to it.

.main{
  display:inline-flex;
}   
.sidebar
    {
        width:200px;
        background:yellow;
        color:orange;
        padding:50px;
    }
    .content
    {
        width:600px;
        background:silver;
        color:red;
        padding:50px;
    }

<div class="main">
<div class="sidebar">
        This is sidebar div
    </div>
    <div class="content">
        This is Content div
    </div>
</div>

score 0 · Answer 6 · answered May 31 '16 at 06:27

adding float:left to both div will fix the issue.

css code:

 .sidebar
    {
        width:200px;
        background:yellow;
        color:orange;
        padding:50px;
        float:left;
    }
    .content
    {
        width:600px;
        background:silver;
        color:red;
        padding:50px;
        float:left;
    }

html code:

 <div>
         <div class="sidebar">
           This is sidebar div
         </div>
         <div class="content">
           This is Content div
         </div>
    </div>

and if one of your div is going down then you must adjust your div's width.

score 0 · Answer 7 · answered May 31 '16 at 06:27

0

Apply a float:left to the widgets

answered May 31 '16 at 06:27

Pons Purushothaman

2,427
1
13
23

score 0 · Answer 8 · answered May 31 '16 at 06:28

0

To solve this problem :

You should add this code to .content and to .sidebar

Add float:left...

This should help

http://www.w3schools.com/cssref/pr_class_float.asp..

glad to help you

answered May 31 '16 at 06:28

Sangamesh Davey

73
1
7

score 0 · Answer 9 · answered May 31 '16 at 06:45

Since div is a block level element, so it will occupy 100% width of its immediate parent. Because of it, one cannot place them in a horizontal manner without making use of float - a very useful CSS property.

So in your CSS you should add the property as below, to get the desired result:

.sidebar {
     float: left;
}

Watch the demo here.

To get more information about float, one can always Google, as it is an ocean of knowledge.

score 0 · Answer 10 · answered May 31 '16 at 06:53

use CSS float Property

float: none|left|right|initial|inherit;

 .sidebar {
   width: 200px;
   background: yellow;
   color: orange;
   padding: 50px;
   float: left;
 }
 .content {
   width: 200px;
   background: silver;
   color: red;
   padding: 50px;
   float: left;
 }

<div class="sidebar">
  This is sidebar div
</div>
<div class="content">
  This is Content div
</div>

How to display two divs together in html?

10 Answers10