CSS - display two divs next to each other
In this article we would like to show you how to display two divs horizontally next to each other using CSS.
Below example presents three different solutions, buy using:
display: flexstyle property,floatandoverflowstyle properties,positionstyle 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.