Can someone assist with this issue?
I'm trying to align the red div neatly to the right of the blue div within the main container. A visual representation of the problem is shown below:
Below is the code snippet:
* {
margin: 0;
padding: 0;
}
html {
background: rgb(132, 132, 132);
}
.centerObject {
width: 800px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px;
/* Half of Width */
margin-top: -300px;
/* Half of Height */
background: rgb(212, 208, 200);
border: 2px ridge rgb(75, 75, 75);
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="centerObject">
<div id="a" style="width: 200px; height: 100%; border: 1px solid blue;"></div>
<div id="b" style="width: 597px; height: 100%; border: 1px solid red; float: right;"></div>
</div>
</body>
</html>