Getting them next to each other

[RFH Reseller: Rappie]

Is there a HTML/CSS expert around who can shed some light on this?

I’ve trying to create some basic layout for a website I am building. There is one thing that I am not able to fix it seems. Just this one thing …. This very little thing. Just that one thing that is keeping me busy all day. This tiny little CSS/HTML thingy. (Just one of those battle with HTML that keeps you up all night, you know what I am right? Or is it just me? )

You can view my layout creation here.

There are this two content layers (they are called layers right?) that I want next to each other, horizontally that is. At the same time the footer must stay at the bottom of the page itself at all time. Not on the bottom of the screen but on the page, so whenever you need scroll down because there is a lot of content the footer move down the bottom of the screen as well. (Like in my layout example).

The footer inst really the problem (I think). So far its working, but I don’t seem to be able to get the two content layers next to each other.

Any suggestion is highly …… highly … highly appreciated.

[RFH Reseller: MooMF]

Try this stylesheet... Changed left and right divs to floats, removed relative and absolute positioning declarations, plus one or two tweaks to get, (what I think is) required result.


<!--
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#container {
min-height: 100%;
width: 770px;
margin-left: auto;
margin-right: auto;
background-color:#CCCCCC;
}
/* Internet Explorer 6 */
* html #container {
height: 100%;
}
/**/
#header {
height: 75px;
background-color:#0066FF;
}
#green_bar {
width: 770px;
height: 20px;
background-color: #088A1C;
}
#content {
background-color:#FFFF99;
width: 770px;
height: 100%;
}
#ContentMain {
width: 500px;
height: 500px;
float: left;
background-color:#99FF99;
}
#ContentRight {
width: 270px;
height: 500px;
float: right;
background-color:#FF99CC;
}
#footer {
width: 770px;
background-color: #9999CC;
}
-->

Hope it helps.

Jim.

[RFH Reseller: nick]

Many people have tackled these problems, as you soon see if googling multi-column css layouts. One of my favourite little tools is this

It's worth playing around with anyway, to give you the feel for how to achieve complex layouts. One of these may suit your needs: http://www.fu2k.org/alex/css/onetrue...=1205402449576 or http://www.fu2k.org/alex/css/onetrue...=1205402597562 perhaps?

[RFH Reseller: Rappie]

Guys thank you for your replys

Jims solution was really close, but didn't worked in FireFox. Still i'll have a play with it and see how I can tweak things a bit. Thnks

Nick thanks for great link. Really helpfull ... I'll have a play with it and see how it works.

[RFH Reseller: randomdev]

The footer inst really the problem (I think).

Don't you believe it.

You are entering a world of pain. Ninjas have wept.

This type of footer positioning can only be achieved in a cross-browser way by using Javascript. A lot of sites will claim otherwise, but their methods only work for the simplest of layouts, and if you want to do anything complex (i.e. graphical with extra borders and headers, not a simple block-colour layout like your example) you are about to find out just how fun web design can be...

Here's a layout where I acheived just that kind of footer: http://www.rodo.co.uk

If there's not much content, the footer goes to the bottom of the screen. If there's enough content to scroll, then it sits at the end of the content. (I think this is what you're describing). It only works with Javascript enabled. I gave up trying to make it reposition on window.resize since this tended to cause infinite loops - moving the footer triggered a further window.resize and so ad infinitum - I didn't think it was worth spending any more time for something that, frankly, nobody would even notice or care about

[RFH Reseller: Mark Voss]

I'd use Faux Columns to get both columns to extend to the footer whatever their content's length - basically, you just create a background image for the container and repeat it downwards.

To get the footer to sit at the bottom of the screen if there's not much content but move it to the bottom of the page if it's longer than the screen you shouldn't need to use any JavaScript - a little additional markup & CSS should do the trick:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing page</title>
<style type="text/css">
<!--
html {
    height: 100%;
    margin-bottom:1px;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
#container {
    min-height: 100%;
    height: auto;
    margin: 0 auto -25px;
    width: 770px;
    background: #FF9 url(faux-columns.png) repeat-y;
    text-align: left;
}
#header {
    height: 75px;
    background-color:#06F;
}
#green_bar {
    width: 770px;
    height: 20px;
    background-color: #088A1C;
}
#ContentMain {
    float:left;
    width: 500px;
}
#ContentRight {
    float: left;
    width: 270px;
}
.push {
    clear: both;
    height: 25px;
}
#footer {
    margin: 0 auto;
    width: 770px;
    height: 25px;
    background-color: #99C;
    text-align: left;
}
-->
</style>
<!--[if lte IE 6]>
<style type="text/css">
#container {height: 100%;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
  <div id="header"> Header </div>
  <div id="green_bar"> Nav. bar </div>
  <div id="ContentMain"> Main - should be on the left side. Next the right layer. </div>
  <div id="ContentRight"> Right - should be on the right side, next to the Main layer.</div>
  <div class="push">&nbsp;</div>
</div>
<div id="footer"> This is the footer, always on the very bottom of the page. </div>
</body>
</html>

This ought to work in all of the following browsers:

Netscape 7
Firefox 2 & 3
Internet Explorer 5.5, 6 & 7
Opera 8 & 9
Safari 3

Working example: http://validcss.com/rappie