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

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.

Any luck finding the post?

Cheers

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

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”.


<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.


* {
	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.


#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.


#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).


#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:


#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.

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?

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”.

I’m telling you, Dan, you need to write a book, or at the very, very least, a set of Web tuts.