CSS Floating

[jamesnotjamie]

Hi Everyone,

I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on...

I think it's a question of Floating.

This is in reference to: http://www.arabellamusic.co.uk

I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking:

Code:


HTML

<div class='inner'>
<div class='left'>
BLOG PHP HERE
</div>

<div class='right'>
SOME OTHER STUFF HERE
</div>
</div>

And the CSS:

.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }



If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...)

So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't.

I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff!

Thanks in advance...
James

[bluewalrus]

um... i see
#left {
width:390px;
}
#right {
width:390px;
}

which brings about the problems of you didn't use floats here and these aren't id's they are classes or vise versa either way one is referenced wrong you choose . is for class # is for id. i dont see the code you referenced anywhere but maybe as you've said you made changes?

[C55inator]

That stuff works fine. I tested it by itself, so something else must be interfering.
try
.inner { width:788px; }
.left { position:absolute;left:0px; width:50%; }
.right { position:absolute;right:0px; width:50%; }

Remember, floats can get shoved out of the way by other things. Use positioning if you are trying to make it exact.