...

View Full Version : CSS Float/Column Problem



harripwns
11-02-2007, 03:16 PM
Hi,
I'm making a layout and everything seems to be fine except for one thing.
Here are the positions of two divs (don't mind the missing layout):
http://coy-dreamer.awardspace.com/index-ff.html
I use the float property to get these two columns to be beside each other; they are, but one is underneath the other.
This depends on the order of how they appear in the HTML file. If I put the left div before the right div, the left div would then be underneath the right one.
Does anyone know how to fix this? Or does this problem have to do with something else than floats? Thanks for your time :).
PS: Let me know and I'll post the full page with layout and the CSS file.

effpeetee
11-02-2007, 03:37 PM
Too big margins on the divs.
Try this.

Frank



/* C O Y - D R E A M E R . C O M - CSS Document */
/* I N D E X P A G E */


html, body {
margin: 0;
padding: 0;
text-align: center;
}
.hidden {
display: none;
}
/* L A Y O U T - Container & Header Properties */
div.container {
width: 540px;
margin: auto;
padding: auto;
background-image: url(ContainerBG.jpg);
background-repeat: repeat-y;
text-align: left;
overflow: hidden;
}
div.header {
height: 198px;
background-image: url(Header.jpg);
background-repeat: no-repeat;
}
/* M A I N - Content Properties */
div.content {
width: 327px;
float: left;
margin-left: 10px;
margin-right: 16px;
font-family: "Trebuchet MS", "Helvetica";
font-size: 8pt;
color: #A6A6A6;
}
/* N A V I G A T I O N - Menu Properties */
div.menu {
width: 138px;
float: right;
margin-right: 10px;
font-family: "Trebuchet MS", "Helvetica";
font-size: 8pt;
color: #A6A6A6;
background-image: url(MenuBG.jpg);
background-repeat: no-repeat;

text-align: left;
}
a.menu:link, a.menu:active {
line-height: 17px;
text-align: left;
display: block;
margin: 0px;
text-decoration: none;
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #E0EEDD;
border-right-color: #E0EEDD;
border-bottom-color: #CECECE;
}
a.menu:hover {
line-height: 16px;
background-image: url(LinkHover.jpg);
background-repeat: no-repeat;
background-position: right center;
text-align: left;
display: block;
text-decoration: none;
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #E0EEDD;
border-right-color: #B7D9B3;
border-bottom-color: #CECECE;
}
a.menu:visited {
color: #B4B7CE;
line-height: 16px;
text-align: left;
display: block;
margin: 1px;
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #E0EEDD;
border-right-color: #E0EEDD;
border-bottom-color: #CECECE;
}
/* B O T T O M - Footer Properties */
div.footer {
clear: right;
background-image: url(Footer.jpg)
}

harripwns
11-02-2007, 03:38 PM
Actually, it is, but I set margins so the positioning is good. Here, check out what it looks like:
http://coy-dreamer.awardspace.com/index-ff.html

vtjustinb
11-02-2007, 03:40 PM
It's because of the margin-right you placed on div.content. Since .content and .menu are siblings, that margin is keeping .menu from being able to move up into that space. When you switch the order it works because the width of .content, the width of .menu, and the combined left and right margins of the two is less than 540px which is your container width (since .content is floated that large right margin would have no effect in that case since it's technically overflow in FF).

Just take out the margin-right: 168px and the menu float will scoot up.

effpeetee
11-02-2007, 03:42 PM
http://coy-dreamer.awardspace.com/index-ff.html

Is this the way that you want it to look.
Did I misunderstand your question?

Frank

harripwns
11-02-2007, 03:46 PM
See, the menu is way too low.
I tried those things, but it still won't budge. Thanks though.

vtjustinb
11-02-2007, 03:47 PM
See, the menu is way too low.
I tried those things, but it still won't budge. Thanks though.

I just took out the margin-right in firebug like I mentioned and the menu scooted up. Are you sure you took out the right margin?

harripwns
11-02-2007, 03:47 PM
Hang on, let me try again I think I messed up. I think it may work this time.

vtjustinb
11-02-2007, 03:48 PM
Hang on, let me try again I think I messed up. I think it may work this time.

Yeah just take out the "margin-right: 168px;" from div.content and it should work.

vtjustinb
11-02-2007, 03:50 PM
Oh and before you ask, when you take away that margin the display will look a little weird, but that's because you have "clear: right" on the footer. Change that to "clear: both" and it'll display correctly.

harripwns
11-02-2007, 03:50 PM
Woohoo! ..and oh no.
http://coy-dreamer.awardspace.com/index-ff.html
:P
Alright thanks a lot!

vtjustinb
11-02-2007, 03:51 PM
Woohoo! ..and oh no.
http://coy-dreamer.awardspace.com/index-ff.html
:P

Hehe yeah see my above post--you need to change "clear: right" in your footer to "clear: both" :P

harripwns
11-02-2007, 03:53 PM
Yepp did it! Thanks! :D

harripwns
11-02-2007, 03:56 PM
This is a screenshot from my PC

Frank.
Yeah, that happened, but by changing clear:right to clear:both, the footer in the middle went back at the bottom. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum