Floating columns problem

**Montague** · 07-31-2009 02:00 AM

I have rebuilt my layout numerous times ( I currently have 7 different copies of various layouts.) I have done tutorials, and have used various ideas and bits and pieces to try to accomplish a layout which I want.

My Goal: Fixed header with navigation tabs. Fixed footer. 2 columns - Left main content using approx 80%, right information column using the rest.
This all fits into approx 80% of page width.
With the fixed footer and header, the two columns can scroll up or down "behind the header and footer".
I will be using the layout to display gridviews of data from a SQL database, and also various charts.

The layout is nearly there, in terms of all the elements being where they should be, but for the life of me, I cannot get the two columns to line up next to each other. I want a "liquid - floating" format where the two columns will always stay in their respective corners.
This is a must have.

Lastly, something that I would also like, is for my container body, to stretch from header to footer, behind the two columns, even if the columns are short.
It will not often happen that my pages are short, but sometimes it will.

Is there someone kind enough to point out where I am going wrong? ( I know there is much yet still to be done, but would like to get my foundation sorted. The colors are just so that I can see the layout clearly)

Code:

<body>
    <div id="wrapper">
        <div id="headmask">
            <div id="headwrapper">
                <div id="header">
			    <!-- header start -->
			    some heading
			    <!-- header end -->
                </div>
            </div>
        </div>
        <div id="container">
            <div id="main">
			    <!-- main start -->
                <h1>Title Placeholder</h1>
                <p>Lorem ipsum dolor sit amet</p>
 			    <!-- main end -->
           </div>
            <div id="right">
			    <!-- right start -->
            <p>Some content</p>
			    <!-- right end -->
            </div>
            <div class="clearer">&nbsp;</div>
        </div>
        <div id="footmask">
            <div id="footwrapper">
                <div id="footer">
    			    <!-- footer start -->
                    <p>&copy; the footer-foundation :)
                    </p>
    			    <!-- footer end -->
                </div>
            </div>
        </div>
    </div>
</body>

Code:

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	text-align: center;
	margin: 0px;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}
body, #headmask, #footmask {
	background-color: #5F56C2;
}
#wrapper {
	width: 80%;
	padding: 10px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: auto;
	text-align: left;
	border: 1px solid #DDD;
	background-color: #000;
}
#headmask {
	clear: both;
	width: 80%;
	position: fixed;
	top: 0;
	left:10%;
	width:80%;
	height: 100px;
	padding-top: 30px;
	border-top-width: 20px;
	margin-left: -11px;
    padding-right: 20px;
    z-index: 1;
	border-left: 1px solid #5F56C2;
	border-right: 1px solid #5F56C2;
}
#headwrapper {
	clear: both;
	border-top: 1px solid #DDD;
	border-left: 1px solid #DDD;
	border-right: 1px solid #DDD;
	background-color: #000;
	width: 80%;
	position: fixed;
	left:10%;
	width:80%;
	margin-top: -11px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: -11px;
	height: 100px;
	padding-top: 10px;
    padding-right: 20px;
    z-index: 1;
}
#header {
	clear: both;
	position: fixed;
	top:30;
	left:10%;
	width:80%;
	margin: 0px;
	padding: 0px;
	height: 100px;
	background-color: #8C83E7;
    z-index: 1;
}
#container {
	padding: 0px;
	margin-top: 110px;
	margin-right: 0px;
	margin-bottom: 50px;
	margin-left: 0px;
	background-attachment: scroll;
	height: 1%;
	width: auto;
	position: relative;
}
#main {
	height: auto;
	width: 80%;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	float: left;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	line-height: 1.8em;
	background-color: #8C83E7;
}
h1 {
	font-size: 14px;
	margin: 0px;
	padding: 0px;
}
#right {
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	height: auto;
	width: 18%;
	float: left;
	left: 81%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 6px;
	background-color: #8C83E7;
}
.clearer {
	font-size: 0px;
	line-height: 0px;
	display: block;
	margin: 0px;
	padding: 0px;
	clear: both;
	height: 0px;
	width: auto;
}
#footmask {
	clear: both;
	width: 80%;
	position: fixed;
	bottom: 0;
	left:10%;
	width:80%;
	height: 70px;
	border-top-width: 20px;
	margin-left: -11px;
	margin-bottom: 0px;
    padding-right: 20px;
	border-left: 1px solid #5F56C2;
	border-right: 1px solid #5F56C2;
    z-index: 1;
}
#footwrapper {
	clear: both;
	border-bottom: 1px solid #DDD;
	border-left: 1px solid #DDD;
	border-right: 1px solid #DDD;
	background-color: #000;
	width: 80%;
	position: fixed;
	left:10%;
	width:80%;
	margin-bottom: -11px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: -11px;
	height: 40px;
	padding-bottom: 10px;
    padding-right: 20px;
    z-index: 1;
}
#footer {
	clear: both;
	position: fixed;
	bottom:30;
	left:10%;
	width:80%;
	height: 40px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: -10px;
	text-align: center;
	padding-top: 15px;
	padding-right: 20px;
	padding-bottom: 15px;
	padding-left: 0px;
	background-image: url(images/footer_bg.png);
	background-repeat: repeat-x;
	background-position: 0px 0px;
    z-index: 1;
}
#footer p {
	color: #999999;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding: 0px;
}
#footer a:link, #footer a:visited, #footer a:active {
	color: #999999;
	text-decoration: none;
}
#footer a:hover {
	color: #CCCCCC;
	text-decoration: none;
}

**Andyram2k** · 07-31-2009 03:33 PM

Hi Montague,
The problem you're having is caused by the padding on main and right divs. If you take off the padding, you will see it resolves the issue. Either remove the padding, or reduce your width % slightly to accommodate. Hope this helps.

**Montague** · 08-01-2009 05:29 AM

oh sweet. Thank you very much.
So easy ... and took so many hours of frustration.

Now I am smiling.

**Andyram2k** · 08-01-2009 06:21 AM

Thread: Floating columns problem

Thread Tools

Display

Floating columns problem

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions