Languages
[Edit]
EN

CSS - display two divs next to each other

3 points
Created by:
Dirask Community
6240

In this article we would like to show you how to display two divs horizontally next to each other using CSS.

Two divs placed horizontally next to each other using CSS.
Two divs placed horizontally next to each other using CSS.

Below example presents three different solutions, buy using:

  1. display: flex style property,
  2. float and overflow style properties,
  3. position style property.

1. Using display: flex property

In this solution we use display: flex style property for our wrapping <div> element, so in both children divs we can set flex: property value with 1 to display two equal size <div> elements next to each other. 

// ONLINE-RUNNER:browser;

<html>
<head>
  <style>   
 
    div {
    	border: 1px solid red;
    }
    
    div.container {
    	display: flex;  /* <---------- required */
    }
    
    div.child {
    	flex: 1;  /* <---------------- required */
    }
    
  </style>
</head>
<body>
  <div class="container">
    <div class="child">1</div>
    <div class="child">2</div>
  </div>
</body>
</html>

2. Using float and overflow properties 

In this solution we use float: left property for our first <div> so it can float to the left side of our container. Then we set it's width to 50% to make some place for our second <div> in which we set overflow property to 'hidden' so we won't see a scrollbar inside it.

// ONLINE-RUNNER:browser;

<html>
<head>
  <style>   
 
    div {
    	border: 1px solid red;
    }
    
    div.left {
      	box-sizing: border-box;  /* <------- required */
      	width: 50%;  /* <------------------- required */
      	float: left;  /* <------------------ required */
    }
    
    div.right {
    	overflow: hidden;  /* <------------- required */
    }
    
  </style>
</head>
<body>
  <div>
    <div class="left">1</div>
    <div class="right">2</div>
  </div>
</body>
</html>

3. Using position property 

In this solution we make a containter <div> with position: relative. Then we create two children <div> elements, set their position  property to absolute and initialize their width value with 50%.

// ONLINE-RUNNER:browser;

<html>
<head>
  <style>   
 
    div {
        border: 1px solid red;
    }

    div.container {
        position: relative;  /* <---------- required */
        width: 100%;  /* <----------------- required */
        height: 20px;  /* <---------------- required */
    }

    div.left {
        position: absolute;  /* <---------- required */
        left: 0;  /* <--------------------- required */
        top: 0;  /* <---------------------- required */
        bottom: 0;  /* <------------------- required */
        width: 50%;  /* <------------------ required */
        box-sizing: border-box;  /* <------ required */
    }

    div.right {
        position: absolute;  /* <---------- required */
        top: 0;  /* <---------------------- required */
        right: 0;  /* <-------------------- required */
        bottom: 0;  /* <------------------- required */
        width: 50%;  /* <------------------ required */
        box-sizing: border-box;  /* <------ required */
    }
    
  </style>
</head>
<body>
  <div class="container">
    <div class="left">1</div>
    <div class="right">2</div>
  </div>
</body>
</html>

Note:
Read more about position property here.

CSS

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join