Hi,
I have created two rounded corner boxes which i would like to be aligned next to each other .But the 2nd box is appearing directly below the first one inspite of me using float:left on the 1st one. Any way to fix this would be really helpful. Below are the html and the css.
The HTML :
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="layout.css"/>
</head>
<body>
<div id="containerDiv">
<!-- Box 1 -->
<div id="box1" class="boxDiv">
<div class="upperRound"></div>
<div class="boxTagLine">
Some Tag Line
</div>
<div class="boxContent">
Heres some content
</div>
<div class="lowerRound"></div>
</div>
<!-- Box 2 -->
<div id="box2" class="boxDiv">
<div class="upperRound"></div>
<div class="boxTagLine">
Some Tag Line
</div>
<div class="boxContent">
Heres some content
</div>
<div class="lowerRound"></div>
</div>
</div>
</body>
</html>
The CSS :
#containerDiv {
width: 1000px;
}
.boxDiv {
width: 248px;
}
.upperRound {
background-image: url('rounded_upper.gif');
height: 20px;
}
.lowerRound {
background-image: url('rounded_lower.gif');
height: 20px;
}
.boxContent,.boxTagLine {
border-left: 2px solid #B5B5B5;
border-right: 2px solid #B5B5B5;
padding: 10px;
background-color:#F8F8F8;
solid #B5B5B5;
}
.boxTagLine {
color:#0066FF;
}
#box1 {
float:left;
}