Float not working

Hi, I’m new to Sitepoint.

How am I supposed to let people see my code?

I guess I’ll just have to include it here… :confused:

I am trying to float a column to the right side of my practice webpage but when I do that everything below the column gets floated too!!!

Here is my XHTML…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
			"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>TITLE</title>

	<link type="text/css" rel="stylesheet" href="Layouts_02_CreateSectionsUsingDIVs.css" />
    </head>

    <body>
	<div id="header">HEADER
	</ div>

	<div id="sidebar">SIDEBAR
	    <p>
	    Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
	    Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
	    Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
	    Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
	    Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
	    Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
	    Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
	    Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
	    </p>
	</ div>

	<div id="main">
	    <p>
	    BODY<br />
	    Lorem ipsum dolor sit amet, consectetur
	    adipiscing elit. Quisque vehicula pharetra diam, ut porta risus blandit
	    et. Etiam in urna orci, vel ultrices mauris. Maecenas venenatis, eros a
	    mollis consequat, augue turpis adipiscing dui, sed convallis velit
	    nulla eu mi. Duis sit amet euismod mauris. Phasellus enim quam,
	    pellentesque nec consectetur non, fringilla at purus. Vivamus eleifend
	    gravida sem. Cras nec nibh sit amet nisl tempor interdum sed id tortor.
	    Morbi orci orci, interdum vel accumsan et, accumsan vitae eros.
	    Curabitur quis nunc turpis, nec mollis mauris. Suspendisse adipiscing
	    dignissim odio, et gravida eros euismod ut. Aliquam id interdum tellus.
	    Morbi bibendum sollicitudin vestibulum. Donec id nunc non ligula
	    consequat accumsan. Cum sociis natoque penatibus et magnis dis
	    parturient montes, nascetur ridiculus mus. Vivamus euismod nibh at erat
	    ultrices pulvinar. Nullam dapibus ultricies venenatis. Nunc mattis,
	    neque congue congue cursus, metus eros luctus tellus, et molestie enim
	    libero a nunc.
	    </p>

	    <p>
	    Nulla ante neque, rhoncus non ultrices vitae, dapibus vitae justo.
	    Fusce sit amet augue non mi lacinia ornare. Mauris magna leo, facilisis
	    a malesuada a, vehicula quis enim. Suspendisse molestie ultrices eros,
	    sed lacinia quam molestie sit amet. Etiam eget risus id magna blandit
	    sollicitudin. Sed laoreet lobortis urna eget ullamcorper. In
	    scelerisque aliquet tortor in tincidunt. Morbi in dui sit amet urna
	    porttitor vestibulum posuere sit amet odio. Cum sociis natoque
	    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
	    Morbi scelerisque elit eget neque venenatis auctor eu ac elit. Vivamus
	    et dapibus magna. Integer vitae dui id turpis placerat laoreet non et
	    magna. Morbi at elit congue magna sodales iaculis et non elit. Maecenas
	    laoreet velit vel erat mattis vel dapibus dui gravida. Pellentesque
	    porta elementum lectus, feugiat rutrum augue aliquam ac. In hac
	    habitasse platea dictumst.
	    </p>

	    <p>
	    Pellentesque luctus semper diam, eu cursus est suscipit quis. Aliquam
	    laoreet molestie enim, sed aliquet diam congue at. Pellentesque vel
	    magna in ligula condimentum volutpat. Nunc dictum nibh aliquet nulla
	    mattis adipiscing. Nam porttitor nibh id nisi varius tempus porttitor
	    odio pellentesque. Sed posuere purus nec velit sollicitudin laoreet.
	    Duis sit amet massa vel dui cursus scelerisque in eu dolor. Aenean
	    interdum suscipit imperdiet. Nam elementum lacus eu dolor sagittis
	    sodales. Proin tempus vulputate tempus. Donec a vehicula sem. Donec
	    eget lectus sapien.
	    </p>
	</ div>

	<div id="footer">FOOTER
	</ div>
    </body>
