I'll try to explain as much as I can without attaching images, as that
would be a violation of css-d. Okay, so here's the scoop:
I have two columns that display scheduling information for a racing
site and race placement statistics. Right now, when you place too much
content in either column, the information spills over onto other
content on the site (the text overlaps a background image in another
div, etc). This seems to happen only in Firefox, and only when there's
too much content.
So my idea was to make it so the two columns could dynamically resize
depending on the amount of content. But that also meant that they
would have to be equal height. So that means eliminating the height
attribute for starters, so on and so forth.
The structure looks like so:
The container is a <div>. The two columns are <div>s. Each column
<div> holds 3 <div>s, the last of which holds a <table> (I don't want
to change that since I didn't originally code it). The container is
called #section1, and the columns are #home_races (left) and
#home_standings (right), of the .home_bttm_block class. The inner
<div>s (that hold the <table>s) are .home_bttm_list class, but there's
currently no styling going on there.
I applied the hack on the subset of the site that had just the column
information on another file and it used to work in FF and IE, but when
I applied the trick to the page with all the content, it stopped
working, so I had to go back to square one. This has to work on IE 6+,
FF 3+, and Safari.
HTML:
<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>
</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>
CSS:
#section1{
/* content should determine height, not height attribute - ehourany */
/*height: 213px;*/
/* set overflow: hidden on container div to hide the inner column
overflows - ehourany */
overflow: hidden;
}
.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: #454445 url(../../images/global/home_races.gif) repeat-x;
}
#home_races {
float: left;
display: inline;
margin: 6px 0px 6px 7px;
line-height: 12px;
}
#home_standings {
float: right;
display: inline;
margin: 6px 7px 6px 0px;
line-height: 12px;
}
.home_bttm_list{
/* make columns expand by content, not height - ehourany */
/* height:130px; */
/* moved to .home_bttm_block container - ehourany */
/* background: #454445 url(../../images/global/home_races.gif)
repeat-x; */
}
Thank you all again for your help on this one! I have no idea why this
isn't working.
Eugene
On Sun, Nov 22, 2009 at 2:45 PM, Jay Tanna <[email protected]> wrote:
>
> If you tell us what exactly you are trying to do then I may be able to help
> you. Tell me how many columns you have, and what is the size of each columns
> in percentage. I will be able to post here a code for the div and related
> CSS.
>
> I use Matthew James Taylor's method which in my opinion is very practical and
> 100% CSS/HTML.
>
> You can read the article here if you want to have go yourself:
>
> <http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks>
>
>
> --- On Sat, 11/21/09, Eugene Hourany <[email protected]> wrote:
>
> Sigh.
>
> It stopped working, I'm not sure what happened.
>
> The bottom line is, I have a container div, and two column divs within it,
> floated to the left and the right, respectively. I applied the column hack
> to the columns, and set the container to overflow: hidden. And...the columns
> are expanding the container to beyond the size of the content. There's no
> height attribute set anywhere, I made sure of that. The hack is
> padding-bottom: 100px and margin-bottom: -100px.
>
> Thanks again,
>
> Eugene
>
>
______________________________________________________________________
css-discuss [[email protected]]
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/
