CSS to make two divs side by side
Layout Two Divs Side by Side with CSS
In web page layouts, it’s common to need to display two divs side by side. Using CSS layout properties, we can easily achieve this effect. This article will detail how to use CSS to display two divs side by side, and provide several code examples to help readers better understand.
1. Use the float property to display two divs side by side
Using the float property is one of the most common methods. By setting the float property of two divs to left or right, you can make them appear side by side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float Example</title>
<style>
.left {
float: left;
width: 50%;
background-color: #f2f2f2;
padding: 20px;
}
.right {
float: right;
width: 50%;
background-color: #e6e6e6;
padding: 20px;
}
</style>
</head>
<body>
<div class="left">
<h2>Left Content</h2>
<p>This is the content of the left div. </p>
</div>
<div class="right">
<h2>Right Content</h2>
<p>This is the content of the right div. </p>
</div>
</body>
</html>
Output:
In the above example, we created two divs and set their float properties to left and right, respectively, to display them side by side. The background color of the left div is light gray, and the background color of the right div is light gray.
2. Using Flexbox to Display Two Divs Side by Side
Flexbox is a powerful layout method that can easily achieve a variety of complex layout effects. By setting the display property of the parent element to flex, child elements can be displayed side by side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox example</title>
<style>
.container {
display: flex;
}
.item {
flex: 1;
padding: 20px;
}
.item:nth-child(odd) {
background-color: #f2f2f2;
}
.item:nth-child(even) {
background-color: #e6e6e6;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Left content</div>
<div class="item">Right content</div>
</div>
</body>
</html>
Output:
In the example above, we create a parent element, container, and set the display property to flex to make the child elements appear side by side. By setting the flex property of the child elements to 1, they share the width of the parent element. The background color of the left div is light gray, and the background color of the right div is light gray.
3. Use grid layout to arrange two divs side by side
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid layout example</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.item {
padding: 20px;
}
.item:nth-child(odd) {
background-color: #f2f2f2;
}
.item:nth-child(even) {
background-color: #e6e6e6; }
</style>
</head>
<body>
<div class="container">
<div class="item">Left content</div>
<div class="item">Right content</div>
</div>
</body>
</html>
Output:
In the example above, we create a parent element, container, and set the display property to grid to arrange the child elements in a grid layout. By setting the grid-template-columns property to 1fr 1fr, the two child elements share the width of the parent element. The background color of the left div is light gray, and the background color of the right div is pale gray.
4. Use inline-block to display two divs side by side
In addition to the method described above, you can also use the inline-block property to display two divs side by side. By setting the display property of two divs to inline-block, they will be displayed in the same row.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline-block example</title>
<style>
.left, .right {
display: inline-block;
width: 50%;
padding: 20px;
}
.left {
background-color: #f2f2f2;
}
.right {
background-color: #e6e6e6;
}
</style>
</head>
<body>
<div class="left">
<h2>Left content</h2> <p>This is the content of the left div. </p>
</div>
<div class="right">
<h2>Right Content</h2>
<p>This is the content of the right div. </p>
</div>
</body>
</html>
Output:
In the above example, we create two divs and set their display property to inline-block, so that they appear in the same row. The background color of the left div is light gray, and the background color of the right div is light gray.
Through the above example code, we have detailed how to use CSS to display two divs side by side. Readers can choose the appropriate method to achieve web page layout according to their needs. We hope that this article will help readers better understand and apply CSS layout techniques.