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
    New Coder
    Join Date
    Dec 2006
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help Centering Two Columns

    Hey guys, it's me.... again.

    I know I need to correct my errors via validator which I plan to soon work on, but do you know how I can center these two columns, one red and one green into the middle to bring them together?

  • #2
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Like this?

    <html>
    <body>

    <h4>Cell that spans two columns:</h4>
    <table border="1">
    <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
    </tr>
    <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
    </tr>
    </table>

    </body>
    </html>

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Or in CSS create a wrapper:

    #wrapper {
    width: 766px;
    height: auto:
    margin: 0 auto;
    }

    #leftcolumn {
    width: 300px;
    height: 500px;
    float: left;
    }

    #rightcolumn {
    width: 466px;
    height: 500px;
    float: left;
    }

    And your HTML:

    <div id="wrapper">
    <div id="leftcolumn"></div>
    <div id="rightcolumn"></div>
    </div>
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,696
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there stlboi,
    I know I need to correct my errors via validator
    Here is your page corrected and validated...
    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>
    <title>SW Valley Sign*A*Rama</title>
    <base href="http://thebuffalonetwork.com/project-signarama/"/>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
     }
    body {
        color:#000;
        background-color:#959595;
     }
    #container {
        width:989px;
        color:#fff;
        background-color:#2e3192;
        background-image:url(top.jpg);
        margin:0 auto;
     }
    #header {
        width:900px;
        height:150px;
        background-image:url(header1.jpg);
        margin:0 auto;
     }
    #leftcolumn {
        width:175px;
        height:400px;
        float:left;
        display:inline;/*IE6 needs this*/
        color:#00e;
        background-color:#f00;
        margin:1px 1px 1px 54px;
     }
    #rightcolumn {
        width:664px;
        height:360px;
        padding:20px;
        float:left;
        display:inline;/*IE6 needs this*/
        color:#000;
        background-color:#008000;
        text-align:center;
        margin:1px;
     }
    #footer {
        width:989px;
        line-height:48px;
        background-color:#2e3192;
        background-image:url(footer.jpg);
        text-align:center;
        font-family:times,serif;
        font-size:0.75em;
        color:#fff;
        clear:both;
     }
    
    a {
        text-decoration:none; 
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="header"></div>
    
    <div id="leftcolumn">
    
    <img src="menu1.jpg" alt="" />
    					
    <ul style="list-style-type: none">
      <li><a href="http://www.testlink.com/">Company A</a></li>
      <li><a href="http://www.testlink.com/">Company B</a></li>
      <li><a href="http://www.testlink.com/">Company C</a></li>
      <li><a href="http://www.testlink.com/">Company D</a></li>
    </ul>
           				       
    <img src="menu2.jpg" alt="" />
    					
    <ul style="list-style-type: none">
      <li><a href="http://www.testlink.com/">Banners</a></li>
      <li><a href="http://www.testlink.com/">Real Estate Signs</a></li>
      <li><a href="http://www.testlink.com/">Vehicle Graphics</a></li>
      <li><a href="http://www.testlink.com/">Business Cards</a></li>
    </ul>
    
    <img src="menu3.jpg" alt="" />	
    
    <ul style="list-style-type: none">
      <li><a href="http://www.testlink.com/">Shopping Cart: 0 Items</a></li>
      <li><a href="http://www.testlink.com/">Grand Total: $0.00</a></li>
    </ul>			
    
    </div>  <!--closes leftcolumn -->
    
    <div id="rightcolumn">
    
    <p>Under Construction!  1/28/07</p> 
    
    <img src="http://thebuffalonetwork.com/project-signarama/store.jpg" alt=""/> 
    
    </div> <!--closes rightcolumn -->
    
    <div id="footer">Copyright &#169 2007. All rights reserved.</div>
    
    </div> <!--closes container -->
    
    </body>
    </html>
    
    
    coothead

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You need to style #wrap in your CSS
    You need to enter your left column first, THEN your right column.
    Make your HTML read like this:
    Code:
    <div id="wrap">
    
                                             
    
    
    
                                   <div id="leftcolumn">
    
                                   <img src="http://thebuffalonetwork.com/project-signarama/menu1.jpg"><p>
    					
    					<ul style="list-style-type: none">
     						<li><a href="http://www.testlink.com/">Company A</a></li>
      						<li><a href="http://www.testlink.com/">Company B</a></li>
      						<li><a href="http://www.testlink.com/">Company C</a></li>
    
      						<li><a href="http://www.testlink.com/">Company D</a></li>
    					</ul>
           				       
    
    					<img src="http://thebuffalonetwork.com/project-signarama/menu2.jpg"><p>
    					
    					<ul style="list-style-type: none">
     						<li><a href="http://www.testlink.com/">Banners</a></li>
      						<li><a href="http://www.testlink.com/">Real Estate Signs</a></li>
      						<li><a href="http://www.testlink.com/">Vehicle Graphics</a></li>
    
      						<li><a href="http://www.testlink.com/">Business Cards</a></li>
    					</ul>
    
    
    
    				       <img src="http://thebuffalonetwork.com/project-signarama/menu3.jpg"><p>	
    
    					<ul style="list-style-type: none">
     						<li><a href="http://www.testlink.com/">Shopping Cart: 0 Items</a></li>
      						<li><a href="http://www.testlink.com/">Grand Total: $0.00</a></li>
    
      						
    					</ul>			
    
    
     		                </div>  <!--closes leftcolumn -->
    
    <div id="rightcolumn">
    
    			       <br>
    
    			       <center> Under Construction!  1/28/07 </center><p>
    
    			       <center> <img src="http://thebuffalonetwork.com/project-signarama/store.jpg"> </center>
    
    		               <!--closes rightcolumn --></div>
    
    
    		      </div>  <!--closes wrap -->
    And make your CSS read like this:
    Code:
    * {
    margin: 0;
    padding: 0;
    }
    
    
    
    #wrap {
    width: 900px;
    margin: 0 auto;
    overflow: hidden;
    }
    
    #rightcolumn {
            width: 709px; /*adjust here if it still drops*/        
            height: 400px;
    	background-color: green;
    margin: 1px 8px 0 183px;/*adjust left margin here if it still drops*/
    }
    
    
    
    #leftcolumn {
            width: 175px;
            height: 400px;
    	float: left;
    	background-color: red;
    margin: 1px 0 0 8px;
    }
    
    
    
    
    
    #footer {
    	width: 989px;
    And send a case of beer to Alaska - need my address?
    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
    New Coder
    Join Date
    Dec 2006
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Holy Moly I love this forum, thanks guys! And thanks Coothead for the validation, I will check it out.

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,696
    Thanks
    0
    Thanked 232 Times in 227 Posts
    No problem, you're welcome.


  •  

    Posting Permissions

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