Jump to content

div id="content" not working


applecoder
 Share

Recommended Posts

I know I have done this, and I know it works, but it has not worked for me this last week, and I am stumped.I want to have a left area div that has some content 300px wide.I want to have a right area div that has some content 400px wide but floats to the right of the the left area. (you know, COLUMNS)I can get this to work, no problem.THE PROBLEM is they are inside a content div that is 700px wide and has a background-color.THIS area and the color do not extend to the bottom of the areas inside it (the left and right divs)If I take the float out of both the left and right divs, the color works and it surrounds the two areas; however, the two areas are now just one long list down the page. I want them next to each other, with the background of the content page behind them.EXAMPLE CODE:

<style type="text/css">		#content{width: 500px;background-color: green;}		#left  {width:200px; background-color: blue; float:left;}	#right{width:200px; background-color: red; float:left;}</style>	</head><body><div id="head"></div><div id="content"><div id="left"><h1>Welcome to Rossion</h1><p>We are proud to present to you the new Q1. We have created this site to further your experience and share more information about this exciting new supercar like no other. Please explore this site as it continues to evolve with new content and media, we hope you enjoy!The Rossion Q1</p></div><!-- /left/ -->  <div id="right"><h1>Flawless Balance. Uncompromising Precision. Effortless Performance</h1><p>These are the attributes that ascend together to become the pinnacle of automotive achievement in a supercar. In February 2007, 1G Racing set out to redefine the supercar landscape by presenting the world with a fresh, thrilling new kind of car by acquiring the design and production rights to the Noble M12 and M400. With the acquisition of some of the finest automotive driving technology currently available today, 1G Racing proudly presents the new Rossion Q1.</p></div><!-- /right/ --></div>

What am I missing? Please tell me this can be done, I know it can be done, I have seen it done, and I have done it... I think I have... :):)

Link to comment
Share on other sites

It's actually not confusing. Just choose one of the concepts that you think will work for you case and implement it.Otherwise, you can do a background image that has columns color defined. Placed in a wrapper div that has the left and main column and don't define any background color for those two columns that way the wrapper div background will display.Avoid using tables. It's probably a lot fast to do one of the methods listed above.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...