If i have a very simple page such as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link href="./CSSFormLayout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content-wrapper">
<div class="form-leftHalf">
<div class="row"><label>First Name:</label><input type="text" runat="server"/></div>
<div class="row"><label>Lodgement date frame (dd/mm/yyyy)</label><input type="text" /></div>
<div class="row"><label>Age:</label><input type="text" runat="server"/></div>
<div class="row"><label>Occupation:</label><textarea></textarea></div>
</div>
<div class="form-rightHalf">
<div class="row"><label>Surname:</label><input type="text" runat="server"/></div>
<div class="row"><label>Lodgement date to (dd/mm/yyyy)</label><input type="text" /></div>
<div class="row">
<label>XXX:</label>
<select>
<option>dog</option>
<option>bird</option>
<option>cat</option>
</select>
</div>
</div>
</div>
</body>
</html>
And a CSS file such as:
div#content-wrapper
{
position: relative;
left: 15%;
border: 1px solid gray;
background-color: Gray;
width: 936px;
}
.form-leftHalf
{
float: left;
}
Why does the content-wrapper div not respond to TOP values when they are percentage. You will find with this page that if you change the UNITs of the TOP property from % to pixels you can affect the div's box.
I'm guessing it's because it's parent container doesn't have a TOP property explicitly set and therefore using position 'relative' on its children as a percentage won't work...ie percentage of undefined is, well, undefined.
No comments:
Post a Comment