background image liked to flash include

[AVdes]

I have a div with a background image repeat-y

#mainContent {
           background: #000000 url(../img/solutions_mid.png) top left repeat-y;
	width: 950px;
	padding: 0;
	margin: 0;
	padding-left: 28px;
	}

and three divs inside that div

#wording1 {
	position: relative;
	float: left;
   width: 320px;
	padding: 0;
	margin: 0;
	padding-top: 10px;
	}

#wording2 {
	position: relative;
	float: left;
   width: 320px;
	padding: 0;
	margin: 0;
	padding-top: 10px;
	margin-left: 10px;
	}

#flashNavi {
	position: relative;
           height: 100%;
	padding: 0;
	margin: 0;
	padding-top: 5px;
	margin-left: 10px;
	}

in the flashNavi div I have a flash include.
the effect is to have a three column layout with text in the first two columns and a vertical flash navigation bar in the third.

The problem is that the backgrond image won't streach all the way down to the bottom of the mainContent div. It will only go as far down as the the flash navigation is tall. if I display none to the flashNavi div the background disapears all together.

How is this possible? I've checked it on Firefox Safari and Opera

here is the html.

<div id="mainContent">
  <img src="../img/title.png" alt="#" />
				
  <div id="wording1">
    <h2>Text</h2><hr />
    <p>Long text</p>
  
  <div id="wording2">
    <h2>text</h2><hr />
    <p><img src="../img/sm_icon_portal.png">Long Text</p>
  </div>
				
  <div id="flashNavi">
    <!--[if IE]><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"	width="214" height="360"><script>/*<![endif]-->
    <object type="application/x-shockwave-flash" data="../flash/navi_functions.swf" width="214" height="360"><script type="text/javascript">/**/</script>
      <param name="movie" value="../flash/navi_functions.swf" />
    </object>
  </div>
</div>

[AVdes]

I know this is not a problem with the flash include because if I use the standard flash include I get the same results.

[AVdes]

okay I figured out that it's the float: left; aplied to the three inside div's.
For some reason the browser won't place them inside the containing div if they have that float: left; applied. I found out by putting a border on the mainContent and saw that it was not surrounding any of the divs. but it surrounded the image at the top. So I started taking out styles one by one to see what would happen and sure enpugh when I remove the floats they move inside the border.

the problem is that I need them to be side by side and not vertical. So I tried display: block inline; and nothing. So now i'm stuck. I've never encountered this before.

Does this mean that there is no way to place divs inside divs and float them?
Do I have to convert them to spans? Surely someone has had this problem before. I feel like I'm missing an important CSS Rule or something.

[AVdes]

I tried turning the divs into spans but that didn't work because now the p tags are not placing inside the spans. Is there anyone who has dealt with this?

I'm not bumping myslef. I just thought I'd update what I've figured out in case anyone else has the same problem later.

[DaveWoods]

I think you're probably after a solution known as faux columns

http://www.alistapart.com/articles/fauxcolumns/

However, in your initial post the words "flash navigation" rung alarm bells.

1 - How are people without flash going to navigate your site?

2 - Search engines cannot follow flash links so how will you ensure that your pages are indexed?

3 - Flash files are generally larger so how will you ensure that the navigation loads quickly for users on broadband?

4 - How will you ensure that users that rely on screenreaders have access to your content?

Flash has it's uses and hopefully you'll have considered these options but for critical functionality you should always ensure that a site works with just HTML. Then add CSS for presentation and then any JavaScript, Flash or other plugins to enhance the behviour.

Hope this helps.

[AVdes]

I have added the same links at the top in html. The flash is just for vistors to find the links that are directly related to the current page.