Hello,
I have been trying hard to learn html/css the past few weeks and currently am stuck at the moment. I cannot get the sidebar to float up next to the content on the right side of the page.
Can someone please look at my html & css and see if I am just missing something simple here. Thank you very much!
To see the margins, try the Firebug plugin for Firefox. It’s really great to see how all the styles are being applied to the different html elements.
attachments are still pending approval.
But I can still give you a good tip for dealing with floats.
Give both the sidebar and the content part ugly background colours. This will show you how big these boxes really are. It won’t show you margins, which also take up room, but usually when a float won’t fit beside another box and drops down, it’s because one of those boxes is too wide. And with background colours on them you’ll usually see that.
Whenever you get float drop (and I’m also assuming your float is first in source, since it has to be to come up to the same level), be sure to take the total width of the container everyone sits in, and add up your widths, side paddings and side margins of your float and content boxes, and make sure you aren’t trying to do the TARDIS thing (be bigger on the inside than on the outside).
Hi,
As already mentioned above the problem is that your floated sidebar comes after the static content div and therefore will only float from where it is in the html and will not rise up against html above it in the html. If that were true then the float would float up and out through the roof :).
Either move the sidebar html in fron of the content div or if you want the content div first in source then float both. It’s usually better in a two column layout to float both columns where possible.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Faithology - All Religions. All Answers.</title>
<link rel="stylesheet" type="text/css" href="css/main2.css">
<style>
@charset "UTF-8"; /* CSS Document */ /********************* CSS RESET *********************/
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
ol {
margin-left: 1.4em;
list-style:decimal;
}
ul {
margin-left: 1.4em;
list-style:square;
}
img { border: 0; } /********************* Wrapper & Overall Site *********************/
body { font-family: Arial, Helvetica, sans-serif; }
#wrapper {
min-width:760px;
max-width: 1000px;
margin:auto;
overflow:hidden;
} /********************* NAVIGATION *********************/
#header{
width:100%;
overflow:hidden;
}
#logo {
width: 50px;
height: 25px;
background-color:#3300FF;
margin: 10px;
padding: 10px;
float:left;
}
ul.nav li {
list-style-type: none;
margin-left:0;
list-style:none;
padding:6px 0 5px 0;
border-bottom: 1px dashed #000;
}
ul.nav a {
width: 12em;
display: block;
border: 1px dashed #000;
border-bottom: none;
padding: 5px;
margin-right: 5px;
background: #EAEAEA;
text-decoration: none;
color: #333;
text-align: center;
}
ul.nav li {
float: right;
margin-top: 20px;
} /********************* BODY AND CONTENT AREA *********************/
#content {
background: orange;
clear:both;
float:left;
width:80%;
}
#sidebar {
background-color: blue;
width:20%;
float:right;
margin-left:-2px;/* ie rounding bug*/
} /********************* FOOTER *********************/
#footer { clear:both; }
</style>
</head>
<body>
<div id="wrapper">
<div id="header"> <a id="logo" href="index.html">FAITHOLOGY LOGO</a>
<ul class="nav">
<li><a href="about.html">Company</a></li>
<li><a href="religions.html">Religions</a></li>
<li><a href="home.html">Home</a></li>
</ul>
</div>
<div id="content">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae Here at Faithology, we strongly believe that:
<ol>
<li>this is a bullet point</li>
<li>this is a bullet point</li>
<li>this is a bullet point</li>
</ol>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia d
</p>
</div>
<div id="sidebar">
<p> "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>
<div id="footer">
<p>This is the Footer</p>
</div>
</div>
</body>
</html>
However be careful with narrow percentage columns as they soon become too small for their content unless they hold only fluid text.