[promoter]

I am designing a website using liquid design. I have a main box which spans a width 100% of the browser window and two columns within. When I resize the browser window, the right column overlaps the left. How can I get it to stop at least 35px before touching the left column? Here is my css code:

body {background-color: #C7C7C7; margin: 0 auto;}
		
#main {background-color: #EBEBEB; margin: 0 auto; width: 100%;}

#left {text-align: left; float: left; width: 450px; margin-left: 15%; padding-bottom: 50px;}

#right {text-align: left; float: right; width: 250px; margin-left: -500px; margin-right: 20px;}

And here's the html:

<div id="main" align="center">
<div id="left">
<p class="heading">A Commitment from the Heart to the Heart</p>
<p class="text">text.</p>

<p class="text">text</p>

<p class="text">text</p>

<p class="text">text.</p>

</div>
<div id="right">
<p class="heading">Our Services</p>
<ul>
	<li>list</li>
	<li>list</li>
	<li>list</li>
	<li>list</li>
</ul>

<p class="heading">Make an Appointment</p>
<p class="text">small paragraph with link to appointment page.</p>

<p class="heading">Meet our staff</p>
<p class="text">small paragraph with link to staff page.</p>

</div>

Any tips?

Thanks!

[Advertisements]

Might try using percentages instead of fixed values.

Ron

[Major Payne]

Might try using percentages instead of fixed values.

Ron

[promoter]

Well I didn't want the text to always be shifting down a line or up a line so I wanted to make a set width of the box. But I solved the problem by creating a new container to hold both the left and right boxes. The container is larger than both the widths of the boxes so that there's space between them.

.content {width: 755px; margin: 0 auto;}

#left {text-align: left; float: left; padding-bottom: 50px; width: 400px;}

#right {text-align: left; float: right; padding-bottom: 50px; width: 250px;}

so now it is:

<div class="content">
<div id="left">
<p class="heading">A Commitment from the Heart to the Heart</p>
<p class="text">At PCA, our work on the heart comes from the heart.  We are committed to diagnosing and treating all forms of heart disease in children and treating adults with congenital heart defects.  All of our physicians are experienced and specialize in pediatric cardiology.</p>

</div>
<div id="right">
<p class="heading">Our Services</p>
<ul>
	<li>list</li>
	<li>list</li>
	<li>list</li>
	<li>list</li>
</ul>

</div>
</div>