...

View Full Version : Float Issue



lmw1
04-19-2011, 03: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...

http://www.americanwebmakers.com/demo_college

Thanks in advance!

bullant
04-19-2011, 04: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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<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;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER and NAVIGATION BAR</h1>
</div>
<div id="content">
<div class="gutter"> <!-- to set constant gutter around the content -->
<h1>LEFT MAIN CONTENT COLUMN</h1>
</div>
</div>
<div id="sidebar">
<div class="gutter"> <!-- to set constant gutter around the content -->
<h1>RIGHT SIDE BAR COLUMN</h1>
</div>
</div>
<div id="footer">
<h1>FOOTER BAR</h1>
</div>
</div>
</body>
</html>
To reverse the order of the main content and sidebar columns just reverse their float values.

_Aerospace_Eng_
04-19-2011, 04: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.

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

Hmmmm?

_Aerospace_Eng_
04-19-2011, 04: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.

lmw1
04-19-2011, 04: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.

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum