Hello everyone! This is my first post here.

 

Unortunatly I am having a rather MINOR but FRUSTRATING issue.

 

I have made a layout using xhtml/css to make a prototype front page.

 

Refer to the attachment 'Prototype Site' which contains index.html and main.css

 

Now, the layout SO FAR is fine for me. However if you look at the 'contentwrapper' div and all of its containing elements, such as shown in the picture3.png attachment you will see that i have succeeded in using floats to my advantage to get both columns on either side of the contentwrapper div.

 

HOWEVER, for the life of me I cannot preserve the background colour of the 'contentwrapper' div. I want it to be LIGHT BLUE. However it is showing up as WHITE.

 

I want to be able to type in both columns and still have a blue contentwrapper background. Because, for example, the right column might be less height than the right, and so I will expect a blue background to be there.

 

Please can someone help me because I have been many hours fiddling with the position and float values and have had no results yet. Thankyou!

 

Steve

Prototype_Site.zip

Also, this picture attachment shows what I want the whole page to do (layout only)

 

And just to point out:

 

i can preserve the background if i have a div on it

 

and i can preserve the background of a wrapping div if another div element is inside it

 

However, once i use the float function, the background turns white.

 

So frustrating!

And last but not least, just to futher illustrate the problem

last attachment:

You have to clear your floats with another div (or the html element of your choice) like this:

<div id="left">...</div>
<div id="right">...</div>
<div class="clear"></div>

and the css for the clearing div:

.clear { display:block; clear:both; }

That will expand the container div / wrapper.

You have to clear your floats with another div (or the html element of your choice) like this:

<div id="left">...</div>
<div id="right">...</div>
<div class="clear"></div>

and the css for the clearing div:

.clear { display:block; clear:both; }

That will expand the container div / wrapper.

 

Quick question, does that html need to be inserted after ALL the divs (the last div) inside the container div, regardless of whether they are floating or not, or do I need multiple divs in a container after each floating div?

Just try it on a footer - it should work.

tutorial here

 

http://www.ozzu.com/html-tutorials/tutoria...art-t85704.html