I'm just learning and I'm trying to make my 4 div's layout to my desired page size (not to whatever size the user's window is open to). Basic problem, but I can't get my right div to attach to the left div and not necessarily the right side of the user's window.
Here is my code and thank you in advance.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>all.about.me</title>
<link rel='stylesheet' type='text/css' href='me_stylesheet.css'/>
</head>
<body>
<div id="header">
<p>March 02, 2014
<br><br>Hello.
<br>
</p>
</div>
<div id="left"> </div>
</div>
<div id="right"> </div>
<div id="footer">
</a>
</div>
</body>
</html>
CSS:
p
{
font:10px verdana,sans-serif;
color: white;
padding-left: 10px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
body
{
background-color: red;
}
div {
border-radius: 0px;
}
#header {
height: 80px;
width: 600px;
background-color: black;
margin-bottom: 5px;
}
#footer {
height: 35px;
width: 600px;
background-color: black;
margin-bottom: 5px;
clear: both;
}
#left {
height: 385px;
width: 122px;
background-color: black;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
#right {
height: 385px;
width: 300px;
background-color: black;
float: right;
margin-right: 5px;
margin-bottom: 5px;
}
I know it's a basic question and I could probably find the answer on Google, but you coders in here always have different and unique ways of doing things that really does inspire creative coding. Thanks for the help.
I would suggest you use float: left on both .left and .right. That will place the right div to the right next to the left div.