Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Float/Column Problem

    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.
    Last edited by harripwns; 11-02-2007 at 03:29 PM.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Too big margins on the divs.
    Try this.

    Frank


    Code:
    /* 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)
    }
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    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.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    http://coy-dreamer.awardspace.com/index-ff.html

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

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    See, the menu is way too low.
    I tried those things, but it still won't budge. Thanks though.

  • #7
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by harripwns View Post
    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?

  • #8
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hang on, let me try again I think I messed up. I think it may work this time.

  • #9
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by harripwns View Post
    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.

  • #10
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    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.

  • #11
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Woohoo! ..and oh no.
    http://coy-dreamer.awardspace.com/index-ff.html
    :P
    Alright thanks a lot!

  • #12
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by harripwns View Post
    Hehe yeah see my above post--you need to change "clear: right" in your footer to "clear: both" :P

  • #13
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yepp did it! Thanks!

  • #14
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •