Need help positioning div

Discussion in 'CSS' started by tiwas, May 14, 2010.

0
  1. #1
    Hi,

    I'm trying to make a page the the header and footer menu are fixed. Between these there should be a left menu and a content area, both occupying 100% of the space between the header and footer. I've been playing around with this for a few hours now, and I'm on the verge of using framesets! :( Any help, preventing the abuse of framesets, would be greatly appreciated :)

    This is what I have at the moment:
        
<style type="text/css">
        html, body
        {
            margin: 0;
            padding: 0;
            height: 100%; /* ie 6 will use this instead of min-height */
            min-height: 100%; /* ie 6 will ignore this */
            width: 100%;
            min-width: 100%;
            overflow: hidden;
            border: 1px dotted;
        }
        .header
        {
            height: 100px;
        }
        .content-wrapper 
        {
        }
        .content
        {
            height: auto;
            min-height: inherit;
            width: auto;
            min-width: inherit;
            margin-top: 150px;
            margin-left: 120px;
            margin-right: 15px; /*margin-bottom: 150px;*/
            margin-bottom: 100px;
            overflow: auto;
            background-color: Gray;
        }
</style>
    HTML:
    
<body>
    <form id="form1" runat="server">
    <div id="content-wrapper">
        <div id="content" class="content">
            text</div>
    </div>
    <%--<div id="footer">Footer</div>
<div id="header">Header</div>--%>
    </form>
</body>
    HTML:
    Now, as far as I can tell this should produce a box with the given margins, but...it kind of doesn't! The css for the body expands the view (I can see the border around it), and the margins on the contens ensures that the top, left and right margins are working. However, using a margin-bottom doesn't do anything, and the size of my contents is the same as what's inside it. Also, when resizing the browser window it should resize, too, but...this doesn't happen :S

    Anyone able to help me out?

    Cheers!

    P.S. I don't want to use quirks mode, and to be frank I could care less about older browsers. If the solution works in firefox and ie >= 6 I would be extremely happy!
     
    tiwas, May 14, 2010 IP
  2. Robico

    Robico Greenhorn

    Messages:
    41
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #2
    Hi,

    Here is my solution for 2 column CSS layout with header and footer.

    body {
margin:0;
padding:0;
height:100%;
}

#header{
width:100%;
background-color:#0000CC;
height:100px;
clear:both;
}

#container{
height:100%;
}

#column1{
width:50%;
float:left;
background-color:#FF0000;
position:absolute;
top:100px;
bottom:100px;
}

#column2{
width:50%;
float:right;
clear:right;
background-color:#330033;
position:absolute;
right:0;
top:100px;
bottom:100px;

}

#footer{
width:100%;
background-color:#FFFF00;
height:100px;
position:absolute;
bottom:0;
}
    Code (markup):
    <body>

	<div id="header">Header</div>
	<div id="container">
    	<div id="column1">Column 1</div>
  		<div id="column2">Column 2</div>
	</div>

<div id="footer">Footer</div>
</body>
    HTML:
    Hope this helps :)
     
    Robico, May 15, 2010 IP