Question

I am having trouble getting two divs aligned horizontally

Here is the html in my aspx master page;

           <div class="hdrimg">
           </div>
           <div class="rightofhdrimg">
                <asp:ContentPlaceHolder ID="HeaderRight" runat="server">  </asp:ContentPlaceHolder>
           </div>

Here is the CSS (I’m using CSS3);

.hdrimg
{
width: 680px;
margin-left: 8px;
height: 130px;
background-color: White;
background-image: url('Images/Banner/WebsiteHeader8.13.2012.jpg');
background-repeat: no-repeat;
background-size: 100%;
-moz-border-radius-bottomleft: 1em;
-webkit-border-bottom-left-radius: 1em;
border-bottom-left-radius: 1em;
 -moz-border-radius-bottomright: 1em;
-webkit-border-bottom-right-radius: 1em;
border-bottom-right-radius: 1em;

}

.rightofhdrimg
{
float: right;
display: inline-block;
background-color: #008000 ;
height: 190px;
width:240px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;

}

The div to the right of the header image should be a green back ground rectangle, which it is but its top edge is the bottom edge of the header image.

Answer 1

There is nothing so much to do this. You can define the css property of float to left on .hdrimg as like below:

.hdrimg {
  //existing stuff
  float:left;
}

It will behave as expected. But remember that there must be enough width space for both the div so that they can be fit in that.