In web development, there are countless ways to position HTML elements. One common layout requirement is to have two div elements side by side. This layout is used frequently in web design, especially when there is a need to separate content into different sections horizontally. There are several ways to achieve this layout, including using CSS properties like float, flexbox, and grid.
This article will guide you on how to position two div elements side by side using various methods, with examples for each.
Method 1: Using CSS Float Property
The CSS float property was initially designed to allow web developers to wrap text around images, but it’s often used to create multi-column layouts as well.
CSS:
1 2 3 4 5 6 7 8 | .container { width: 100%; overflow: auto; } .box { width: 50%; float: left; } |
HTML:
1 2 3 4 | <div class="container"> <div id="one" class="box">Content 1</div> <div id="two" class="box">Content 2</div> </div> |
In this example, the .box class elements will float to the left, aligning side by side, until there’s no more horizontal space left. The overflow: auto in the .container class is necessary to ensure the container fully contains its floated children.
However, the use of float for layout purposes has been considered a bit of a hack, and it can lead to clear fix issues. It has also largely been replaced by the newer and more robust layout modules in CSS, like Flexbox and Grid.
Method 2: Using CSS Flexbox
Flexbox, or the Flexible Box Layout, is a more modern way to arrange items in a container. Flexbox makes it easy to design flexible responsive layout structure without using float or positioning.
CSS:
1 2 3 4 5 6 | .container { display: flex; } .box { width: 50%; } |
HTML:
1 2 3 4 | <div class="container"> <div class="box">Content 1</div> <div class="box">Content 2</div> </div> |
The display: flex declaration turns the .container into a flex container and its children (the .box class elements) into flex items. The flex items are then placed along a horizontal line.
Method 3: Using CSS Grid
CSS Grid Layout is the most powerful layout system available in CSS. It’s a two-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a one-dimensional system.
CSS:
1 2 3 4 | .container { display: grid; grid-template-columns: 1fr 1fr; } |
HTML:
1 2 3 4 | <div class="container"> <div class="box">Content 1</div> <div class="box">Content 2</div> </div> |
In this example, the display: grid declaration turns the .container into a grid container, and the grid-template-columns: 1fr 1fr declaration creates two columns of equal width. Each child element (the .box class elements) will be placed in these columns.
Conclusion
Choosing the right method to place two div elements side by side depends on your project needs and the browser compatibility you’re aiming for.
If you’re working on a modern project and need more flexible and powerful tools for creating complex layouts, Flexbox and Grid are excellent choices. If you’re aiming for maximum compatibility with older browsers, then using the float property might be your best bet.
Remember to always test your layouts in different browsers and on different devices to ensure your design looks great for everyone. Happy coding!
