Menu
I want #first to be aligned to the left of #container and #second to the right.
For this, I'm using float: left; on #first and float: right; on #second.
This, however, results in #first aligning left of the #container and #second just next to it. Why is this the case, and how can I achieve what I desire?
This is what I want:
This is what I'm getting:
Here's my code:
<head>
<style>
#container {
width: 500px;
margin: 0 auto;
border: 1px solid #000;
}
#first {
float: left;
}
#second {
float: right:
}
</style>
</head>
<body>
<div id="container">
<div id="first">
<p>first</p>
</div>
<div id="second">
<p>second</p>
</div>
</div>
</body>
776
asked Dec 29 '25 07:12
Well, well. No need to create an :after-property for containing the floats, just use overflow: hidden; on the container.
<head>
<style>
#container {
width: 500px;
margin: 0 auto;
border: 1px solid #000;
overflow: hidden;
}
#first {
float: left;
}
#second {
float: right;
}
</style>
</head>
<body>
<div id="container">
<div id="first">
<p>first</p>
</div>
<div id="second">
<p>second</p>
</div>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
