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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with Floating.

    Hi Guys!

    Im having trouble with my page. Im using Frontpage for a schoolproject im working on. And i would appreciate help getting my navigationsmeny to be to the left, and the text (#cont) on the right - either floating or something else. Iv'e tried as far my knowledge and patience reaches, but it wont work for me :'|

    Oh well heres the code.


    The page:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script language="JavaScript" src="Javascript/tid.js">
    </script> <!-- länk till javascript -->
    <script type="text/javascript" src="Javascript/iepngfix_tilebg.js"></script>
    <title>Tannbergskolan 2.0</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Robots" content="NOINDEX" />
    <meta http-equiv="PRAGMA" content="NO-CACHE" /><!--
      Web Site: www.ssi-developer.net
      Comments: Copyright 2003 www.ssi-developer.net
      Licence:  Creative Commons - Non-commercial Share-Alike -->
    <link rel="stylesheet" type="text/css" href="CSS/CSS-layout.css" />
    <link rel="stylesheet" type="text/css" href="CSS/CSS-presentation.css" />
    </head>
    
    <!-- Body -->
    <body background="Images/bg.jpg" onload="clock();" onunload="stop();">
    
    
    
    
    <div id="outer">
    <div id="hdr" onclick="location.href='index.html';" style="cursor:pointer;"> <!-- Header -->
    
    </div> <!-- end Header -->
    <div id="divider"> <!-- divider-->
    </div> <!-- end divider-->
    
    <div id="bar"> <!-- Bar -->
    	<span style="padding:5px;font-size:11px;">
    		<script type="text/javascript"> <!-- Datumscript -->
    		document.write ( day_names[current_date.getDay()] );
    		document.write ( ", " );
    		document.write (current_date.getDate() );
    		document.write ( ", " +  month_names[current_date.getMonth()] );
    		document.write ( " - " );
    		</script> <!-- end Datumscript -->
    		
    			<span id="clock"> <!-- Tidscript -->
    			</span> <!-- end Tidscript -->
    			
    	</span>
    
    </div> <!-- end Bar -->
    
    <div id="divider"> <!-- divider-->
    </div> <!-- end divider-->
    
    <!-- Bodyblock -->
    <div id="bodyblock">
    	<div id="l-col" align="left"> <!-- Left Column -->
    	<table id="border-meny" width="132"><td></td></table>
    <table width="140" cellspacing="0" cellpadding="0" bgcolor="#26a2da"> <!-- Navigationsmeny -->
    
    </table> <!-- end Navigationsmeny -->
    			
    </div> <!-- end Left Column -->
    	
    	
    
    <!-- Content-->
    <div id="cont"> 
    	<h3>Nyheter och artiklar</h3> <!-- H3 -->
    			
    		<p>
    			This template is actually a replica of one of my other
    			websites which uses tables for the very same layout. I wanted to
    			see could it be done and it seems to work perfect.
    		</p>
    			
    		<p>
    			This is basically set up as follows: there is a main outer div
    			which centers the page and is a fixed width. There are 4 main
    			div's within this outer div; header (#hdr), bar (#bar), body
    			(#body) and footer (#ftr). The body div holds 2 more divs, the
    			left div which is for navigation and the right div which is for
    			our content.
    		</p>
    		
    		<p>
    			One drawback we see immediatly is getting equal heights for
    			the left navigation div and right content div. The work around I
    			use for this is: whichever is likely to be the shortest (in
    			height) div, probably the left navigation div, set the background
    			of the #body div the same as this, also the border separating the
    			two divs - that should be on the right content div.
    		</p>
    			
    		<p>
    			Another problem discovered recently was that when you use the
    			float property it can cause the floated divs to "jump out" of
    			their container block. The workaround I found for this was simply
    			to specify a height for the container div.
    		</p>
    		<p>
    			Another problem discovered recently was that when you use the
    			float property it can cause the floated divs to "jump out" of
    			their container block. The workaround I found for this was simply
    			to specify a height for the container div.
    		</p>
    </div><!-- end Content   -->
    
    
    </div> <!-- end Bodyblock -->
    
    <div id="divider2"> <!-- divider-->
    </div> <!-- end divider-->
    
    <div id="ftr" align="center"> <!-- Footer -->
    			Copyright (c) </div>
    </div>
    
    </body> <!-- end Body -->
    </html>

    And the CSS



    [CODE]

    /* Layout Stylesheet */


    body {
    margin:126px 0 0 0;
    background-color:#ffffff;
    background-position:center top;
    background-repeat: no-repeat;
    text-align:center;
    padding:0;

    }

    #outer {
    text-align:left;
    width:675px;
    margin:auto;
    }

    #hdr {
    height:101px;
    }

    #divider{
    height:4px;
    }
    #divider2{
    height:20px;
    }

    #bar {
    height:16px;
    color:#ffffff;
    }

    #bodyblock {
    position:relative;
    width:675px;

    #l-col {
    float:left;
    width:auto;
    height:auto;
    }

    #cont {
    width:auto;
    height:auto;
    }

    #ftr {
    height:20px;
    background:#26bafa;
    border:1px solid #FFFFFF;
    border-width: 1px 0 1px 0;
    margin:0;
    }
    [CODE]

    Other CSS file...

    [CODE]


    /* Presentation Stylesheet */

    /* Text */

    h3{
    font-family: Tahoma;
    margin:0;
    padding:15px;/*
    padding-left:240px;*/
    }

    h4 {
    margin:0;
    padding: 5px 0;
    align:center;
    }

    p{
    padding-left:20px;
    padding-right:10px;
    padding-bottom:10px;
    font-family: calibri;
    font-size:1em;
    }


    p:first-letter {
    font-size: 1.15em;
    letter-spacing:0px;
    font-weight: bold;
    }




    /* Bilder, Tables osv */

    img.menyicons{
    vertical-align:middle;
    width:19;
    height:19;
    }

    a.meny{
    font-size:0.7em;
    font-family: verdana;
    }

    a.meny:link, a.meny:visited {text-decoration:none; color:white;} /* unvisited link */
    /*a.meny:visited {color:#000000; text-decoration:none;} */
    a.meny:hover {text-decoration:none;} /* mouse over link */

    tr{
    height:24px;
    }

    #border-meny{
    cellspacing:0;
    cellpadding:0;
    width:25px;
    height:30px;
    border:0px;
    border-right:1px solid #ffffff;

    }

    td.meny-toptd{
    font-family: Verdana, Arial, sans-serif;
    font-size:14px;
    border:1px;
    border-style:solid;
    border-color:#ffffff;
    height:23px;
    }

    td.meny{
    font-family: Verdana, Arial, sans-serif;
    font-size:14px;
    border-bottom: 1px;
    border-top: 0px;
    border-right: 1px;
    border-left: 1px;
    border-style:solid;
    border-color:#ffffff;
    }
    [CODE]

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Tinkin,
    I didn't look very closely at your code but I did notice you're using width:auto; on your floated left column. For a float to work you must specify a width. Have a look at this float tutorial.

    Also, have a look at this basic 2-column layout for a suggestion on how to start.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,453
    Thanks
    71
    Thanked 102 Times in 101 Posts
    I think you need to have both inside of one DIV. Create a DIV called something like #content and make it width: 700px; and height: 100%;
    Include text and sidebar into that DIV and they should be side by side?

    If not then you need a float.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    This invalid bit could cause problems too -
    Code:
    #bodyblock {
    position:relative;
    width:675px; 
    
    #l-col {
    float:left;
    width:auto;
    height:auto;
    }
    See how it's missing a }?

    Have a look at the links about validation in my signature line. They can help you a lot.

    ===================

    masterofollies - To put two elements side by side you just about always need a float. You can do it with ap but there is no real need to here.
    He already has #l-col and #cont contained in #bodyblock.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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