How to align 3 divs (left/center/right) inside another div?

Question

2 Answers

Soni Kumari · Answer 1 · 2019-09-02T11:16:31+0000

In CSS, you can use the divs like so (floats first):

<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>

Note: You can also float right, then left, then center. The important thing is that the floats come before the "main" center section.You often want last inside #container this snippet: <div style="clear:both;"></div> which will extend #container vertically to contain both side loats instead of taking its height only from #center and possibly allowing the sides to protrude out the bottom.

Aparna · Answer 2 · 2024-11-08T04:36:36+0000

To align three div elements (left, center, and right) inside a parent div, you can use CSS Grid. Here’s how to achieve it using css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Align Divs</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr auto 1fr; /* Left and right take available space */
width: 100%; /* Adjust width as needed */
border: 1px solid #ccc; /* Optional for visualization */
align-items: center; /* Center vertically if needed */
}
.left, .center, .right {
padding: 10px; /* Optional for spacing */
}
.center {
text-align: center; /* Center the text inside the center div */
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</div>
</body>
</html>

How to align 3 divs (left/center/right) inside another div?

2 Answers

Related questions

Browse Categories