...

View Full Version : CSS 2 column, vertical text alignment



stevelogan
12-10-2006, 02:22 PM
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/v2/site/index.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>

_Aerospace_Eng_
12-10-2006, 06:14 PM
I think you were overcomplicating things. Try this

<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum