Aligning 2 content rows

windows

Guest
I've redisigned my site using CSS (first time I've used CSS for more than fonts) but the problem I'm having is getting two columns to align when the text overflows on the left:

The link to my page is here (<!-- m --><a class="postlink" href="http://www.sudbury-branchline.co.uk/test/">http://www.sudbury-branchline.co.uk/test/</a><!-- m -->) and that looks how I want it, yet if the text in the leftbg was to be longer, to get the rightbg to align I have to reset the margin-top: with -pixels

This is my CSS that controls the two boxes:

#leftbg {
width: 606px ;
height: 435px;
background: #F4F8FB;
padding: 0;
margin: 0;
}
#rightbg {
width: 160px ;
height: 435px;
background: #EAF4FD;
padding: 0;
margin: 0;
float: right;
margin-top: -435px ;
border: 0;
}


I've higlighted the bits I need to keep resetting for the different pages, and this is most annoying as I plan to use a php news system which will grab the news from a database, and obviously all news wont be the same length.

I'd appreciate it anyone could tell me how I could align them better so they they grow/shrink relative to the page content

Thanks for any helpI think I've sorted the problem of making it relative, but I still cant line up the left and right content without having to manually set the negative margin-top...any ideas?

This being the example (<!-- m --><a class="postlink" href="http://www.sudbury-branchline.co.uk/test/template.php">http://www.sudbury-branchline.co.uk/test/template.php</a><!-- m -->)

And this is how I ammended the CSS to allow relative sizings: The bit in bold is still the problem though

#full {
width: 770px;
height: relative;
padding: 0;
margin: 0;
background: #FFF;
}
#leftbg {
width: 606px ;
height: relative;
background: #F4F8FB;
padding: 0;
margin: 0;
}
#rightbg {
width: 160px ;
height: relative;
background: #EAF4FD;
padding: 0;
margin: 0;
float: right;
margin-top: 0px ;
border: 0;
}
 
Back
Top