Languages
[Edit]
EN

CSS - display two divs next to each other

21 points
Created by:
DrJoystick
465

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.

Alternative titles

  1. CSS - one div next to each other
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

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