Problem splitting DIV into 2 columns

[Eiolon]

I have a DIV that I split into two columns.

 

Left column has a fixed width of 500px.

Right column needs to expand 100% to fill the screen regardless of resolution.

 

What is happening is the right column is aligning itself to the right and there is tons of space in the middle.

 

If I tell the right column to be 100% it drops the column below the left column.

 

Attached is a screenshot of what is happening and what I am trying to do.

 

My code:

 

CSS

 

#wrapper {
border: 1px solid #000000;
}

#left {
width:500px;
float:left;
border: 1px solid #000000;


}

#right {
float:right;
border: 1px solid #000000;
width: 100%;

}

 

HTML

 

<div id="wrapper">
<div id="left">

<div class="program">
<label for="name">Name</label>
<input class="textbox" type="text" name="name" id="name" maxlength="100" title="What is the name of the program?" value="" />
</div>
<div class="program">
<label for="start">Date & Time</label>
<input class="textbox" type="text" name="start" id="start" maxlength="100" title="What date and time does it occur?" value="" />
</div>
<div class="program">
<label for="location">Location</label>
<input class="textbox" type="text" name="location" id="location" maxlength="100" title="Where is the program being held?" value="" />
</div>
<div class="program">
<label for="coordinator">Coordinator</label>
<input class="textbox" type="text" name="coordinator" id="coordinator" maxlength="100" title="Who is creating this program?" value="" />
</div>
<div class="program">
<label for="seats">Seats</label>
<input class="textbox" type="text" name="seats" id="seats" maxlength="3" title="How many seats are available?" value="" />
</div>

</div>
<div id="right">

<div class="program">
<label for="name">Name</label>
<input class="textbox" type="text" name="name" id="name" maxlength="100" title="What is the name of the program?" value="" />
</div>
<div class="program">
<label for="start">Date & Time</label>
<input class="textbox" type="text" name="start" id="start" maxlength="100" title="What date and time does it occur?" value="" />
</div>
<div class="program">
<label for="start">Date & Time</label>
<input class="textbox" type="text" name="start" id="start" maxlength="100" title="What date and time does it occur?" value="" />
</div>

</div>
</div>

 

[attachment deleted by admin]

[miancu]

The trick I used was to give fixed width and float:left to the left DIV and no floating and no width to the DIV in the right. The right div aligns by itself on the left and takes the entire space(100%).

 

Hope this works for you too!

[isedeasy]

This is how I would do it

 

<div id="left">

</div>

<div id="right">

</div>

 

#left {
width:500px;
float:left;
}

#right {
margin:0 0 0 500px;
}