/    Sign up×
Community /Pin to ProfileBookmark

Basic CSS question

Copy linkTweet thisAlerts:
Jun 13.2007

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:

[CODE]
#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;
}

[/CODE]

Thanks for any help

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriJun 13.2007 — The float will always appear below the container if #container comes first in the html - floats have to come [B]before[/B] the items they are to be positioned beside.
Copy linkTweet thisAlerts:
@artcaseJun 13.2007 — 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
Copy linkTweet thisAlerts:
@artcaseJun 13.2007 — 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?
Copy linkTweet thisAlerts:
@CentauriJun 13.2007 — No, the html:
[CODE]<div id="left-bar"></div>
<div id="container"></div>[/CODE]
Copy linkTweet thisAlerts:
@artcaseJun 13.2007 — That seems weird to me, like they would be two separate boxes then not nested
Copy linkTweet thisAlerts:
@CentauriJun 14.2007 — Was there any request that they be nested? I understood the op wanted a container with floats either side of it.
Copy linkTweet thisAlerts:
@artcaseJun 14.2007 — Yup.

My bad. With a name like Container, I expected it to be a nested layout.
Copy linkTweet thisAlerts:
@AlexpteauthorJun 14.2007 — Sorry if I wasn't clear on the question, but thanks artcase because I was talking about nested, so your code works great.

Thanks!
Copy linkTweet thisAlerts:
@artcaseJun 14.2007 — 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
×

Success!

Help @Alexpte spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...