Basic CSS question

[Alexpte]

It's been over a year now since I did any CSS so I'm very rusty, bear with me! I'm sure this is a very simple question, but what I want to do is have a static container fixed in the centre of the page, then two columns using floats. In firefox the floating column always appears below the container, what am I doing wrong?

Here is the code, for the container and float:

#container
  {
    width:800px;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFFFFF;
	height:auto;
  }
	#left-bar
	{
	width:260px;
	float:left;
	background-color:#FFFFFF;
	border:1px solid black;
	min-height:100px;
	}

Thanks for any help

[Centauri]

The float will always appear below the container if #container comes first in the html - floats have to come before the items they are to be positioned beside.

[artcase]

The issue is a fairly common one. You need to put a mini "clear float" div at the bottom of your container div to set the "bottom" edge of the container box.

Here's the css for you.

body {
/*whatever background information you want here, but having white on white is boring. */
}

#container {
width:800px;
margin-left:auto;
margin-right:auto;
/* I'd add a top margin, just for aesthetics, this can be a 1-2 em height */
background-color:#FFFFFF;
height:auto;
}

#left-bar {
width:260px;
float:left;
background-color:#ccc;
/* I added the grey color so I could see the difference */
border:1px solid #000;
/* use hex color codes if you can */
min-height:100px;
}

#clearall {
clear:both
}

</style>

Then you order the divs like this
Container
left-bar
clearall
Container

This will fix your problem in Firefox, IE doesn't like minimum heights, you you may want to look at putting a spacer image inside the box that will create the same effect.

You need to change the left-bar style to read as follows:
#left-bar {
width:260px;
float:left;
background-color:#ccc;
border:1px solid #000;
min-height:100px;
height:auto;
height:100px;
}


Amy

[artcase]

You said:

The float will always appear below the container if #container comes first in the html - floats have to come before the items they are to be positioned beside.

Do you mean in the css order?

[Centauri]

No, the html:

<div id="left-bar"></div>
<div id="container"></div>

[artcase]

That seems weird to me, like they would be two separate boxes then not nested

[Centauri]

Was there any request that they be nested? I understood the op wanted a container with floats either side of it.

[artcase]

Yup.

My bad. With a name like Container, I expected it to be a nested layout.

[Alexpte]

Sorry if I wasn't clear on the question, but thanks artcase because I was talking about nested, so your code works great.

Thanks!

[artcase]

Can't take credit for the code, just good ol' book learnin'

(and a very dogged nature that makes me look stuff up I don't know...)

But thanks for the compliment. I'm glad I could help.

Amy