damn css

[UniqueHabbo]

heya, trying to make a title bar thing but...

KEY:
[ = left corner
= = barbg
] = right corner
. = nothing just need it to push the bar

I want it to be like
[=============================]
but it goes like this
[======================
........................................]

The image widths and location etc are all correct.

css:

#title
{
  width: 100%;
  height: 22px;
  background-position: top;
  background-image: url("../images/titlebg.gif");
  padding: 4px 0 0 6px;
  font-family: Tahoma;
  color: #FFFFFF;
  font-weight: bold;
  
}

#title-left
{
  float: left;
  width: 5px;
  height: 26px;
  background-image: url("../images/titleleft.gif");
}

#title-right
{
  float: right;
  width: 5px;
  height: 26px;
  background-image: url("../images/titleright.gif");
}

Thread moved by Meti (Forum Moderator) from "Designing and Development": Please post in the correct forum next time, thanks .

[Meti]

The title right is wrong.
Change "float: right;" to "float: left;"

And NEVER use positions. Use floats

[Jxhn]

The title right is wrong.
Change "float: right;" to "float: left;"

And NEVER use positions. Use floats

It's a background position. There's nothing wrong with that.

[Meti]

Oh soz, didn't see Just saw "position" and I was like WOT?! lol

[Iszak]

html
{
  border: none;
  overflow: auto;
}

body
{
  margin: 0;
  padding: 0;
}

#title
{
  color: #fff;
  height: 22px;
  margin: 0 5px;
  font-weight: bold;
  font-family: Tahoma;
  padding: 4px 0 0 6px;
  background-position: top;
  background-image: url("../images/titlebg.gif");
  
}

#title-left
{
  width: 5px;
  float: left;
  height: 26px;
  background-image: url("../images/titleleft.gif");
}

#title-right
{
  width: 5px;
  float: right;
  height: 26px;
  background-image: url("../images/titleright.gif");
}

If you haven't already done so remove the padding/margin around the body. The other CSS on the HTML is, border to remove the border in IE6, and overflow: auto; to remove the scroll bar until needed in IE in general.

The HTML is slightly different than you probably would think, it is as follows.

<div id="title-left"></div>
<div id="title-right"></div>
<div id="title"></div>

And that should give you the result you were looking for, as the div takes up as much width as it can - and since it's not floated, that's 100%, so we just impose margins to push it left and right from the title-left and title-right.

Live Preview: http://pastebin.me/49400f1be4035

Enjoy.