Monday, 20 June 2011

CSS Questions

If i have a very simple page such as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" >
    <title>Untitled Page</title>
    <link href="./CSSFormLayout.css" rel="stylesheet" type="text/css" />
    <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 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">

And a CSS file such as:

    position: relative;   
    left: 15%;
    border: 1px solid gray;
    background-color: Gray;
    width: 936px;
    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 percentage of undefined is, well, undefined.

No comments:

Post a Comment