OK change your CSS to as follows or copy and paste it on your test page to see
if this is what you want. The columns are of equal length and they work
perfectly. Enter some data in your columns like I did in my code.
#section2 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#ffa7a7; /* column 2 background colour */
}
#section1{
float:left;
width:100%;
position:relative;
right:50%;
background:#fff689;
}
.home_bttm_block{
width: 484px;
/* get rid of height attributes to give columns dynamic sizing - ehourany */
/*min-height: 142px;
height: 142px;*/
position:relative;
/* apply column height hack - ehourany*/
margin-bottom: -100px; padding-bottom: 100px;
/* background: lime; url(../../images/global/home_races.gif) repeat-x; */
}
#home_races {
float:left;
width:46%;
position:relative;
left:52%;
overflow:hidden;
}
#home_standings {
float:left;
width:46%;
position:relative;
left:56%;
overflow:hidden;
}
</style>
Change your HTML code to as follows:
<div id="section2">
<div id="section1">
<div id="home_races" class="home_bttm_block">
<div class=".."> ... column header1 ... </div>
<div class=".."> ... column header2 ... </div>
<div class="home_bttm_list">
<table> ... lorem ipsum ... </table>
Put some stuff here <br/>
Put some stuff here <br/>
Put some stuff here <br/>
Put some stuff here <br/>
</div>
</div>
<div id="home_standings" class="home_bttm_block">
<div class=".."> ... column header1 ... </div>
<div class=".."> ... column header2 ... </div>
<div class="home_bttm_list">
<table> ... lorem ipsum ... </table>
</div>
</div>
</div>
</div>
--- On Mon, 11/23/09, Eugene Hourany <ehour...@gmail.com> wrote:
<Original snipped to save space>
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
