Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

need help extending 2 columns equally.

Status
Not open for further replies.
phrozt

phrozt

IS-IT--Management
Jul 8, 2004
78
US
In mozilla based browsers, I'm having a hard time extending 2 columns equally. Let my illustrate what is hapening.
________________________
Header
________________________
[Div bar ]
|-----------|-----------|
| col one | col two |
| lots | not as |
| and | much |
| lots | text |
| of |___________|
| text |
|___________|
[Div bar ]
Footer


I'm trying to get it so both columns are extended the same length (because one is white, one is black, and it looks bad if they don't extend. It also sometimes screws up the footer on mozilla until refreshed.

If anyone can understand this and knows how to help, I'd be appreciative.

Note: Already tried the <br style="clear: both;" /> after the second column trick.. that didn't help.

Thanks
 
Sort by date Sort by votes
Just to clarify.. from that horrific illustration... I'm trying to extend the "height" of both columns so that they are the same size. Also, height is not known, as content is dynamically generated.
 
Upvote 0 Downvote
Just to clarify.. from that horrific illustration... I'm trying to extend the "height" of both columns so that they are the same size. Also, height is not known, as content is dynamically generated.
 
Upvote 0 Downvote
There are several ways do to this. The most elegant one I have seen, posted here I think but I can't remember who provided it, is to create a one pixel high graphic of the two colors the width you need them to be, and then assign the graphic to the background of either the <body> or of a container div that contains the two divs you want to equalize. It will look seamless. specify "repeat:repeat-y" so it repeats vertically:
Code: 
<div background="stripe.gif" repeat="repeat-y">
<left div>...lots and lots of text... </div>
<right div>...less text...</div>
</div>

Stripe.gif is a one-pixel high bar, as wide as the container div:
BBBBBBBBBBBBBBBBBBBBBBBBBBWhere "B" is a black pixel and W is a white pixel.


Mike Krausnick
Dublin, California
 
Upvote 0 Downvote
Wow - talk about your concidences. I was just reading another thread and came across a reference to the home page of which contains an article entitled "2-col tableless layout". There you go!

Mike Krausnick
Dublin, California
 
Upvote 0 Downvote
The main question is how you wanted it to work and how do you think the browser should know how tall the column next to it is. Faux columns is one of the methods but it will only be successful if one column is always longer than the other.
 
Upvote 0 Downvote
Actually faux columns will always work in the sense that the colors will display with the same height. Whether the colors will go all the way to the bottom of the screen depends on whether the content does. If the content doesn't reach the the bottom of the screen but you want the color to fill the screen anyway, as vragabond says, that's more complicated.

Mike Krausnick
Dublin, California
 
Upvote 0 Downvote
actually, I was going to set up some faux columns anyway.. but I don't really like that fix, because it doesn't address content that flows based on the right column. I.E... if content is getting it's positioning based on the previous element, and the previous element does not extend all the way, then the following element will not be placed correctly.. regaurdless if the faux columns fix the visual aspect. :/.

Thank you all for your input, however, it is much appreciated.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
145
jason.lex
jason.lex
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
180
Carlvic
Carlvic
LyndonOHRC
  • Locked
  • Question
Need advice with printing on check stock
Replies
5
Views
277
LyndonOHRC
LyndonOHRC
geneg28
  • Locked
  • Question
NEED HELP WITH CREATING LINKS
Replies
6
Views
238
geneg28
geneg28
rastaIT34
  • Locked
  • Question
CSS help in WordPress
Replies
3
Views
155
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top