How make a growing column in css?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-22 17:36 出处：网络

I\'m trying to create a web page and I have this problem-question. The idea is to show an article in the main column, to the left, and several comments below the article.

相关专题：css layout

I'm trying to create a web page and I have this problem-question. The idea is to show an article in the main column, to the left, and several comments below the article. In the right column, we'll show ads. The problem is this: I have proved several layouts (this is the last one), but always the right column fall below the left (article-and-comments). How I could do this?. The idea is that the left column (article-and-comments), could grow indefinitely, or even could be very short (if no one has commented), but the right column always keep on the right.

<body>
<div class="container">
  <div class="header">Header menus etc etc</div>
  <div id="main-block"> 
    <div id="article-and-comments">
      <div class="article-detail">The Article  </div> 
      <div class="comment">1° Comment</div>
      <div class="comment">1° Comment</div>
      <div class="comment">1° Comment</div>
   </div>
   <div class="advertising">
      Right Column with Ads 
   </div>
   <div class="push"></div> <!-- This is to push the footer to the bottom
  </div> <!-- main-block -->
  <div class="footer">
    Footer
  </div>

开发者_如何学Go

you need to make the article-and-comments and advertising widths to add up to the main-block width.

And you need to float them left and right ..

example at http://www.jsfiddle.net/gaby/tBd7L/

There are a few ways to do this. One is to set your content column to a fixed width and float it left, then set your ad column to have a left margin greater than or equal to the width of the content column.

Here's a very rough example:

http://jsfiddle.net/PVqKX/