5 Replies - 974 Views - Last Post: 27 January 2012 - 05:45 AM

#1 scottas   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 10-November 11

div align problem ( and some others )

Posted 25 January 2012 - 03:59 AM

I am trying to put a div container on the right side, but it stays on left. Here is code:
div#loginmenu
{
	width:		80px;
	background-color:	#ededed;
	float:		right;
	position:	fixed;
	margin-right:	14px;
	display:	hidden;
}


By the way, this block should be hidden, but its not.
Here is how it looks: http://www.skotlandas.comze.com/

Is This A Good Question/Topic? 0
  • +

Replies To: div align problem ( and some others )

#2 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: div align problem ( and some others )

Posted 25 January 2012 - 04:42 AM

You can't use position: fixed and float: left together. The position will override the float and, without any directions as to where it should be fixed to, it won't stay to the left.

You need to either remove the position style, or remove the float and use left, top, right, and/or bottom to position the element where you want it. Keep in mind that position: fixed fixes the element relative to the browser window, not the page itself, so it will stay visible in the same spot even as you scroll. If you don't want that, then use position: absolute instead.
Was This Post Helpful? 1
  • +
  • -

#3 scottas   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 10-November 11

Re: div align problem ( and some others )

Posted 26 January 2012 - 02:39 PM

alwright, thanks. But why it's not hidden?
Was This Post Helpful? 0
  • +
  • -

#4 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: div align problem ( and some others )

Posted 26 January 2012 - 02:47 PM

Because hidden is not a valid value for the display style. It belongs to the visibility style.

You can either do:

  • visibility: hidden;, in which case the element will still exist and interact with the page as if it were visible, but would be made transparent so it can't be seen.

  • display: none;, in which case the element will be effectively removed from the page; not made transparent but non-existent.

Was This Post Helpful? 0
  • +
  • -

#5 scottas   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 10-November 11

Re: div align problem ( and some others )

Posted 26 January 2012 - 03:13 PM

thank you.
Was This Post Helpful? 0
  • +
  • -

#6 scottas   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 10-November 11

Re: div align problem ( and some others )

Posted 27 January 2012 - 05:45 AM

everything seems to work in chrome, firefox an internet explorer, except in opera. loginmenu block stays over the toolbar. Even if I set its 'margin-top' to any value ( 20px, 200px ) it stays on the same place.
div#loginmenu
{
	margin-top: 28px;
	padding:	0px;
	width:		180px;
	background-color:	#ededed;
	right:  14px;
	position:	fixed;
	visibility:	hidden;
}


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1