</html>

Here is my CSS…


body {
  font: small/1.6em Verdana, Helvetica, Arial, sans-serif;
}

#header, #footer {
    background: orange;
}

#main {
    background: aqua;
    float: none;
}

#sidebar {
    background: silver;
    width: 200px;
    float: right;
}

What am I doing wrong???

Debbie

Hi!

I put your entire code (HTML and CSS) into my editor and remake it like below. I did not change any line from .CSS document. Just the HTML. On my note is working now! See the HTML again: Copy and paste the code below an replace yours. I hope it will now work as you want!

<!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” />
<link type=“text/css” rel=“stylesheet” href=“css/Layouts_02_CreateSectionsUsingDIVs.css” />
<title>Untitled Document</title>
</head>

<body>
<div id=“header”> <!–HEADER–>
</div>
<div id=“sidebar”> <!–SIDEBAR–>
<p>
Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
</p>
</div>

<div id=“main”>
<p>
BODY<br />
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vehicula pharetra diam, ut porta risus blandit
et. Etiam in urna orci, vel ultrices mauris. Maecenas venenatis, eros a
mollis consequat, augue turpis adipiscing dui, sed convallis velit
nulla eu mi. Duis sit amet euismod mauris. Phasellus enim quam,
pellentesque nec consectetur non, fringilla at purus. Vivamus eleifend
gravida sem. Cras nec nibh sit amet nisl tempor interdum sed id tortor.
Morbi orci orci, interdum vel accumsan et, accumsan vitae eros.
Curabitur quis nunc turpis, nec mollis mauris. Suspendisse adipiscing
dignissim odio, et gravida eros euismod ut. Aliquam id interdum tellus.
Morbi bibendum sollicitudin vestibulum. Donec id nunc non ligula
consequat accumsan. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vivamus euismod nibh at erat
ultrices pulvinar. Nullam dapibus ultricies venenatis. Nunc mattis,
neque congue congue cursus, metus eros luctus tellus, et molestie enim
libero a nunc.
</p>

<p>
Nulla ante neque, rhoncus non ultrices vitae, dapibus vitae justo.
Fusce sit amet augue non mi lacinia ornare. Mauris magna leo, facilisis
a malesuada a, vehicula quis enim. Suspendisse molestie ultrices eros,
sed lacinia quam molestie sit amet. Etiam eget risus id magna blandit
sollicitudin. Sed laoreet lobortis urna eget ullamcorper. In
scelerisque aliquet tortor in tincidunt. Morbi in dui sit amet urna
porttitor vestibulum posuere sit amet odio. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Morbi scelerisque elit eget neque venenatis auctor eu ac elit. Vivamus
et dapibus magna. Integer vitae dui id turpis placerat laoreet non et
magna. Morbi at elit congue magna sodales iaculis et non elit. Maecenas
laoreet velit vel erat mattis vel dapibus dui gravida. Pellentesque
porta elementum lectus, feugiat rutrum augue aliquam ac. In hac
habitasse platea dictumst.
</p>

<p>
Pellentesque luctus semper diam, eu cursus est suscipit quis. Aliquam
laoreet molestie enim, sed aliquet diam congue at. Pellentesque vel
magna in ligula condimentum volutpat. Nunc dictum nibh aliquet nulla
mattis adipiscing. Nam porttitor nibh id nisi varius tempus porttitor
odio pellentesque. Sed posuere purus nec velit sollicitudin laoreet.
Duis sit amet massa vel dui cursus scelerisque in eu dolor. Aenean
interdum suscipit imperdiet. Nam elementum lacus eu dolor sagittis
sodales. Proin tempus vulputate tempus. Donec a vehicula sem. Donec
eget lectus sapien.
</p>
</div>

<div id=“footer”> <!–FOOTER–>
</div>
</body>
</html>

Looks like I mistakenly was typing tags in wrong like this…

</ div>

I think that was breaking things.

Debbie