How to make column heights expand in css using 960

Question

Good Day.

I am using a 960 grid layout and two divs are created to serve as a background wrapper that is beyond the 960 width, and secondly to use as a content for 3 columns consisting of texts and images.

My problem is, I tried setting the height to 100% on both the background and content but it won't extend so that the images and texts do not overlap the background wrapper.

Am I missing something? Your help is greatly appreciated.

    <div id="contentMain" class="container_12">
        <div class="sub3 grid_4">
            <h2>Graphic Design</h2>
                <hr>
                    <p><span>I specialize in designing different graphic materials aimed to catch your target audience and bring more business to you.</span></p>
                    <div class="frameImg">
                        <img src="images/graphicdesign_image.jpg" alt="graphic design" />
                    </div><!-- end of framImg -->
        </div><!-- end of sub1 -->

        <div class="sub3 grid_4">    
            <h2>Web Design</h2>
                <hr>
                    <p><span>I can give life into your existing website and wow your visitors. When I work for a company, I always make sure they are happy with the results. I strive to think creatively for my clients, making myself a mirror of many faces.</span></p>
                    <div class="frameImg">
                        <img src="images/web_image.jpg" alt="web design" />
                    </div><!-- end of framImg -->
        </div><!--end of sub2 -->

        <div class="sub3 grid_4">    
            <h2>Motion Effects</h2>
                <hr>
                    <p>I am familiar with creating sophisticated motion graphics and cinematic visual effects using Adobe After Effects. I transform moving images for delivery to theaters, living rooms, personal computers, and mobile devices.</p>
                    <div class="frameImg">
                        <img src="images/motioneffects_image.jpg" alt="motion effects" />
                    </div><!-- end of framImg -->
        </div><!--end of sub3 -->

    </div><!-- end of contentMain -->

    <div class="clear"></div> <!-- Important! -->

#contentMainBackground {
    background:url("../images/body_bg.jpg") repeat;
    min-height:290px;
    height:auto !important;
    height:290px;
    width:100%;
    position:absolute;
}
#contentMain {
    min-height:290px;
    height:auto !important;
    height:290px;

http://ofsgraphics.com/ofsv3/services.html – telo78 Dec 06 '11 at 01:49 — telo78, Dec 06 '11 at 01:49

score 0 · Answer 1 · answered Dec 06 '11 at 01:56

0

http://blueprintcss.org/

Highly recommended framework, I've used it for multiple projects.

Allows you to avoid annoying CSS hacks like this.

answered Dec 06 '11 at 01:56

jwg2s

806
1
12
25

Hmm...thank you but I've started using 960 grid. How big would the learning curve be? – telo78 Dec 06 '11 at 02:01

score 0 · Answer 2 · answered Dec 06 '11 at 03:54

Why don't you just have a container div for your 12-column grid and apply the background to that top level container element?

<div id="wrapper">

<div id="contentMain" class="container_12">
        <div class="sub3 grid_4">
            <h2>Graphic Design</h2>
                <hr>
                    <p><span>I specialize in designing different graphic materials aimed to catch your target audience and bring more business to you.</span></p>
                    <div class="frameImg">
                        <img src="images/graphicdesign_image.jpg" alt="graphic design" />
                    </div><!-- end of framImg -->
        </div><!-- end of sub1 -->

        <div class="sub3 grid_4">    
            <h2>Web Design</h2>
                <hr>
                    <p><span>I can give life into your existing website and wow your visitors. When I work for a company, I always make sure they are happy with the results. I strive to think creatively for my clients, making myself a mirror of many faces.</span></p>
                    <div class="frameImg">
                        <img src="images/web_image.jpg" alt="web design" />
                    </div><!-- end of framImg -->
        </div><!--end of sub2 -->

        <div class="sub3 grid_4">    
            <h2>Motion Effects</h2>
                <hr>
                    <p>I am familiar with creating sophisticated motion graphics and cinematic visual effects using Adobe After Effects. I transform moving images for delivery to theaters, living rooms, personal computers, and mobile devices.</p>
                    <div class="frameImg">
                        <img src="images/motioneffects_image.jpg" alt="motion effects" />
                    </div><!-- end of framImg -->
        </div><!--end of sub3 -->

    </div><!-- end of contentMain -->

</div>

    <div class="clear"></div> <!-- Important! -->

Or maybe apply the background to the body tag instead?

Thank you... The horizontal line and background image need to exceed 960 grid that's why I had to create separate divs for those. Underneath the divs would have the main content.. — telo78, Dec 06 '11 at 04:34
I had to make sure that the background has to stretch every time the mainContent div stretches. Basically they are 2 different divs on top of each other. Specifying an actual height only makes the mainContent div float. — telo78, Dec 06 '11 at 04:37
http://www.ofsgraphics.com/ofsv3/services.html (this explains my problem) the background is on a different div compared to the 3 columns. i'd like to stretch the columns at the same time stretch the background. — telo78, Dec 06 '11 at 04:40

How to make column heights expand in css using 960

2 Answers2