Reputation: 119
I'm messing around with some css positioning for a class I'm taking and I'm having trouble putting two divs side by side using float.
When i use float left on the #first div the #second div doesn't move to the right of #first.
Not sure what I'm doing wrong.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div id="first">First</div>
<div id="second">Second</div>
</div>
</body>
</html>
And here's the CSS:
html, body, div, p {
padding: 0;
margin: 0;
}
.container {
border: 2px solid black;
width: 1280px;
height: 500px;
margin: 10px auto 0;
}
.container div {
margin: 5px;
padding: 10px;
}
#first {
border: 2px solid red;
width: 25%;
float: left;
}
#second {
border: 2px solid green;
width: 25%;
}
Upvotes: 0
Views: 35
Reputation: 26444
divs
by default are block elements, meaning they take up the full width of the screen. To fix this, simply add the display style inline-block
to both divs.
html, body, div, p {
padding: 0;
margin: 0;
}
.container {
border: 2px solid black;
width: 1280px;
height: 500px;
margin: 10px auto 0;
}
.container div {
margin: 5px;
padding: 10px;
}
#first {
border: 2px solid red;
width: 25%;
display: inline-block;
float: left;
}
#second {
border: 2px solid green;
width: 25%;
display: inline-block;
}
<div class="container">
<div id="first">First</div>
<div id="second">Second</div>
</div>
Upvotes: 1