Anyone know a way to make 2 interdependent DIVS, side by side? I can do the side by side thing but how about interdependency? You know, text in either one causes them both to get taller. This seems to be a very basic building block to getting around using tables.hmm....maybe you should try giving them a container....like this:
<div id="container">
<div id="left">
blah
<br />
blah
<br />
blah
</div>
<div id="right">
blah
</div>
</div>
and then some css
div#container
{
height: auto;
width: 100%;
}
div#left
{
float: left;
height: 100%;
width: 50%;
}
div#right
{
float: right;
height: 100%;
width: 50%;
}
that way, when the container expands in height, so will the two contents since their heights are set to 100%....
i im pretty sure that should help
[[[terminal]]]You may be interested in Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) at A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->).I thought about the 100% height but I just thought that wasn't very well supported. I'll tinker, thanks.Originally posted by toicontien
You may be interested in Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) at A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->).
Thanks, but I actually need the columns to stretch, not the appearance of stretching through bg images...
This is a 3 column (<!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/css-3col-layout/">http://www.pixy.cz/blogg/clanky/css-3col-layout/</a><!-- m -->) layout, but should be adaptable for 2 column.Originally posted by Fang
This is a 3 column (<!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/css-3col-layout/">http://www.pixy.cz/blogg/clanky/css-3col-layout/</a><!-- m -->) layout, but should be adaptable for 2 column.
Thanks. There's some other similar ones out there as well...
pie (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/threecolbglong.html">http://www.positioniseverything.net/threecolbglong.html</a><!-- m -->)
pixy (<!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/css-3col-layout/">http://www.pixy.cz/blogg/clanky/css-3col-layout/</a><!-- m -->)
lavatop (<!-- m --><a class="postlink" href="http://www.lavatop.com/3col2.htm">http://www.lavatop.com/3col2.htm</a><!-- m -->)
I'm gonna check this out a bit and see if it helps:
pie lily pad (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/guests/3colcomplex.html">http://www.positioniseverything.net/gue ... mplex.html</a><!-- m -->)Here is a mockup of how the page should work. It's "pretty much done" except for "D" and "E" on the mockup. "D" has a right margin and "E" (a fixed width area) is floated in that margin, which of course means it's not in the flow, so it's not forcing "D" to get taller when it has more content than "D". "D" has a blue background that needs to fill in - "D" is fluid and I will never know it's dimensions.
mockup (<!-- m --><a class="postlink" href="http://www.johnbarrick.com/test/height_example_01.gif">http://www.johnbarrick.com/test/height_example_01.gif</a><!-- m -->)
For now, to get this done I've had to make D+E a table to get the desired effect. Maybe if D and E were percentage widths I wouldn't need to float E? I think E floating is the problem...
edit: FYI, I cannot use absolute position in this except in an instance like a skipnav where that declaration is used to simply take something out of the flow, not to actually position it.
<div id="container">
<div id="left">
blah
<br />
blah
<br />
blah
</div>
<div id="right">
blah
</div>
</div>
and then some css
div#container
{
height: auto;
width: 100%;
}
div#left
{
float: left;
height: 100%;
width: 50%;
}
div#right
{
float: right;
height: 100%;
width: 50%;
}
that way, when the container expands in height, so will the two contents since their heights are set to 100%....
i im pretty sure that should help
[[[terminal]]]You may be interested in Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) at A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->).I thought about the 100% height but I just thought that wasn't very well supported. I'll tinker, thanks.Originally posted by toicontien
You may be interested in Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) at A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->).
Thanks, but I actually need the columns to stretch, not the appearance of stretching through bg images...
This is a 3 column (<!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/css-3col-layout/">http://www.pixy.cz/blogg/clanky/css-3col-layout/</a><!-- m -->) layout, but should be adaptable for 2 column.Originally posted by Fang This is a 3 column (<!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/css-3col-layout/">http://www.pixy.cz/blogg/clanky/css-3col-layout/</a><!-- m -->) layout, but should be adaptable for 2 column.
Thanks. There's some other similar ones out there as well...
pie (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/threecolbglong.html">http://www.positioniseverything.net/threecolbglong.html</a><!-- m -->)
pixy (<!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/css-3col-layout/">http://www.pixy.cz/blogg/clanky/css-3col-layout/</a><!-- m -->)
lavatop (<!-- m --><a class="postlink" href="http://www.lavatop.com/3col2.htm">http://www.lavatop.com/3col2.htm</a><!-- m -->)
I'm gonna check this out a bit and see if it helps:
pie lily pad (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/guests/3colcomplex.html">http://www.positioniseverything.net/gue ... mplex.html</a><!-- m -->)Here is a mockup of how the page should work. It's "pretty much done" except for "D" and "E" on the mockup. "D" has a right margin and "E" (a fixed width area) is floated in that margin, which of course means it's not in the flow, so it's not forcing "D" to get taller when it has more content than "D". "D" has a blue background that needs to fill in - "D" is fluid and I will never know it's dimensions.
mockup (<!-- m --><a class="postlink" href="http://www.johnbarrick.com/test/height_example_01.gif">http://www.johnbarrick.com/test/height_example_01.gif</a><!-- m -->)
For now, to get this done I've had to make D+E a table to get the desired effect. Maybe if D and E were percentage widths I wouldn't need to float E? I think E floating is the problem...
edit: FYI, I cannot use absolute position in this except in an instance like a skipnav where that declaration is used to simply take something out of the flow, not to actually position it.