CSS Not Floating Correctly Book Tutorial

Get Started
1

Hey everyone,
Im doing the tutorial out the book “Build Your Own Web Site The Right Way: Using HTML & CSS,” on chapter 7, and Im having trouble with the last part of the chapter when it comes to floating the forms to the left on pg.278. The forms are suppose to line up within the legend to the left. The label of the form are suppose to be sitting on the left with a width of 240px, and just to the right of the label is where the text input area is suppose to sit. There are five labels and text inputs in total. My problem is getting them to line up properly. The first label and text input area “Contact Name” works properly after entering the css code:



form.contact label.fixedwidth {
    display: block;
    width: 235px;
    float: left;
    }

But the remaining labels and text inputs are all over the place:

This is what the layout is suppose to look like from the book:

[B]

Here is my CSS style source codes (Most of the css rules for this page are towards the bottom):[/B]
[I]


@charset "utf-8";
/* CSS Document */
/* CSS for Bubble Under site */

h1{
    font-size: x-large;
    background-color: navy;
    color: white;
    padding-top: 2em;
    padding-bottom: .2em;
    padding-left: .4em;
    margin: 0;
    background: navy url(background/header-bg.jpg) repeat-y right;
}

h2{
    color: navy;
    font-size: 130%;
    font-weight: normal;
    padding-top: 15px;
}

h1, h2, h3 {
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}

body{
    background-color: #e2edff;
    font-family: Verdana, Geneva, sans-serif;
    line-height: 125%;
    padding: 0;
    margin: 0;
}

p{
    font-size:small;
    color: navy;
}

em{
    text-transform: uppercase;
}
/* links */
a{
    font-weight: bold; 
}

a:link{
    color: black:
}

a:visited{
    color: navy;
}

a:hover{
    text-decoration: none;
    color: white;
    background-color: navy;
}

a:active { 
    color: aqua;
    background-color: navy;
}

/* Slogan, Style, Background */
#tagline p{
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    border-top: 3px solid #7da5d8;
    border-bottom: 3px solid #7da5d8;
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: .8em;
    margin: 0;
    background: #bed8f3 url(background/tagline-fade.jpg) repeat-y right;
}

/* Header style */
#header { 
    border-top: 3px solid #7da5d8;
}

.fun{
    color: #399;
    font-family: Georgia, "Times New Roman", Times, serif;
    letter-spacing: 0.05em;
}



/*Absolute postion*/
#navigation, #bodycontent, #header {
    position: absolute;
}

/* position of nav & body divs */
#navigation, #bodycontent {
    top:107px;
}

/*body pushed to the left*/
#bodycontent {
    left: 200px;
}

/*-header and tagline fill the open browser space*/
#header {
    width: 100%;
}

/* Feature Image */ 
img.feature {
    float: right;
    margin: 10px;
}
/* Navigation style */
li {
    font-size: small;
    list-style-type: none;
}

/* Gallery Caption */
.galleryphoto p {
    font-size: 65%;
    font-weight: bold; 
    margin-top: 0;
    width: 430px; 
    line-height: 1.4em;
}

/* Gallery Photo Border*/ 
.galleryphoto img{
    border: 15px solid white;
}

/* Gallery Photo divider */
.galleryphoto {
    padding-bottom: 20px;
    border-bottom: 1px navy solid;
    margin-bottom: 10px;
}
    
/* Photo Credit */
.photocredit {
    font-weight: normal;
    color: gray;
}

/* navigation background*/
#navigation {
    width: 180px;
    height: 484px;
    background: #7da5d8 url(background/nav-bg.jpg) no-repeat;
}
/* table dcoration */
table {
    border-collapse: collapse;
    border: 1px solid black;
}

/* Table header text and background */
th {
    text-align: left;
    background: gray;
    color: white; 
    padding: 0.2em;
}

/* Table data border */
td {
    border: 1px solid black; 
    padding: 0.2em;
}

/* Cell spacing */
table.events {
    border-collapse: collapse;
}

