SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to Use a Liquid and Fixed Layout Problem

    Hi,

    I'm working on a layout where i have coded the main content area at the top of the page so when Google looks through the code the content I want searched is at the top of the page.

    Therefore I thought that i could use a fixed layout to achieve the look for the site I want. The problem is I only have ever used liquid layouts so have used floats etc and not really looked at using the 'position' property.

    So what i'm trying to acheive first is to get my content to sit in the layout how i want it to and have the header information and login bar area appear above this section but when i use a left float for the navigation bar it sits in the middle of the page.

    I've included links to the example below.

    http://www.datingarrangement.com/dev/

    Can anyone shed some light on this for me?

    Thanks

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're going to have to use floats and negative margins for this, plus an extra "inner wrapper" DIV. I wrote a post explaining how to do it not too long ago, hang on while I try to find it.

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any luck finding the post?

    Cheers

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    No, but I did write something better for someone else (which shows how to make equal-height columns using floats and margins).

    Here's what you need to do. First, start with a container that will hold your Web page. When you code your content DIV, add another DIV directly inside it, and give it a class of "wrapper".

    HTML Code:
    <div id="container">
    	<!-- header and menu code go here -->
    	<div id="content">
    		<div class="wrapper">
    			<!-- main page content goes here -->
    		</div>
    	</div>
    	<div id="sidebar">
    		<!-- Sidebar Content Goes Here -->
    	</div>
    	<!-- footer code goes here -->
    </div>
    Reset your margins and padding, then give your #container selector a background color. This must match the content wrapper's background color later on. Please forgive the ugly pastels, they're being used only for demonstration purposes.

    Code CSS:
    * {
    	margin: 0;
    	padding: 0;
    }
     
    #container {
    	background: #FFF;
    	color: inherit;
    }

    Next, give the #content DIV the background color that will appear in the sidebar (yes, the sidebar); then float it to the left and set its width to 100%. Don't add any borders, margins or padding here other than a negative margin equal to the width of the sidebar; otherwise you'll break the layout (if you want to add a border, adjust your margins accordingly). In this case, the margin will be -200px wide and will be applied to the right side.

    Code CSS:
    #content {
        background: #99C;
        color: inherit;
        float: left;
        margin: 0 -200px 0 0;
        width: 100%;
    }

    Now add the style rules for the content wrapper. Remember to match the #container rule's background color to the wrapper, then set the right margin to be the same as the negative margin in its parent (200px). Then set overflow to hidden (to contain any floats inside the content wrapper); if you want to add padding (to perhaps create some white space), do so now.

    Code CSS:
    #content .wrapper {
        background: #FFF;
        margin: 0 200px 0 0;
        overflow: hidden;
        padding: 10px 0 10px 10px;  /* optional, feel free to remove */
    }

    Finally, add the sidebar's CSS code. All you have to do here is repeat the background color declared in the #content selector, float it to the left, and give it a width equal to the margin that was set previously in #content .wrapper (200px in this case).

    Code CSS:
    #sidebar {
        background: #99C;
        color: inherit;
        float: left;
        width: 200px;
    }

    This will work in every browser without any need for conditional comments or hacks when done correctly. If you want the sidebar to appear on the left, float #content to the right and set the margins to the left instead of the right, like this example:

    Code CSS:
    #content {
        background: #99C;
        color: inherit;
        float: right;
        margin: 0 0 0 -200px;
        width: 100%;
    }
     
    #content .wrapper {
        background: #FFF;
        margin: 0 0 0 200px;
        overflow: hidden;
        padding: 10px 0 10px 10px;  /* optional, feel free to remove */
    }

    Just make sure you clear both sides of the content you don't want floated afterword using clear; both; (such as a footer). Note that you may have to add height: 1%; to the non-floated element following the two columns in order to trip hasLayout in Internet Explorer 5.x and 6.

    In your particular case though, just replace <div id="sidebar"></div> and #sidebar with <ul id="menu"></ul> and #menu, respectively.

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dan for this solution. I just tried it and it works for even me (dense head). I've noticed that the sidebar must come after the content in the source order, otherwise the maincontent top drops below the sidebar's bottom (I used left sidebar). Why is that?

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The sidebar can come before the main content; the negative margins (and regular margins) will need to be reworked a bit in order to accomodate it. Opera will also need a style rule (I forget which, but I think its relative positioning) in order to prevent a stacking "error".

  7. #7
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I'm telling you, Dan, you need to write a book, or at the very, very least, a set of Web tuts.


Bookmarks

Posting Permissions

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