Link to home
Create AccountLog in
Avatar of ncw

asked on

Replacing tables with divs

If I replace a 2 cell table with the following <div> structure:
<div class="outer">
  <div class="leftCell">some content of varying height</div>
  <div class="rightCell">some other content of varying height</div>

I can set the width of div leftCell and rightCell and float to left and right respectively, but how can I make the leftCell and rightCell the same height as with a table cell? People say use Faux columns, can anyone provide a simple example please?

(The reason I need equal height is that the cells might have different background colours, or the outer cell might repeat as a row, in which case I wouldn't want the secong leftCell floating to below a short rightCell above.)
Avatar of favoretti
Flag of Netherlands image

you could use style="height: <xx>px; min-height: <xx>px; max-height: <xx>px;" attribute, or define a css class for it an apply it on the divs.
Avatar of Mark Steggles
Mark Steggles
Flag of United States of America image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of ncw


Steggs, your explanation was good and just what I wanted, it works well, thanks. I don't fully understand the  yet, it looks a bit like a 'workaround', but it works.

Even though I could explain it I dont think I will try... search around on the internet about why it is a good idea to 'clear floats'