Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

column overlap in liquid design


  • Please log in to reply

#1
promoter

promoter

    Member

  • Member
  • PipPip
  • 31 posts
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!
  • 0

Advertisements


#2
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Might try using percentages instead of fixed values.

Ron
  • 0

#3
promoter

promoter

    Member

  • Topic Starter
  • Member
  • PipPip
  • 31 posts
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>

  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP