Hello everyone!

I have a small sceth with layout I need to achive, but only with divs. I tried and tried, but nothing came out of it. Maybe someone could help me.

I would be really thankful.

1 answer

Ktash 1851
0
points
This was chosen as the best answer

I'm going to assume that the image you posted is the sort of layout you are going for. If that's the case, you might want to check out A List Apart as they have some good articles on the matter: 3 Columns, Multi-Column Layout, and Faux Columns. As I stated in another question I tend to like the second one, but any of them work for most situations. UPDATE Whoops. With a three column layout, 2 is the best in my opinion. Since you are only doing two columns, Faux Columns, is probably more what you're looking for. The others are good information to have though :)

Second Update based on comment: If you're just looking to exactly fill one page, the best solution may to set the top and bottom to a certain height, have a div in the middle that fills the remaining hieght, and do either percentage based widths and floating, or using the Conflicting Absolute Positions technique.

Update with example:

This code is what I was thinking. Works for me. Though I didn't implement the IE 6 fix, so its IE 7+ without modification.

CSS

        body {
            margin: 0px;
            padding: 0px;
        }
        #top {
            height: 45px;
            width: 100%;
            background-color: #CCCCCC;
        }
        #leftmiddle {
            position: absolute;
            bottom: 45px;
            top: 45px;
            left: 0px;
            width: 200px;
            background-color: #AACCFF;
        }
        #rightmiddle {
            position: absolute;
            bottom: 45px;
            top: 45px;
            left: 200px;
            right: 0px;
            background-color: #666666;
        }
        #bottom {
            position: absolute;
            bottom: 0px;
            height: 45px;
            width: 100%;
            background-color: #AAAAAA;
        }

HTML

    <div id="top">
    <div>
    <div id="leftmiddle">
    </div>
    <div id="rightmiddle">
    </div>
    <div id="bottom">
    </div>
Answered about 6 years ago by Ktash
  • Actualy, this is just what I need. I need the top and the bottom div to be static, so they will have static height, but div in the middle should strech. Actualy, it should stretch verticaly on whole screen, but in width, only the larger area should stretch. Blue one will have static width, but I just can't stretch anyway without content inside. Eugene about 6 years ago
  • Updated again with an example. Ktash about 6 years ago
  • Just what I needed. Thank you very much. Eugene about 6 years ago