0

I'm making a site with two columns. Either of the columns can be larger than the other and they have different backgrounds. My problem in trying to do it with CSS with the clearfix trick, is that colors are right when the color of the underlying wrapper has the color of the shorter column, but when it has the color of the larger column, the design changes visually. Maybe I'm doing it wrong.

I've achieved what I want, but with tables. I've asked a friend that makes websites and he told me that tables shouldn't be used for design and that tables are for cavemen. The funny thing is that he couldn't achieve what I want either.

Well, this is basically my HTML code:

<div class="float_container clearfix">
   <div class="column1">
      Column 1 content
   </div>

   <div class="column2">
      Column 2 content
   </div>
</div>

This is my CSS:

.column1 {
float: left;
width: 200px;
background-color:red;
}

.column2 {
float: left;
width: 390px;
height: 1%;
background-color:blue;
}
0

It's a basic question... there are may posts about this out there and many solutions.

Here are a few of them: http://www.ejeliot.com/blog/61

The easiest (not exactly recommended) is to use jQuery.

<script>
     $('. float_container').equalHeights();
</script>
  • For real? Use a non-optimized js framework only for two column layout? – iammichiel Jan 10 '12 at 14:39
  • Thanks, the link is really useful! I knew it was a basic question, but im a newbie, also i dont know why people have so many issues with tables in these cases – user502549 Jan 10 '12 at 18:16
  • Zenklys: What exactly do you mean? – Zeno Popovici Jan 13 '12 at 11:59
  • user502549: tables are used for tabular content, not website layouts. Learn CSS, do things right. – Zeno Popovici Jan 13 '12 at 12:01
0

Go for the basic css implementation. Will be much better for maintenance.

0

Tables are for tabular data, not layout. Stick with your DIVs and CSS for layout.

You could simply apply the coloured background (of both columns) to the float_container (faux columns) instead of .column1 and .column2. It will then 'look' as if both columns are the same height - the height of the tallest column. This is assuming both columns are of fixed width.

The coloured background of the float_container would be an image (perhaps even just 1px high) that is repeated vertically and contains the colour of each column.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.