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

    Internet Explorer CSS 2 column, vertical text alignment

    Setting up my first simple 2 column layout and IE (at least 7) is putting the right column text down low - where it would be if it was a one column layout - but inthe right column. If I was using tables, a simple valign="top" would do the trick.

    Note: on rightColumn, I've also tried changing "margin:0 0 0 311px;" to a simple "float:right", but the output is the same.

    URL is here: http://www.vintage-philadelphia.com/...dex.cfm?p=menu

    Here's the relevent CSS and code:

    #mainContainer {
    width: 622px;
    border: 1px solid black;
    text-align:left;
    max-width: 622px;
    background: #fcfcfc;
    color: #373737;
    font-size: 11px;
    }

    #leftColumn {
    float: left;
    width: 311px;
    margin:0;
    padding-right:10px;
    }
    #leftContent {
    margin:0;
    padding: 0.5em 1em;
    }
    #rightColumn {
    margin:0 0 0 311px;
    width: 311px;
    padding-left:10px;
    }
    #rightContent {
    margin:0;
    padding: 0.5em 1em;
    font-size: 11px;
    }
    hr.cleaner {
    clear:both;
    height:1px;
    margin: -1px 0 0 0; padding:0;
    border:none;
    visibility: hidden;
    }


    <div id="mainContainer ">
    <div id="leftColumn">
    <div id="leftContent">
    .... code here ...
    </div>
    </div>
    <div id="rightColumn">
    <div id="rightContent">
    ... code here...
    </div>
    </div>

    <hr class="cleaner">
    </div>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I think you were overcomplicating things. Try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    border:0;
    }
    html, body {
    background:#404040;
    font-family: Verdana, Arial, Helvetica, sans;
    font-size: 11px;
    color: #EFEFEF;
    line-height: 18px;
    background: #404040;
    text-align:center;
    }
    #container {
    width:800px;
    margin:auto;
    text-align:left;
    }
    #nav {
    margin-bottom:10px;
    }
    #content2c {
    width: 630px;
    border: 1px solid black;
    background: #fcfcfc;
    color: #373737;
    font-size: 11px;
    margin:auto;
    }
    #leftColumn {
    float: left;
    width: 305px;
    padding-right:10px;
    }
    #rightColumn {
    float:left;
    width: 305px;
    padding-left:10px;
    }
    #content2c table {
    margin:0.5em 1em;
    display:block;
    }
    #content2c table td {
    padding:0 4px;
    }
    #content2c table td.num {
    width:25px;
    padding:0;
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    height:0;
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="nav"><img src="images/vintage_menu.gif" width="800" height="50" alt="" usemap="#vintagemenu">
    		<map name="vintagemenu" id="vintagemenu">
    			<area alt="" coords="90,13,153,44" href="index.cfm?p=menu">
    			<area alt="" coords="159,13,221,45" href="index.cfm?p=wine">
    			<area alt="" coords="226,12,285,45" href="index.cfm?p=beer">
    			<area alt="" coords="297,12,381,45" href="index.cfm?p=directions">
    			<area alt="" coords="406,12,472,45" href="index.cfm?p=photos">
    			<area alt="" coords="478,12,572,45" href="index.cfm?p=mailinglist">
    			<area alt="" coords="578,13,648,45" href="index.cfm?p=about">
    			<area alt="" coords="653,12,710,45" href="index.cfm?p=faq">
    		</map>
    	</div>
    	<div id="content2c">
    		<div id="leftColumn">
    			<table border="0" cellpadding="0" cellspacing="0">
    				<tr>
    					<td>Charcuterie Plate</td>
    					<td class="num">14</td>
    				</tr>
    				<tr>
    					<td><em>Thinly sliced Parma prosciutto, soprasetta and pate de campagne garnished with cornichon and wholegrain mustard</em></td>
    					<td>&nbsp;</td>
    				</tr>
    				<tr>
    					<td colspan="2">&nbsp;</td>
    				</tr>
    				<tr>
    					<td>Cheese Plate</td>
    					<td class="num">16</td>
    				</tr>
    				<tr>
    					<td><em>A selection of fresh and aged cheeses from around the world paired with select garnishes</em></td>
    					<td>&nbsp;</td>
    				</tr>
    				<tr>
    					<td colspan="2">&nbsp;</td>
    				</tr>
    				<tr>
    					<td>PÔtÚ de Campagne</td>
    					<td class="num">9</td>
    				</tr>
    				<tr>
    					<td><em>Classic French style country pate served with cornichon and wholegrain mustard</em></td>
    					<td>&nbsp;</td>
    				</tr>
    				<tr>
    					<td colspan="2">&nbsp;</td>
    				</tr>
    				<tr>
    					<td>Beef Satay</td>
    					<td class="num">8</td>
    				</tr>
    				<tr>
    					<td><em>Grilled marinated flank steak skewers served with a classic peanut satay sauce</em></td>
    					<td>&nbsp;</td>
    				</tr>
    				<tr>
    					<td colspan="2">&nbsp;</td>
    				</tr>
    				<tr>
    					<td>Brie en Cr˘ute</td>
    					<td class="num">12</td>
    				</tr>
    				<tr>
    					<td><em>Baked French Brie wrapped in puff pastry served with caramelized pear and finished with a gastrique sauce</em></td>
    					<td>&nbsp;</td>
    				</tr>
    				<tr>
    					<td colspan="2">&nbsp;</td>
    				</tr>
    				<tr>
    					<td>Red Pepper &amp; Pesto Bruschetta</td>
    					<td class="num">5</td>
    				</tr>
    				<tr>
    					<td><em>Toasted sliced baguette topped with julienned roasted red pepper, basil pesto, toasted pine nuts and Grana Padano</em></td>
    					<td>&nbsp;</td>
    				</tr>
    				<tr>
    					<td colspan="2">&nbsp;</td>
    				</tr>
    			</table>
    		</div>
    		<div id="rightColumn">
    			<table border="0" cellpadding="0" cellspacing="0">
    				<tr>
    					<td>Gorgonzola and Fig Bruschetta</td>
    					<td class="num">6.5</td>
    				</tr>
    				<tr>
    					<td><em>Gorgonzola, fig and toasted walnut tossed with a red wine reduction and virgin olive oil over toasted fresh baguette</em></td>
    					<td>&nbsp;</td>
    				</tr>
    				<tr>
    					<td colspan="2">&nbsp;</td>
    				</tr>
    				<tr>
    					<td>Escargots</td>
    					<td class="num">9</td>
    				</tr>
    				<tr>
    					<td><em>Served in the shell with a beurre maitre d&rsquo;hotel</em></td>
    					<td>&nbsp;</td>
    				</tr>
    				<tr>
    					<td colspan="2">&nbsp;</td>
    				</tr>
    				<tr>
    					<td>Baby Tempura Shrimp</td>
    					<td class="num">9</td>
    				</tr>
    				<tr>
    					<td><em>Tempura battered baby shrimp served with our house truffle smoked tomato aioli</em></td>
    					<td>&nbsp;</td>
    				</tr>
    				<tr>
    					<td colspan="2">&nbsp;</td>
    				</tr>
    				<tr>
    					<td>French Onion Soup</td>
    					<td class="num">6</td>
    				</tr>
    				<tr>
    					<td><em>Classic French onion soup topped with house made crouton and gruyere cheese</em></td>
    					<td>&nbsp;</td>
    				</tr>
    				<tr>
    					<td colspan="2">&nbsp;</td>
    				</tr>
    				<tr>
    					<td>Soup du Jour</td>
    					<td class="num">MP</td>
    				</tr>
    				<tr>
    					<td><em>Ask server</em></td>
    					<td>&nbsp;</td>
    				</tr>
    				<tr>
    					<td colspan="2">&nbsp;</td>
    				</tr>
    				<tr>
    					<td>Vintage Burger</td>
    					<td class="num">11</td>
    				</tr>
    				<tr>
    					<td><em>Angus burger topped with apple wood smoked bacon, roasted red pepper, and shaved Manchego served with Belgian fries and a truffle smoked tomato aioli</em></td>
    					<td>&nbsp;</td>
    				</tr>
    				<tr>
    					<td colspan="2">&nbsp;</td>
    				</tr>
    			</table>
    		</div>
    		<div class="clear">&nbsp;</div>
    	</div>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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