View Full Version : Float Issue

04-19-2011, 04:25 AM
Bullant you out there?

I "think" I'm having a float issue. I have to put a negative top margin on the bigger right content box of -250px. Shouldn't it just float to the right and line itself up at the top like the smaller box on its left is?

Or did I do it right after all?

This time you won't need your crystal ball (jk). Here's the url...


Thanks in advance!

04-19-2011, 05:09 AM
It looks like you have a 2 column layout with a header above the 2 side by side columns. Imo you shouldn't need to have -ve margins.

Maybe use this demo skeleton 2 column layout with header and footer as a guide. (I just posted it in a similar thread)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#wrapper {
width: 900px;
margin: 0px auto 0px auto;
border: 1px solid red;
height: auto;
#header {
border: 1px solid blue;
#content {
width: 70%;
float: left;
#content .gutter {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
#sidebar {
width: 30%;
float: right;
#sidebar .gutter {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
border: 1px solid green;
#footer {
clear: both;
border: 1px solid black;
<script type="text/javascript"></script>
<div id="wrapper">
<div id="header">
<div id="content">
<div class="gutter"> <!-- to set constant gutter around the content -->
<div id="sidebar">
<div class="gutter"> <!-- to set constant gutter around the content -->
<div id="footer">
<h1>FOOTER BAR</h1>
To reverse the order of the main content and sidebar columns just reverse their float values.

04-19-2011, 05:13 AM
You did it wrong. I'm guess you have no idea what clear:both does. Remove it from the left top nav, your content would then slide up without the negative top margin. Also you need to close your header element before your wrapper.

04-19-2011, 05:21 AM
I did as you suggested, but it's still to far down.


04-19-2011, 05:39 AM
You didn't close your header properly. Check again. You also have clear:both; on your #main stuff. Remove it from there too.

04-19-2011, 05:44 AM
Worked like a charm! Thank you.

One more thing now...

On the left top nav, my button images are not links as they should be. What could be causing that?

Yep. If it aint one thing...it's another eh?

Thank you for your help. I do appreciate it.

04-19-2011, 01:21 PM
They work as links just fine for me.