This code creates two div containers side by side in an HTML layout. The left container has a yellow background, while the right one has a green background. It helps organize content or design simple website layouts.
You can use this code on websites for designing side-by-side content sections. It creates a balanced and organized layout. This enhances user experience and readability.
How to Create Two Div Side By Side In HTML
1. Begin by creating a new HTML file. Inside the <body> tag, create a <div> element with an id of “container”. Inside this container div, create two more divs, one for each content section. Give these divs appropriate classes or IDs for styling.
<html>
<head></head>
<body>
<div id="container">
<div class="one"><p>This is the left container.</p>
</div>
<div class="two"><p>This is the right container.</p>
</div>
</div>
</body>
</html>
2. Next, you’ll add CSS to style the layout. In your CSS file or within a <style> tag in the <head> of your HTML file, apply the necessary styles to achieve the side-by-side layout.
html, body {
left: 0;
margin: 0;
background:white;
height:100%;
}
p{
font-family:calibri;
padding-left:10px;
}
#container{
margin: 0 auto;
width:600px;
padding-top:50px;
}
.one{
background:#FFEB3B;
width:300px;
height:400px;
float:left;
}
.two{
width:300px;
height:400px;
background:#8BC34A;
overflow:hidden;
}
/*Feel free to play around with widths, heights; etc.*/
By following this tutorial, you’ve learned how to create two div elements side by side in HTML using CSS. This technique allows you to design visually appealing layouts with separate content sections, enhancing the overall user experience of your website. Experiment with different styling options to achieve the desired look and feel for your webpage.
