Looking at this specific HTML webpage
<html>
<head>
<title>CSS Structure</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">Header 900x100 px</div>
<div id="righttop">RightTop <br />150x200 px</div>
<div id="lefttop">LeftTop 150x75 px</div>
<div id="content">Content 600x400 px</div>
<div id="rightbottom">RightBottom 150x200 px</div>
<div id="footer">Footer 900x100 px</div>
</body>
In addition to the CSS stylesheet below
body, div {
padding: 0;
margin: 0;
border: solid 1px;
width: 900px;
}
#header, #footer {
width: 898px;
clear: both;
height: 100px;
}
#righttop, #rightbottom{
float: right;
width: 150px;
height: 200px;
}
#rightbottom {
clear: right;
}
#content {
float: left;
width: 591px;
height: 403px;
}
#lefttop {
width: 150px;
height: 100px;
float: left;
}
Is there a way I could reposition the "RightBottom" box so it is directly below the "LeftTop" box but still maintains the overall structure?