/    Sign up×
Community /Pin to ProfileBookmark

Extending height of a div based on surrounding divs

Copy linkTweet thisAlerts:
Jul 07.2005

Hi,

I have a 3 column layout on my site created using divs. I would like to extend the divs to be the same length, currently the left and right divs are at the height I set and are not extending to the height of the middle one.

I have tried various methods but the only reliable one I can find is to set the height of the divs to an arbitrary value (3000px) – but this solution is far from ideal.

Anyone have a nice method of doing this?

The page is at [URL=http://www.barryharris.me.uk/rssfeeds.php]http://www.barryharris.me.uk/rssfeeds.php[/URL] if you want to see it.

Thanks.

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@NogDogJul 07.2005 — Do a search on "faux columns". www.alistapart.com has a couple good articles on this.
Copy linkTweet thisAlerts:
@bunner_bobJul 07.2005 — I had this exact same question today, and thanks to the good folks on this board was led here:

http://www.stunicholls.myby.co.uk/layouts/threecol.html

In my case, I don't want all the columns to go to the bottom of the page. This extends all columns to the length of the longest one. Works pretty darn well - though as a newb it took a bit of messing around to work out the bugs.

  • - Bob
    • Copy linkTweet thisAlerts:
    @bokehJul 08.2005 — There are a number of ways you can do that. Here's an easy one. Put the three columns inside one div. Make an image 1 pixel in height with your three column and border colours. Use this image as the backgound of the containing div and repeat it vertically. The background image will display to the bottom of the longest column.
    ×

    Success!

    Help @barryharris spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.4,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...