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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    119
    Thanks
    1
    Thanked 0 Times in 0 Posts

    hot to make 3 columns using divs?

    Hi

    I have been allways using tables but i'm trying to start using divs. but i can't understand some stuff that its probably very basic.

    I want something like this:
    Code:
    <table width="100%" border="0">
      <tr>
        <td>&nbsp;</td>
        <td width="50">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    the 1st and last column i want to stretch to fill the monitor and the middle one to has a fixed height.

    how can i do this with divs?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello alapimba,
    Does this one work for you
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 12px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #left { 
    	width: 50%;
    	float: left;
    	background: #0F0;
    }
    #mid {
    	width: 50px;
    	float: right;
    	background: #CC3;
    }
    #right {
    	width: 50%;
    float: right;
    	background: #F00;
    }
    </style>
    </head>
    <body>
    	<div id="left">
        	left
                <div id="mid">
                    middle
                <!--end mid--></div>
        <!--end left--></div>
            <div id="right">
                right
            <!--end right--></div>
    </body>
    </html>
    ?
    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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Here is a position:fixed; one that is more centered -
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 12px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #left { 
    	width: 50%;
    	float: left;
    	background: #0F0;
    }
    #mid {
    	width: 50px;
    	position: fixed;
    	top: 0;
    	left: 50%;
    	margin: 0 0 0 -25px;
    	background: #CC3;
    }
    #right {
    	width: 50%;
    float: right;
    	background: #F00;
    }
    </style>
    </head>
    <body>
    	<div id="left">
        	left
        <!--end left--></div>
                <div id="mid">
                    middle
                <!--end mid--></div>
            <div id="right">
                right
            <!--end right--></div>
    </body>
    </html>
    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

  • #4
    Regular Coder
    Join Date
    Jul 2006
    Posts
    119
    Thanks
    1
    Thanked 0 Times in 0 Posts
    yep it works perfect.

    i just can't understand the concept of the 50%

    50% + 50% + 50pixels is more than the seize of the screen

    Can you explain the idea behind this?

    Thanks

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by alapimba View Post
    yep it works perfect.

    i just can't understand the concept of the 50%

    50% + 50% + 50pixels is more than the seize of the screen

    Can you explain the idea behind this?

    Thanks
    By making #mid position:fixed we are taking it out of the normal flow of the layout.
    Maybe the best way to explain would be for you to watch what happens when you remove the background color from #mid. All three divs are still there but now you can see what's going on behind #mid.
    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

  • #6
    Regular Coder
    Join Date
    Jul 2006
    Posts
    119
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ah ok.
    got the idea.

    this way i can't get what i need.

    anyway i'm trying to make a mix of tables with divs... it works perfect on IE6 and Firefox, but not on IE7

    Can you help me out?

    Here is the result:

    http://www.opelclassico.pt/_index.htm

    If you open on firefox you see the menu in place, perfect and the logo it's centered with the line of the boxes.
    But on IE it moves my divs about 20pixels to the right. how can i fix it?

    Here is my code:

    Code:
    <table width="100%" border="0" cellpadding="0" cellspacing="3">
      <tr>
        <td bgcolor="#FFED00">&nbsp;</td>
        <td width="800" height="250"><img src="homepage_fotos/rotator.php" width="800" height="250" /></td>
        <td bgcolor="#000000">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#005b6b">&nbsp;</td>
        <td bgcolor="#FFED00"><div id="logo"><a href="index.htm"><img src="img/logo_club.png" width="138" height="204" border="0" /></a></div><!-- #BeginLibraryItem "/Library/links.lbi" --><div id="navcontainer">
          <ul id="navlist" name="navlist">
            <li><a href="cocp.html">COCP</a></li>
            <li><a href="socios.php">SÓcios</a></li>
            <li><a href="actividades.php">Actividades</a></li>
            <li><a href="classificados.php">Classificados</a></li>
            <li><a href="links.php">Links</a></li>
            <li><a href="gbook.php">Guestbook</a></li>
            <li><a href="contactos.php">Contactos</a></li>
          </ul>
        </div><!-- #EndLibraryItem --></td>
        <td bgcolor="#FFFBDB">&nbsp;</td>
      </tr>
    </table>
    My css:
    #logo{
    height: 192px;
    width: 138px;
    z-index: 2;
    position: absolute;
    margin-left: 733px;
    top: 45px;
    }
    #navcontainer{
    background-color:#FFED00;
    height: 23px;
    width: 740px;
    position: relative;
    margin-top: 0px;
    margin-left: 0px;
    }
    #navcontainer ul
    {
    position: relative;
    margin-top: 0px;
    margin-left: 0;
    margin-bottom: 0px;
    background-color:#FFED00;
    color: #333333;
    float: inherit;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 11px;
    margin-right: 0px;
    padding: 0px;
    text-align: center;
    width: 800px;
    font-weight: bold;
    }

    #navcontainer ul li {
    display: inline;
    background-color: #FFED00;
    }

    #navcontainer ul li a
    {
    /*padding: 1px;*/
    background-color: #FFED00;
    color: #333333;
    text-decoration: none;
    float: left;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-right: 7px;
    padding-left: 12px;
    }

    #navcontainer ul li a:hover
    {
    background-color: #FFFBDB;
    color: #333333;
    }
    What i'm doing wrong?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Instead of looking at that like left/center/right columns, try looking at it 3-dimensionally. In layers of nested divs.
    The bottom layer of a header can have your yellow bar on the left.
    The next layer of a header can have the black bar on the right.
    A centered content layer would then hold your image rotator, menu and content.
    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

  • #8
    Regular Coder
    Join Date
    Jul 2006
    Posts
    119
    Thanks
    1
    Thanked 0 Times in 0 Posts
    got the idea.
    anyway i allready fixed it, just need to align the TD with the divs inside to the left and everything worked perfect on IE 6 7 and firefox.
    Probably not the best solution as i'm using tables and divs but it's working as i wanted


  •  

    Posting Permissions

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