Logo div change to two divs for text

Hi,

I'm trying to get the logo section to be split to have to div's side by side. One for the actual logo images and the other for the name, which will take care of the whitespace above the menu.

I originally tried just doing a table but the borders and layout didn't work at all even though I wrote border:0. I than went the path to create the css & html divs to have them side by side but no matter what I try they go below each other. Below is the exact code I've been trying to get to work, please let me know what I might be doing wrong.

CSS Code in style.css now shows:

.logo {
margin-top:30px;
position: relative;
}
.logo img{
max-width:100%;
height:auto;
}
.logo .left-column {
width: 50%;
float:left;
}
.logo .right-column {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 50%;
float:right;
}


Header.php now shows:

<div class="grid_24 header">
<div class="logo">
<div id="left-column">
<a href="<?php bloginfo('url'); ?>"><img src="<?php if (get_option('colorway_logo') != '') { ?><?php echo get_option('colorway_logo'); ?><?php } else { ?><?php bloginfo('template_url'); ?>/images/logo.png<?php } ?>" alt="<?php bloginfo('name'); ?>" /></a>
</div>
<div id="right-column">
Company Name Goes Here
</div>
</div>
<div class="clear"></div>

 

To achieve this you can add a banner which contain your logo image at the left side and your text image at the right side and upload it as a logo.
Use Photoshop to do that.

 

Oh div's aren't possible.

Okay I went ahead and created a banner instead.

Thank you.