/* border style and padding */
table.events th, table.events td {
    padding: 4px;
    border: 1px solid #060;
}

/* font-size for events and header*/
table.events th {
    font-size: x-small;
    background: #241374 url(background/header-bg.jpg);
    color: #fff;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 2px;
    padding-right: 2px;
}

table.events {
    font-size: small;
}

table.events. th {
    font-size: x-small;
    text-align: left;
}

/* Table Caption */
table.events caption {
    color: #006;
    font-size: small;
    text-align: left;
    padding-top: 5px;
    font-weight: bold;
}

table.events td {
    font-size: small;
    background: #e2edff url(background/td.jpg) repeat-x top;
}

/*Contact Forms style */
form.contact fieldset {
    border: 2px solid navy;
    padding: 10px;
}

form.contact legend {
    font-weight: bold;
    font-size: small;
    color: navy;
    padding: 5px;
}

form.contact {
    padding: 0;
    margin: 0;
    margin-top: -15px;
    line-height: 139%;
}

form.contact label {
    font-weight: bold;
    font-size: small;
    color: blue;
}

form.contact label.fixedwidth {
    display: block;
    width: 235px;
    float: left;
    }[/I]

And heres the html codes for the page:
[I]


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Us</title>
<link href="style1.css" rel="stylesheet" type="text/css"/>

</head>


<body>
<div id="header"><!--Header-->
<div id="sitebranding"><!--Sitebranding-->
    <h1>BubbleUnder.com</h1>
    </div> <!--sitebranding close-->
       
<div id="tagline"><!--tagline-->
    <p>Diving Club for the south-west UK -let's make a splash!</p>
    </div><!--tagline close-->

</div><!--Header Close-->


<div id="navigation"> <!--Navigation-->
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="events.html">Events</a></li>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="gallery.html">Gallery</a></li>
    </ul>
    </div><!--navigation close-->




<!--bodycontent-->
<div id="bodycontent">

<h2>Contact Us</h2>
    <p> To let us know about a forthcoming diving event, please use the form below.</p>
     <form action="" method="post" class="contact">
         <fieldset>
            <legend>Tell us About A Dive Event"</legend>
            <div>
            <label for="contactname" class="fixedwidth">Contact Name</label>
            <input type="text" name="contactname" id="contactname"/>
            </div>
            <div>
            <label for="telephone" class="fixedwidth">Telephone Number</label>
            <input type="text" name="telephone" id="telephone"/>
            </div>
            <div>
            <label for="email" class="fixedwidth">Email Address</label>
            <input type="text" name="email" id="email"/>
            </div>
            <div>
            <label for="eventname" class="fixedwidth">What's the event called?</label>
            <input type="text" name="eventname" id="eventname" />
            </div>
            <div>
            <label for="eventdate" class="fixedwidth">When's the event happening?</label>
            <input type="text" name="eventdate" id="eventdate" />
            </div>
            
        </fieldset>
    </form>  
    <p>If you need to get in touch urgently, please call Bob Dovalina on 01793 641207. For everything else please <a href="mailto:bob@bubbleunder.com">drop us a line by email</a>.</p>
  
    
</div><!--bodycontent close-->

</body> <!--Main body close-->
</html>

[/I]

I really need some help here, i pretty frustrated and I’ve been obsessing over this. I’m thinking it has something to do with the line-height and the size of the legend that’s making it float on accordingly. Thanks everyone in advance.

2

Add a bottom margin to the input.

e.g.


form.contact input{margin-bottom:5px}
3

Thanks for responding,
So added the clear: both; rule and it fixed the scattered problem and lined up the labels and text input forms, but now they are just sitting on top of each other. How do you add space between them similar to how the books is.

Here’s where im at now, after adding the clear: both; rule. There no spacing between the text input forms. I tried to add margins around each id but I had no success.

300×300 14.3 KB

Im trying to get some margin spaces between the text input forms like this:

300×300 14.3 KB

Thanks again.

4

Add to fixedwidth the line clear:both;