Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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;
}
share|improve this question
    
I recommend you to read the tutorials here: css.maxdesign.com.au/floatutorial You will get some more background information. –  Raffael Luthiger Jan 10 '12 at 16:00
    
THanks, i will look at them –  user502549 Jan 10 '12 at 19:07
add comment

3 Answers 3

up vote 0 down vote accepted

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>
share|improve this answer
    
For real? Use a non-optimized js framework only for two column layout? –  Zenklys 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
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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