Home/ Questions/Q 8443531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T09:09:50+00:00

I am having a difficult time getting the right positional css for a layout

  • 0

I am having a difficult time getting the right positional css for a layout with a main header div, a left side that holds an image and a right side that has two pieces on top of each other. The HTML and CSS follow, I removed all my non essential css and the positional css.

<!DOCTYPE html >

<html lang="en"">
<head runat="server">
<title></title>
<link href="Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
    <div id="header">

<div id="hdrleft">
<div class="hdrimage">
</div>
</div>
    <div id="hdrright">
    <div class="logindisplay">
    </div>
    <div class="logotransitions">
    </div>
    </div>
</div>
<div>
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

    </asp:ContentPlaceHolder>
</div>
</form>
</body>


#header{
width:800px;
height:250px;
}
#hdrleft{
height:240px;
width:540px;
}
.hdrimage
{
display:inline;
float:left;
height:230px;
width:520px;
background-color:green;
}

#hdrright
{

width:240px;
padding: 0px 8px 0px 8px;
}

.logindisplay 
{
display:inline;
float:right;
height:240px;
height:80px;
width:240px;    
background-color:red;
}

.logotransitions 
{
 display:inline;
float:right;
height:240px;
height:155px;
width:240px;    
background-color:blue;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need #hdrleft and #hdrleft to add the float attribute to break the flow:

    #hdrleft {
    height:240px;
    width:740px;
    float: left;
}
#hdrright {
    height:240px;
    width:240px;
    /* padding: 0px 8px 0px 8px; //Add to child elements as margin instead. */
    float: right;
}
    • 0