www.webdeveloper.com
Results 1 to 4 of 4

Thread: Floating columns problem

  1. #1
    Join Date
    Jul 2009
    Posts
    3

    Floating columns problem

    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;
    }

  2. #2
    Join Date
    Apr 2009
    Posts
    122
    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 &#37; slightly to accommodate. Hope this helps.
    - Andy

  3. #3
    Join Date
    Jul 2009
    Posts
    3
    oh sweet. Thank you very much.
    So easy ... and took so many hours of frustration.

    Now I am smiling.

  4. #4
    Join Date
    Apr 2009
    Posts
    122
    - Andy

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles