vertically align divs above baseline navigation bar

Question

I have a webpage with the navigation bar at the bottom of the page (with a height of 110px). What I am trying to do is to setup 2 floating divs next to one another in the main content of the page without overflowing this navigation bar.

I have set it all up fine, however am struggling to get the divs to align vertically.

I have the following CSS code setup:

#content {
height: 100%;
width:1200px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
    top: 10px;
position:absolute;
overflow:hidden;
z-index:1;
}

.container {
padding: 5px 5px 5px 5px;
}

.container {
margin:0 auto;
}


.clear {
clear:both;
}

.left {
float:left;
display:inline;
}

.right {
float:right;
display:inline;
 }

#left-column {
float:left;
display:inline;
clear:both;
width:550px;
height:550px;
padding-left:40px;
background-color:#0F0;
}

#right-column {
float:right;
display:inline;
clear:right;
width:550px;
height:550px;
padding-right:40px;
background-color:#F00;
}

The html is simply:

<div id='content'>
<div class='container'>
<div id="left-column">content here</div>
<div id="right-column">content here</div>
<br class="clear" />
</div>
</div>

Does anyone know how I can align these divs vertically on the screen? I am sure there is some CSS code that isnt needed- I simply took it from a previously built page so feel free to tell me to delete whole chunks of it if required! At the moment the divs are floating at the top of the page. As I am looking at it on a Macbook Pro 13" screen it looks fine, but as soon as someone looks at the page in a larger browser window it will no doubt look really bad with lots of space in between the divs and the navigation bar...... Many thanks in advance! JD

Answer 1

not sure what look exactly are you trying to get but try see if this helps you..

#content {
position:absolute;
top:0;
left:0;
width: 100%;
height: 200%;
overflow:auto;
z-index:1;
}

.container {
padding:5px;
margin:0 auto;
}

#left-column {
position: fixed;
top: 50%;
left: 10px;
width:50%;
height:200px;
margin-top: -100px;
background-color:#0F0;
}

#right-column {
position: fixed;
top: 50%;
right: 10px;
width:50%;
height:200px;
margin-top: -100px;
background-color:#F00;
}

#menu {
position: fixed;
width: 100%;
height: 110px;
bottom:0;
background-color: #ddd;
}
</style>

<div id='content'>
    <div id="left-column">content here</div>
    <div id="right-column">content here</div>
    <div id="menu">menu here</div>
</div>

You can tweak the width and heights etc as per your needs. let me know if thats near to sumthing u want