Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2006
    Location
    Australia
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Three columns, centered, fixed width, 100% height. It can't be that hard!

    All I want is to have my centered, fixed width wrapper div to be flanked by two full height columns so I can whack in a nice gradient as the edge of my wrapper. I want the central column to be 1000px wide and the flanking columns 100px wide and always 100% height. How hard can that be?

    Naively, I imagined this would work:

    #body {
    height:100%;
    }

    #wrapper {
    width:1200px;
    margin:0 auto;
    font-size:1em;
    clear:both;
    height: 100%;
    }

    #left {
    height: 100%;
    float: left;
    width: 100px;
    background-repeat:repeat-y;
    background-image: url(Images/gradient-border-left.gif);
    }

    #center {
    width: 1000px;
    height:100%;
    float: left;
    }

    #right {
    width: 100px;
    height:100%;
    float: left;
    background-repeat:repeat-y;
    background-image: url(Images/gradient-border-right.gif);
    }
    <html>
    <body>
    <div id="wrapper">
    <div id ="left>
    </div>
    <div id="center">
    My content here.
    </div>
    <div id ="right">
    </div>
    </div>
    </body>
    </html>


    But my left and right columns are invisible until I add some text or something to give them a height. I've googled this of course, and put in the 100% height on the parent container and body, but it has no effect at all.

    Someone help please?
    pp
    -------------------------------------
    "Laziness is the mother of invention" - Thomas Edison (not really)

  • #2
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Hello ,
    make a border for each div you are using and then use float left property for left column and float right for right and provide width of wrapper="width of left column and width of right column"

  • #3
    New Coder
    Join Date
    Mar 2006
    Location
    Australia
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply. I'm not sure though quite what you're suggesting. Why should a border matter? And the width of the wrapper has to be the combined width of all three divs, i.e., 1000+100+100 =1200px, which is what I have. Currently it all works, except that I have to provide a fixed height for my side column divs, I can't use "100%".
    pp
    -------------------------------------
    "Laziness is the mother of invention" - Thomas Edison (not really)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •