CODEWITHSUNDEEP
asp.netcss
dinotom
dinotom

Reputation: 5162

cant get div's aligned

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.

Upvotes: 0

Views: 65

Answers (4)

Ankush Jain
Ankush Jain

Reputation: 6999

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

Upvotes: 0

Kundan Singh Chouhan
Kundan Singh Chouhan

Reputation: 14282

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.

Upvotes: 0

Rob Allen
Rob Allen

Reputation: 2911

you could float the first div left and assuming there is enough width to hold both they should be aligned at the top.

http://jsfiddle.net/Z93dM/

Upvotes: 1

OneChillDude
OneChillDude

Reputation: 8006

You could add position: absolute; to your divs. This will allow set their position to be in a fixed spot, relative to the browser window. 

.myDiv{
position: absolute;
top: 30px;
}

read more about it at www.w3schools.com

Upvotes: 0

Related Questions