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 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2005
    Location
    Sweden
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts

    float drop problem

    Hi,

    I have a float drop problem with the code below. I haven't been able to figure out what to do with it, can anyone help?
    My wrapper div won't center to the page either, it does in IE but not Firefox (so i know there must be something WRONG)

    HTML

    Code:
           <div id="footer">
            	<div id="footerRight">
            
            <div id="floatLeft">
            	<p><span class="big">Address:</span><br />
            	Fasanstigen 25<br />
            	123 32<br />
            	Bro<br />
            	Upplands Bro<br />
            	SWEDEN</p>
            </div>
            
            <div id="floatRight">
            	<p><span class="big">E-Mail:</span><br />
            	joroco@gmail.com</p>
                <p><span class="big">Telephone:</span><br />
            	+(44) 7624 303819</p>
                <p><span class="big">MSN:</span><br />
            	joroco.costello@hotmail.com</p>
            </div>
            
            	</div>
            
            </div>
    CSS:

    Code:
    #footer {
    width: 770px;
    margin: 0;
    padding: 0;
    }
    
    #footerRight {
    	width: 570px;
    	float: right;
    	background-color: #8B7E66;
    	margin: 0;
    	padding: 0;
    }
    
    #floatRight {
    	float: right;
    	margin: 15px;
    	text-align: right;
    }
    
    #floatLeft {
    	float: left;
    	margin: 15px;
    	text-align: left;
    	display: inline;
    }
    
    #footer p {
    	font-size: 0.8em;
    	font-family: Arial, "Trebuchet MS", Tahoma;
    	color: #CDC5BF;
    	margin: 0;
    }
    Heres some more code that might be useful, forgot to add it (reason for editing)

    Code:
    span.big {
    	font-size: 1em;
    	letter-spacing: 0.1em;
    	color: #FFA500;
    	font-weight: bold;
    }
    
    body {
    	margin: 0;
    	padding: 0;
    	text-align: center;
    	background-color: #8B8970;
    }
    
    #wrapper {
    	width: 770px;
    	margin: 0;
    	padding: 0;
    }
    Last edited by joroco; 10-11-2007 at 11:55 PM. Reason: forgot something else AGAIN!

  • #2
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    311
    Thanks
    1
    Thanked 35 Times in 35 Posts
    Try

    Code:
    #wrapper {
    	width: 770px;
    	margin: 0 auto;
    	padding: 0;
    }
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #3
    New Coder
    Join Date
    Nov 2005
    Location
    Sweden
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, that worked with the margin: auto;

  • #4
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wicked i've had the same problem!! Thanks Donkey!
    PHP / CSS / Perl / XML / XHTML

    For cheap ipod touch go to protella.com

  • #5
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question float-drop problem

    Hi, I have the same float-drop problem thats being talked here.The page on my right frame drops below the left tree frame when the browser(IE) window is minimized. Please look into my CSS and let me know what I can try, Thanks! in Advance
    CSS:
    body {font-family:Arial; padding:0px; margin:0px; background-color: #f2efeb; }
    body.ie6 #content { height: 500px; }

    p {font-family:Arial; color: #534741; margin: 0px;}

    div {font-family:Arial; color: #534741; margin: 0px;}

    span {font-family:Arial; color: #534741; margin: 0pt;}

    h1 {text-align: center; font-family:Arial; font-weight: bold; font-size: 2em;}

    h2 {text-align: left; font-family:Arial; font-weight: bold; font-size: 1.1em; color: #534741}

    h3 {text-align: left; font-family:Arial; font-weight: bold; font-size:small; font-style: italic; color: #534741}

    h4 {text-align: left; font-family:Arial; font-weight: bold; font-size:small; color: #534741}

    h5 {text-align: left; font-family:Arial; font-style: italic; font-size:small; text-decoration: underline; color: #534741}

    ul {margin-left:0; margin-top: 0; padding-left:1em; font-family:Arial; font-size:small; color: #534741}
    ul ul {padding-left:1em; margin-top: 0; padding-top: 1px; font-family:Arial; font-size:small; color: #534741}

    ol {margin-left:0; padding-left:2em; list-style-type: upper-roman; font-family:Arial; font-size:small; color: #534741}
    ol ol {padding-left:0; list-style-type: upper-alpha; font-family:Arial; font-size:small; color: #534741}
    ol ol ol {padding-left:0; list-style-type: decimal; font-family:Arial; font-size:small; color: #534741}
    ol ol ol ol {padding-left:0; list-style-type: lower-alpha; font-family:Arial; font-size:small; color: #534741}
    ol ol ol ol ol {padding-left:0; list-style-type: lower-roman; font-family:Arial; font-size:small; color: #534741}

    /*
    .topheader { font-family: Arial; font-size: xx-large; font-weight: bold; font-style: normal; color: #534741; background-color: #00FFFF; height: 100%; width: 100%; margin-bottom: 0px; margin: 0px 0px 0px 0px; }
    .topheader1 { text-align: center; font-family: Arial; font-size:xx-large; color: #ffffff; margin: 0px 0px 0px 0px; }
    */

    .topheader2 { text-align: left; font-family: Cambria; font-weight: bolder; font-size: larger; color: #ffffff; margin: 0px 0px 0px 0px; }

    .horizontalrule {width: 100%; margin: 0px 0px 0px 0px; color: #534741}

    #header {border:1px solid blue; background-color: #3388CC; float:right; width:100%; height:10%; margin: 0px 0px 0px 0px; font-family: Arial; font-size: xx-large; font-weight: bold; font-style: normal; color: #534741;}
    /* Cambria Miriam #3388CC #3399CC #237bd2 - HMSA #d6cfc7 #d6cfc7 #cab9a4 #cab9a4 #f2efeb #f2efeb #736257 */
    /*
    #breadcrumb {background-color:white; float:right; width:80%; height:5%; margin: 0px 0px 0px 0px;}
    */

    #container {background-color: #f2efeb; float:right; width:100%; min-height:500px; height:auto !important; height:500px; }

    /* #left {background-color:#c5b098; float:left; width:15%; min-height:500px; height:auto !important; height:500px; margin: 0px 0px 0px 0px;} */
    #left {background-color:#c5b098; float:left; font-family: Arial; font-size: medium; font-weight: normal; font-style: normal; color: #534741; width:15%; min-height:500px; height:auto !important; height:500px; margin: 0px 0px 0px 0px;}

    #content {background-color: #f2efeb; border-style: none; display:block; float:right; width:84%; min-height:500px; height:auto !important; height:500px; margin: 0px 0px 0px 0px;}

    #footer {background-color:#237bd2; float:right; width:100%; height:5%; margin: 0px 0px 0px 0px; }

    .csfooter { text-align: center; font-family: Arial; font-weight: normal; font-size: x-small; color: #534741; margin: 0px;}


  •  

    Posting Permissions

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