Search code examples
csshtmlcenterresize

3 columns div css

I'm trying to build a webpage with 3 columns. The one in the middle (centered) needs to have fixed width (1000px) and the other 2 with no specific width. When the user resizes the window only the left one and the right one should be resized. Is this possible?

Regards

Solution

  • Yes this is possible

    You should create one maindiv in your css and set the background to repeat in your body like shown below and give it a background color/gradient/whatever you like. I usually use a 1px width gradient picture.

    Setting the same background color and image in your div as in your body will help you keep an even background depending on your design (i.e. You have a design that has a margin at the bottom of 20px to create a clear space, then the background will follow through instead of showing white)

    STYLESHEET.CSS

    body {
margin: 0px;
background-position: 0px 0px;
background-repeat: repeat-x;
background-color: #03255d;
background-image: url(../img/bg_gradient.gif);
}

#MainDiv {
position: absolute;
width: 1000px; /* width of middle column */
z-index: 1;
top: 0%;
left: 50%;
margin-left: -500px; /* should be half and minus of width to center it */
background-color: #03255d; /* set background color same as body */
background-image: url(../img/bg_gradient.gif); /* set background image same as body */
}

    Now in your HTML after the body tag you start with your MainDiv and before the body end tag you close the MainDiv

    INDEX.HTML

    <body>
    <div id="MainDiv">
        Your HTML here
    </div>
</body>

    Now when you resize your browser, it resizes the background and your middle column stays centered