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 7 of 7
  1. #1
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS problems, divisional layout

    im assuming not only the CSS is relavent, but also the order in which the html is placed in the document.
    IE6 renders this how i want it, my Opera and Moz. render different.
    heres the relavent CSS:
    Code:
    #navigation {
    float:left;
    width:140px;
    padding:5px;
    }
    #content {
    float:right;
    padding-left:10px;
    width:auto;
    }
    #header {
    clear:both;
    }
    #footer {
    clear:both;
    }
    now here is the HTML, in this order.
    Code:
    <div id="header">
    </div>
    <div id="navigation">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
    my problem is that the footer keeps going above the content and navigation, in op. & moz.
    what i want is for the boxes to stay in the order i place them in, with navigation and content beside eachother.

    if you need me to prepare a working demo then say the word.
    but i dont have time to make it @ the moment.


    any ideas CF'ers?

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    methinks getting rid of float: right; in your #content style should help that...

    edit: example
    Last edited by redhead; 03-15-2003 at 11:12 AM.
    redhead

  • #3
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, but i used float:right; to keep #content in a seperate column from #navigation.
    without float:right; my #content text will go under the #navigation if it goes past its height.
    i dont know a work around

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It works just fine for me - IE6, Phoenix (moz1.3b) and Opera 7
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
    
    	<title>Table</title>
    
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    	<style type="text/css">
    
    	#navigation {
    		float:left;
    		width:140px;
    		padding:5px;
    		border:1px solid blue;
    		}
    
    	#content {
    		float:right;
    		padding-left:10px;
    		width:auto;
    		border:1px solid blue;
    		}
    
    	#header {
    		clear:both;
    		border:1px solid blue;
    		}
    
    	#footer {
    		clear:both;
    		border:1px solid blue;
    		}
    
    	</style>
    
    </head>
    
    <body>
    
    
    <div id="header">header</div>
    <div id="navigation">navigation</div>
    <div id="content">content</div>
    <div id="footer">footer</div>
    
    
    </body></html>
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    in stripping my code to make this demo ive somehow solved the stacking problem, but in my moz. and opera the #content and #navigation wont stay beside eachother.
    Demo

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Specify a width for both columns (left could be px,em or % and right could be em or %), then float both columns left.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #7
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    aha, thank you.
    me no thinky.
    the both of you were correct.
    thats what i get for staying awake so late.


  •  

    Posting Permissions

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