Web Analytics Made Easy -
StatCounter Floating Layout... - CodingForum

Announcement

Collapse
No announcement yet.

Floating Layout...

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Floating Layout...

    So I got this layout to work in Firefox but for some reason with IE one of my content divs goes below the first div...So I checked my math and it was fine...This is my HTML

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    	<title>Philip’s Blog</title>
    	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    	<link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div id="shadow">
    <div id="container">
    	<div id="leftnav">
    		<img src="images/logo.gif" /><br /><br /><br />
    		<div id="navigation">
    			<ul>
    			<li><a id="current" title="Item" href="#">Games</a></li>
    			<li><a title="Item" href="#">Stupid Facts</a></li>
    			<li><a title="Item" href="#">My Blog</a></li>
    			</ul>
    		</div>
    	</div>
    	<div id="rightcontent">
    		Right Content
    	</div>
    </div>
    </div>
    </body>
    </html>
    My CSS
    Code:
    html,body {
    	background-color: #FFFFEE;
    	text-align: center;
    	margin-top: 0px;
    	height: 100%;
    	margin: 0;
    	padding: 0;
    }
    
    #container {
    	height: 100%;
    	text-align: left;
    	width: 735px;
    	height: 100%;
    	background-color: #EE7700;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #shadow {
    	height: 100%;
    	background-image: url(images/shadow.gif);
    	width: 770px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #leftnav {
    	border-right: 15px solid #EE7700;
    	width: 173px;
    	background-color: #3388CC;
    	margin-left: 15px;
    	float: left;
    	display: inline;
    	height: 100%;
    }
    
    #rightcontent {
    	width: 517px;
    	background-color: #BBEE22;
    	margin-right: 15px;
    	float: right;
    	display: inline;
    	height: 100%;
    }
    
    #navigation ul {
    	margin: 0; 
    	width: 100%;
    	font: bold 10px Verdana;
    	list-style: none;
    	display: inline;
    }
    
    #navigation ul li {
    	margin: 0; 
    	padding: 0; 
    	text-align: center;
    }
    
    #navigation ul li a {
    	display: block; 
    	width: 100%; 
    	height: 35px;
    	line-height: 35px;
    	
    }
    #navigation ul li a {
    	display: block; 
    	width: 100%; 
    	height: 35px;
    	line-height: 35px;
    	color: #fff; 
    	font-weight: bold;
    }
    
    #navigation a#current {
    	background-color: #0065A5;
    }
    
    #navigation a:link, #navigation a:visited {
    	background-color: #70B9FF;
    }
    
    #navigation a:hover, #navigation a:active {
    	background-color: #559EE2;
    }
    My problems...First...In IE I need to change this to 501px which means I subtract 16 pixels from the width that works in Firefox...

    Code:
    #rightcontent {
    	width: 501px;
    	background-color: #BBEE22;
    	margin-right: 15px;
    	float: right;
    	display: inline;
    	height: 100%;
    }
    Second Problem my Buttons in the Bar look fine in Firefox but in IE the buttons don't expand to 100%

    Example (View in IE) In firefox it looks perfect...

    http://phillysfun.com/john/

  • #2
    #rightcontent {
    DISPLAY: inline; FLOAT: right; width: 517px; clear: left; MARGIN-RIGHT: 15px; HEIGHT: 100%; BACKGROUND-COLOR: #bbee22
    }

    Edit: And I'm not sure of the buttons problem yet...
    Last edited by mark87; Jul 30, 2005, 01:36 PM.
    markaylward.co.uk

    Comment


    • #3
      Adding Clear left; works in IE but in Firefox now it goes below my shadow div. Is it valid markup to put an (If IE) tag in CSS? Does it work?

      Code:
      <!--[if IE]>
      <style type="text/css">
      #rightcontent {
      	width: 517px;
      	background-color: #BBEE22;
      	margin-right: 15px;
      	float: right;
      	display: inline;
      	height: 100%;
      	clear: left;
      }
      </style>
      <![endif]-->
      That code is in my head...Is it valid?
      Last edited by pbjorge12; Jul 30, 2005, 01:57 PM.

      Comment


      • #4
        Oer, yup bad in FF now.

        A simple layout like that, I'm sure there is no need to put in an IE hack etc.

        eg. Have a look at this, maybe adapt it to your needs -

        http://www.456bereastreet.com/lab/de.../finished.html
        markaylward.co.uk

        Comment


        • #5
          Mark is right no need for a hack for a simple layout. display:inline creates like a 4px gap between elements fyi. Try this, move the stylesheet to an external if you want.
          Code:
          <!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" xml:lang="en" lang="en">
          <head>
          	<title>Philip’s Blog</title>
          	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
          	<style type="text/css">
          	html,body {
          	background: #FFFFEE url(images/shadow.gif) repeat-y center;
          	text-align: center;
          	margin-top: 0px;
          	height: 100%;
          	margin: 0;
          	padding: 0;
          }
          
          #container {
          	height: 100%;
          	text-align: left;
          	width: 735px;
          	background-color: #EE7700;
          	margin:auto;
          }
          
          #leftnav {
          	width: 173px;
          	background-color: #3388CC;
          	margin-left: 15px;
          	margin-right:15px;
          	float: left;
          	display: inline;
          	height: 100%;
          }
          
          #rightcontent {
          	width: 517px;
          	background-color: #BBEE22;
          	float: left;
          	display: inline;
          	height: 100%;
          }
          
          #navigation ul {
          	margin: 0; 
          	padding:0;
          	font: bold 10px Verdana;
          	list-style: none;
          	text-align:center;
          }
          
          #navigation ul li {
          	display: block; 
          	height: 35px;
          	line-height: 35px;
          	
          }
          #navigation ul li a {
          	display: block;  
          	height: 35px;
          	line-height: 35px;
          	color: #fff; 
          	font-weight: bold;
          }
          
          #navigation a#current {
          	background-color: #0065A5;
          }
          
          #navigation a:link, #navigation a:visited {
          	background-color: #70B9FF;
          }
          
          #navigation a:hover, #navigation a:active {
          	background-color: #559EE2;
          }
          	</style>
          </head>
          <body>
          <div id="container">
          	<div id="leftnav">
          
          		<img src="images/logo.gif" /><br /><br /><br />
          		<div id="navigation">
          			<ul>
          			<li><a id="current" title="Item" href="#">Games</a></li>
          			<li><a title="Item" href="#">Stupid Facts</a></li>
          			<li><a title="Item" href="#">My Blog</a></li>
          			</ul>
          
          		</div>
          	</div>
          	<div id="rightcontent">
          		Right Content
          	</div>
          </div>
          </body>
          </html>
          I took out display:inline from the ul, made the margins and padding on the ul 0, adjust some of the li css, and I put margins on the leftcolumn rather than the right column. Your layout now looks the same in IE and FF, and I'm sure some other browsers as well. Your nav also works to correctly. Study what I've done and learn from it.
          ||||If you are getting paid to do a job, don't ask for help on it!||||

          Comment


          • #6
            Ok...Thanks for the help! It works great except one thing...

            I was using this css trick to make all my divs expand to the bottom of the browser...

            http://www.quirksmode.org/css/100percheight.html

            With your code it stopped working on the two columns...Other than that it is perfect! Thanks again!

            It renders fine in IE...

            Nevermind...I changed something in my css...and it worked all of a sudden...
            Last edited by pbjorge12; Jul 30, 2005, 02:51 PM.

            Comment


            • #7
              The divs do extend the height of the browser at least the version I used. It worked fine in FF and IE.
              Edit: lol okay, I was going to say, you probably took the height out of the html, body css
              ||||If you are getting paid to do a job, don't ask for help on it!||||

              Comment

              Working...
              X