Reputation: 339
I want to have two columns on the bottom of this webpage I'm making, but they're coming out on top of each other instead of next to each other. What am I doing wrong?
Here's the html:
<!doctype html>
<html>
<head>
<meta charset=utf-8">
<title>Untitled Document</title>
</style>
<style type="text/css">
@import url("adobeIndex.css");
</style>
</head>
<body>
<div id="container">
<div id="banner">Content for id "banner" Goes Here</div>
<div id="left-text">Content for id "left-text" Goes Here</div>
<div id="1-left-column">Content for id "1-left-column" Goes Here </div>
<div id="1-right-column"> Content for id "1-right-column" Goes Here</div>
</div>
</body>
</html>
And the CSS:
@charset "utf-8";
/* CSS Document */
#container {
width:968px;
background: #00F;
margin:auto;
padding-left:10px;
padding-right:10px;
overflow:hidden;
}
#left-text {
width:300px;
height:400px;
margin-top:20px;
margin-bottom:20px;
}
#1-left-column, #1-right-column {
width: 464px;
float: left;
}
#1-right-column {
margin-left: 20px;
}
Upvotes: 0
Views: 632
Reputation: 1000
Don't start your id names with numbers, use left-column
and right-column
or one-left-column
and one-right-column
instead
Upvotes: 2