Internet Marketing Business Forum

Steve · 08-01-2009, 02:09 PM

I'm trying to use "float" to get a sidebar. This code is supposed to allow for a -18em left margin on a 17 em sidebar that is floated to the right with the content to floated to the left with 20em padding. This should allow the sidebar to remain to the right without dropping down below the content.

But it doesn't work. What have I done wrong with this code?

<!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>Untitled Document</title>
<style type="text/css">
#content {
float:left;
padding: 0 20em 4em 3em;
background: #AAAAAA
}
#sidebar {
float: right;
width: 17em
margin: 0em 0em 4em -18em;
background: #888888
}
</style>
</head>
<body>
<DIV id="content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </DIV>
<div id="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 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 sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar</div>

</body>
</html>
Problem solved. The best answer saw far is from Kaat. Putting in the missing semi-colons fixed the problem. But there is an error in her reply. There is no need to set the width. This would ruin the effect of being about to resize the window without the sidebar being misplaced
Payneless:

I should have thought about percentages. That makes it much simpler. I've made the below changes, but had to be add <p> and </p> to the text and then be more specific with "#content p" and "#sidebar p" to get margins to work within the divs. Why would the margin sendings not work when nested within the "#content" declarations?

#content p {
margin: 1em 1em 1em 1em;
}
#sidebar p {
margin: 1em 1em 1em 1em
}
#content {
float:left;
width: 70%;
background: #AAAAAA;
padding 1em 1em 1em 1em;
}
#sidebar {
float: right;
width: 30%;
background: #888888;
padding 1em 1em 1em 1em;
}

08-01-2009, 02:09 PM	#1 (permalink)
Steve Status: Junior Member Join Date: Jul 2009 Posts: 8	What's wrong with this CSS Code? I'm trying to use "float" to get a sidebar. This code is supposed to allow for a -18em left margin on a 17 em sidebar that is floated to the right with the content to floated to the left with 20em padding. This should allow the sidebar to remain to the right without dropping down below the content. But it doesn't work. What have I done wrong with this code? <!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>Untitled Document</title> <style type="text/css"> #content { float:left; padding: 0 20em 4em 3em; background: #AAAAAA } #sidebar { float: right; width: 17em margin: 0em 0em 4em -18em; background: #888888 } </style> </head> <body> <DIV id="content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </DIV> <div id="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 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 sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar</div> </body> </html> Problem solved. The best answer saw far is from Kaat. Putting in the missing semi-colons fixed the problem. But there is an error in her reply. There is no need to set the width. This would ruin the effect of being about to resize the window without the sidebar being misplaced Payneless: I should have thought about percentages. That makes it much simpler. I've made the below changes, but had to be add <p> and </p> to the text and then be more specific with "#content p" and "#sidebar p" to get margins to work within the divs. Why would the margin sendings not work when nested within the "#content" declarations? #content p { margin: 1em 1em 1em 1em; } #sidebar p { margin: 1em 1em 1em 1em } #content { float:left; width: 70%; background: #AAAAAA; padding 1em 1em 1em 1em; } #sidebar { float: right; width: 30%; background: #888888; padding 1em 1em 1em 1em; }

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode