Neverside

Bit O' CSS help

Code:

.newsDivLeft
{
width: 55%;
height: 20px;
background-color: #B3BCB9;
float: left;
vertical-align: middle;
}
.newsDivRight
{
width: 45%;
height: 20px;
background-color: #B2BBBD;
float: right;
vertical-align: middle;
text-align: right;
}

the vertical-align: middle; doesn't seem to register in either of these classes. What gives? Text always is displayed as if vertical-align: top; is set.

few other questions:

what's the equivalent to float: middle; ? Apparently there is no float: middle;, and if I do <div align="center"> it's not valid W3C.

also, padding:

if I had 2% padding on each side of a 100% width object, would the object become 104% width? (2% on each side)
or would it still be 100% wide, with actual content containing only 96% of the div? (again, 2% on each side)

is it the same case for margins?

___________________

I've got a girlfriend! WOOT.

Last edited by Jeff, October 22nd, 2003 02:14 AM (Edited 1 times)

Horizontal and Vertical centering: http://www.wpdfd.com/editorial/thebox/deadcentre3.html

Equivalent to float: middle; would be something like...

Code:

#somediv {
margin: 0 auto;
text-align: center; /* for those that dont understand the above */
}

Total width = width + padding + border.

Margins are always transparent.

Hope that helped. You can find more info on the box model here.

// freak

___________________

Tables for layout is an abuse. -- Internet Explorer is unsafe.

Ahh, thank you freak. Another question.

when should I use div's, when should i use p's, and when should i use spans?
also, what can and can't you use inside of each other? for example, I'm aware that you can't use div's within p's. are there any others?

Again, if all of this is in a sticky or something somewhere, promptly reprimand me for not reading stickies and point me to the page which has the answers.

___________________

I've got a girlfriend! WOOT.

Last edited by Jeff, October 22nd, 2003 03:06 AM (Edited 1 times)

Div's cause a line break, and span's don't. That's their difference. You CAN use span's inside <p> tags, so that's something to keep in mind.

For a good article on div's and their properties (absolute, relative, static, fixed) I'd suggest browsing through the CSS articles on www.alistapart.com

Hope that helps.

___________________

http://www.googlesblog.com/

div's cause a line break because the are block level. spans are inline, so they wont, unless you force them to.

You can set block level elements not to line break, if they have a small enough width and are set to display: inline;

___________________

Matt M
Webmaster, Web Developer and Relaxation expert
- Free web development tutorials, scripts and more..
- Top 10 webmaster articles
- Nowt here, but I own the domain for something in the future.....

"Life's gotta be fun, if its not its crap." - Pritchard, Dirty Sanchez

Re: Bit O' CSS help

Quote:

Originally posted by JeffSquared

Code:

.newsDivLeft
{
width: 55%;
height: 20px;
background-color: #B3BCB9;
float: left;
vertical-align: middle;
}
.newsDivRight
{
width: 45%;
height: 20px;
background-color: #B2BBBD;
float: right;
vertical-align: middle;
text-align: right;
}

the vertical-align: middle; doesn't seem to register in either of these classes. What gives? Text always is displayed as if vertical-align: top; is set.

few other questions:

what's the equivalent to float: middle; ? Apparently there is no float: middle;, and if I do <div align="center"> it's not valid W3C.

also, padding:

if I had 2% padding on each side of a 100% width object, would the object become 104% width? (2% on each side)
or would it still be 100% wide, with actual content containing only 96% of the div? (again, 2% on each side)

is it the same case for margins?

As far as I am aware, vertical align is an attribute for the td tag only. It won't work in anything else.

___________________

Matt M
Webmaster, Web Developer and Relaxation expert
- Free web development tutorials, scripts and more..
- Top 10 webmaster articles
- Nowt here, but I own the domain for something in the future.....

"Life's gotta be fun, if its not its crap." - Pritchard, Dirty Sanchez

Great. Thanks for your input, all.

___________________

I've got a girlfriend! WOOT.

Quote:

Originally posted by JeffSquared
when should I use div's, when should i use p's, and when should i use spans?
also, what can and can't you use inside of each other? for example, I'm aware that you can't use div's within p's. are there any others?

Div's and Span's are both just vanilla container tags. The only difference between the two is that Div is block level (causing a line break, as said above) and Span is inline (also said above).

P's are for paragraphs and should rightfully be used as such. If you have say a news posts and it spans several paragraphs you shouldn't be using multiple Div's to separate them. Just put each block of text into a p and you're set.

// freak

___________________

Tables for layout is an abuse. -- Internet Explorer is unsafe.