16 replies [Last post]
scorche
scorche's picture
Offline
Regular
Last seen: 13 years 45 weeks ago
Timezone: GMT-7
Joined: 2005-11-03
Posts: 17
Points: 0

howdy, howdy
I'm trying to create a fixed-width column that is centered, and top to bottom.
I've been doing it with tables, but I'd rather use the 'div' tag.
I'm trying to create the basic layout of mezzoble.

any ideas?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Centred is no problem: just

Centred is no problem: just add margin: 0 auto to your container with a width. What do you mean by top to bottom? 100% height?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

scorche
scorche's picture
Offline
Regular
Last seen: 13 years 45 weeks ago
Timezone: GMT-7
Joined: 2005-11-03
Posts: 17
Points: 0

well I came up with the css

well I came up with the css to get the centre and fixed width

html,body{
	margin:0;padding:0;
	height: 1090px;
}

body{
	text-align:center;
	background-image: url(pics/bg.png);
	background-attachment:fixed;
	color:#FFF;
	height: 120%;
}

#container{
	width:609px;
	height: 100%;
	margin-right:auto;
	margin-left:auto;
	margin:0 auto;
	background-color: #CCCC99;
}

the problem taht I have now is having it work on all browsers (Opera, FireFox & IE)
the height: 1090px; is kind of an odd height, and I did not put in 100% because in opera and fireFox 100% means 100% of window not of content

is there a way to get around this that would work for all browsers?

another problem I'm running into is with a:hover

#links a{
	padding-left: 20px;
	padding-right: 100%;
	text-align: left;
	color: #FFF;
	text-decoration: none;
}
#links a:hover{
	text-align: left;
	background-color:#6699CC;
	color: #336699;
	text-decoration: none;
}

in particular with ... padding-right: 100%;
this works exactly like I want it to in Opera and FireFox, but it completely butchers the whole page in IE.

again... any ideas ?
Thanks, Daniel

scorche
scorche's picture
Offline
Regular
Last seen: 13 years 45 weeks ago
Timezone: GMT-7
Joined: 2005-11-03
Posts: 17
Points: 0

also ... should I have

also ...
should I have different sheets for the different browsers ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 18 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

scorche wrote:also ...

scorche wrote:
also ...
should I have different sheets for the different browsers ?

Absolutely not.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

scorche
scorche's picture
Offline
Regular
Last seen: 13 years 45 weeks ago
Timezone: GMT-7
Joined: 2005-11-03
Posts: 17
Points: 0

kk5st wrote:scorche

kk5st wrote:
scorche wrote:
also ...
should I have different sheets for the different browsers ?

Absolutely not.

cheers,

gary

instead ... ?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

scorche

scorche wrote:

#container{
	margin-right:auto;
	margin-left:auto;
	margin:0 auto;
}


Just to point out that margin: 0 auto is just about the same as margin-right:auto; margin-left:auto; - you don't need to have both.
As for your problems, it's hard to tell without seeing the page in question. If you're after 100% height methods, do a search on '%100 height'.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

scorche
scorche's picture
Offline
Regular
Last seen: 13 years 45 weeks ago
Timezone: GMT-7
Joined: 2005-11-03
Posts: 17
Points: 0

hmmm

I thought I posted this already, but I guess it didn't go through
anyhow here's the site I'm talking about.
you can see that i've got a different css for IE

and in opera and FireFox, the Background gets cut short.

scorche
scorche's picture
Offline
Regular
Last seen: 13 years 45 weeks ago
Timezone: GMT-7
Joined: 2005-11-03
Posts: 17
Points: 0

I just thought of a way to

I just thought of a way to go around it...
have the div background and the border be a part of the ACTUAL background, then it will tile as long as it needs to.

... still choked though that this doesn't work as I want it to. Plus the background picture would be too big

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 5 days ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

For Firefox, enclose the

For Firefox, enclose the floats by adding overflow:hidden; in #inset and set #content to 450px

scorche
scorche's picture
Offline
Regular
Last seen: 13 years 45 weeks ago
Timezone: GMT-7
Joined: 2005-11-03
Posts: 17
Points: 0

DanA wrote:For Firefox,

DanA wrote:
For Firefox, enclose the floats by adding overflow:hidden; in #inset and set #content to 450px

I thought overflow removes the scroll bar

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Overflow:hidden forces FF to

Overflow:hidden forces FF to enclose floated elements (which it doesn't do by default according to the specs).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

scorche
scorche's picture
Offline
Regular
Last seen: 13 years 45 weeks ago
Timezone: GMT-7
Joined: 2005-11-03
Posts: 17
Points: 0

Tyssen wrote:Overflow:hidden

Tyssen wrote:
Overflow:hidden forces FF to enclose floated elements (which it doesn't do by default according to the specs).

when I used overflow:hidden;, it did something even worse... It cuts the text off
though in Firefox I can scroll it.

scorche
scorche's picture
Offline
Regular
Last seen: 13 years 45 weeks ago
Timezone: GMT-7
Joined: 2005-11-03
Posts: 17
Points: 0

should I just change the

should I just change the content so it is not a float ? would that fix that ?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Try this intead (only tested

Try this intead (only tested in FF):

html,body{
	margin: 0;
	padding: 0;
	height: 100%;
	white-space: normal;
}

body{
	text-align:center;
	background-image: url(pics/bg.png);
	background-attachment:fixed;
	color:#FFF;
	height: 100%;
}

#container{
	width:609px;
overflow: hidden;
	margin: 0 auto;
	background-color: #CCCC99;
}
#inset{
	width:603px;
	margin:0 auto;
	background: #333740;
overflow: hidden;
}
#header{
	height:291px;
	line-height:80px;
	padding-left:0px;
	background-image:url(pics/header.jpg);
}
#block p{
	line-height:1.4;
}

#linksContainer {
	float:left;
	width:133px;
	min-height:477px;
	background: url(pics/llinks_bg.jpg) no-repeat;
}

#links{
	width:133px;
	font: 90% arial,sans-serif;
	text-align: left;
	color: #FFFFCC;
}

#linksTitle{
	padding-left: 20px;
	margin-top: 3px;
	font-size: 14px;
	font-weight: bold;
}

#links a{
	padding-left: 20px;	
	text-align: left;
	color: #FFF;
	text-decoration: none;
}
#links a:hover{
	padding-right: 100%;
	text-align: left;
	background-color:#6699CC;
	color: #336699;
	text-decoration: none;
}

#content{
	float:right;
	width: 470px;
	background: #2D3039 url(pics/content_bg.jpg) no-repeat;
}
#contentText{
	font: 80% Century Gothic,arial,sans-serif;
	cursor:text;
	padding: 20px 7px 0 10px;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

scorche
scorche's picture
Offline
Regular
Last seen: 13 years 45 weeks ago
Timezone: GMT-7
Joined: 2005-11-03
Posts: 17
Points: 0

that does EXACTLY what I

that does EXACTLY what I want it to do
it falls apart in IE... but that's something I've dealt with already

I will have to look through this to see how you did this
thanks again

scorche
scorche's picture
Offline
Regular
Last seen: 13 years 45 weeks ago
Timezone: GMT-7
Joined: 2005-11-03
Posts: 17
Points: 0

ok - I see you removed the

ok - I see
you removed the the heights and added the overflow
I didn't remove the heights, so that's why it didn't wok for me.