CSS Forum

**colbyt** · 08-10-2007, 02:18 PM

Maybe this is normal and maybe I did something wrong. I am rewriting a site and decided it was time to really learn a little css.

I did a stylesheet and page for a fluid 3 column layout and plugged in a few placeholder words. The divs for the entire page looks like this:

header div
t-banner div
main-left, main, main-right divs
bottom-banner div
footer div

Everything showed up as it should. Then I added content to the main center. All is still good. I used <div align="center"> <div id="div-name"> to center the header and t-banner divs closing each with </div></div>. All is good.

I plugged in some content for the main div and then used the <div align="center"><div id="div-name"> on the bottom banner. When I did this the content in the bottom-banner div became mis-placed and appeared in the main right div.

Once I added content of equal height to the main-right div it appeared where it should be and centered. Is is normal?

link to page
link to stylesheet

Any other comments appreciated.

**JamieLewis** · 08-10-2007, 02:26 PM

Your problem lies in your markup. If you markup the content using XHTML instead of ugly html you have now it should be easier to do what you are trying to accomplish.

Ditch the align=center divs they are completely pointless since you are using CSS and any styling should be done there and not in the markup.

Take a look a these three sites on the subject of using CSS for design, hopefully they can help you.

http://www.subcide.com/tutorials/csslayout/
http://www.alistapart.com/articles/practicalcss/
http://www.glish.com/css/

Jamie

**Learning Newbie** · 08-10-2007, 03:43 PM

<div align="center">

Nooooooooo!!!!!

In CSS, just set div to float center.

**mgraphic** · 08-10-2007, 03:53 PM

Quote:

Originally Posted by Learning Newbie

In CSS, just set div to float center.

Is float: center valid css?? I've never seen it used before.

**LadynRed** · 08-10-2007, 03:55 PM

Quote:

In CSS, just set div to float center

Umm.. noo.. there is no such thing as 'float: center'.

Using <div align="center"> is the wrong approach, regardless of whether you use XHTML or HTML 4.01 Strict.

The proper method for centering entails 3 things:
1 - give your div to be centered a width
2- In your CSS, set that div to margin: 0 auto;
That will center the div in all browsers except IE 6 and below. For that you must add text-align: center to the <body> or on the container that will hold the div you want centered.

By the way, there is nothing whatsoever wrong with using straight HTML, but do use at least HTML 4.01 Strict.

**ADAM Web Design** · 08-10-2007, 04:29 PM

Actually...it will center the div in IE6. It's IE5.5 and below that the text-align: center; hack is necessary.

Other than that, what LNR said.

**colbyt** · 08-10-2007, 04:42 PM

Quote:

Umm.. noo.. there is no such thing as 'float: center'.

I already learned that by trying.

Quote:

Using <div align="center"> is the wrong approach, regardless of whether you use XHTML or HTML 4.01 Strict.

I really appreciate that comment. I copied that from somewhere. Will try your advive.

But everyone missed the real question about why the bottom banner part appeared in the wrong place when there was no content. Or maybe correcting the method will improve the result?

Quote:

I plugged in some content for the main div and then used the <div align="center"><div id="div-name"> on the bottom banner. When I did this the content in the bottom-banner div became mis-placed and appeared in the main right div.

Once I added content of equal height to the main-right div it appeared where it should be and centered. Is is normal?

Thanks to all who took the time to reply.

**ADAM Web Design** · 08-10-2007, 05:02 PM

It is when you don't clear your floats...in this case, your left floats. So what you need to do is use a clearing div (some people use a break, but I find that clearing with a break is erratic) to clear the left float.

Sorry...I didn't really realize that was the question.

**colbyt** · 08-10-2007, 06:15 PM

Quote:

It is when you don't clear your floats...in this case, your left floats. So what you need to do is use a clearing div (some people use a break, but I find that clearing with a break is erratic) to clear the left float.

I Googled and read this page. Sorry, I failed to understand it.

http://www.positioniseverything.net/easyclearing.html

**LadynRed** · 10:09 PM

That method is a bit complicated to understand. Try this one:

http://css-discuss.incutio.com/?page=ClearingSpace

I use a <br> for clearing and I've found it to be completely reliable, nothing erratic about it:

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
Then in the HTML its <br class="brclear" />

What can be tricky to grasp is exactly WHERE to place the clearing element. There are resources in the WIKI that can help you understand that.

**colbyt** · 08-11-2007, 12:29 PM

Quote:

I use a <br> for clearing and I've found it to be completely reliable, nothing erratic about it:

THANKS! I found that darned easy to use and it worked kike a charm. The site you linked to alsos explains stuff in nice simple terms that even I can grasp.

I am still stuggling with

Quote:

Using <div align="center"> is the wrong approach,

this one. One thing at a time.

**LadynRed** · 08-12-2007, 06:27 PM

You use CSS to align things, centered or otherwise, you don't use the deprecated align=center" - it's presentational, presentation is done with CSS, NOT in the html.