applecoder Posted February 12, 2008 Share Posted February 12, 2008 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 More sharing options...
applecoder Posted February 12, 2008 Author Share Posted February 12, 2008 One more thing.It does work if you tell the surrounding div to be a specific height, but I want this div to be able to expand and contract depending on the amount of information that is in the left and right divs.I am perplexed.AC Link to comment Share on other sites More sharing options...
newseed Posted February 12, 2008 Share Posted February 12, 2008 You can read this source about matching column height. Link to comment Share on other sites More sharing options...
applecoder Posted February 12, 2008 Author Share Posted February 12, 2008 You can read this source about matching column height.Thanks newseed, a bit confusing.I might just use a table. And I have not used a table in years.UGH!!!NO table used. I tried one of the methods and it works.Why I never ran into this problem before I do not know Link to comment Share on other sites More sharing options...
newseed Posted February 12, 2008 Share Posted February 12, 2008 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.