«

Hello Newsgroup

I'm trying to have a div which fills the whole width of the browser window.
I want to have a link in that div (like "sitemap"). That word should start
330px from the left side.

The following code worked, but I get a horizontal scrollbar. The div is
too wide...

div.bla
{
position : absolute;
left : 0px;
top : 72px;
height : 18px;
width : 100%;
padding-left : 330px;
}

Can anyone help me get rid of that scrollbar?
(Tested with Mozilla 1.3, IE6)

Thanks
chlori

On Sat, 05 Jul 2003 16:00:17 +0200, chlori wrote:

> div.bla
> {
> position : absolute;
> left : 0px;
> top : 72px;
> height : 18px;
> width : 100%;
> padding-left : 330px;
> }
>
> Can anyone help me get rid of that scrollbar?

Try:

div.bla
{
position : absolute;
left : 0px;
top : 72px;
height : 18px;
width : auto;
margin-left : 330px;
}

Note: it is better to specify sizes in em than px.

--
Toby A Inkster BSc (Hons) ARCS | private.php?do=newpm&u= | pgp:0x6A2A7D39
aim:inka80 | icq:6622880 | yahoo:tobyink | jabber:
http://www.goddamn.co.uk/tobyink/ | "You've got spam!"
playing://ben_folds/rockin_the_suburbs/07_losing_lisa.ogg

In article <be6lls$1o68r$>,
says...
> Hello Newsgroup
>
> I'm trying to have a div which fills the whole width of the browser window.

That's the default behaviour.

> I want to have a link in that div (like "sitemap"). That word should start
> 330px from the left side.
>
> The following code worked, but I get a horizontal scrollbar. The div is
> too wide...
>
> div.bla
> {
> position : absolute;
> left : 0px;
> top : 72px;
> height : 18px;
> width : 100%;
> padding-left : 330px;
> }
>
Well, width = padding + margins + borders + content so...

Does it have to be absolutely positioned? If it's taking up 100% of the
width & it's at the top, why not just put it first in the html & use:

body {padding: 0; margin: 0;}
div#bla {margin-top: 72px; padding-left: 330px; height: 18px;}

I take it your trying to fit the div to a picture & hence the need for
px?

"Jacqui or (maybe) Pete" <> schrieb im Newsbeitrag
news:...

> Does it have to be absolutely positioned?

I don't know, does it?
What's the exact difference between absolute, relavtive, ..??
I just used the absolute because it sounded good

> If it's taking up 100% of the
> width & it's at the top, why not just put it first in the html & use:

It's not at the top. It's 72px from the top.

> body {padding: 0; margin: 0;}
> div#bla {margin-top: 72px; padding-left: 330px; height: 18px;}

I want this div to be like a horizontal bar across the whole window.
I took this away, because i thought it wasn't important for my
question:
background-color : #ffff66;
color : #000000;

> I take it your trying to fit the div to a picture & hence the need for
> px?

Yes, the right edge of my picture is 320px from the left.
The div we're talking about is just on top of that picture and i don't
want the text to be over the edge of the pic.

Thanks
chlori

On Sat, 05 Jul 2003 16:00:42 +0100, Jacqui or Pete wrote:

> Absolute: Goes where you put it. Other things ignore its presence.
>
> Relative: Leave a hole where it would have been & shift the contents as
> specified. Other non-absolutely positioned things move out of the way of
> the hole.
>
> Static: the normal default.

And don't forget...

Fixed: same as absolute, but when the window scrolls, don't move the
object. (Not supported in IE/Win)

--
Toby A Inkster BSc (Hons) ARCS | private.php?do=newpm&u= | pgp:0x6A2A7D39
aim:inka80 | icq:6622880 | yahoo:tobyink | jabber:
http://www.goddamn.co.uk/tobyink/ | "You've got spam!"
playing://(nothing)

"Jacqui or (maybe) Pete" <> schrieb im Newsbeitrag
news:...

> Absolute: Goes where you put it. Other things ignore its presence.
>
> Relative: Leave a hole where it would have been & shift the contents as
> specified. Other non-absolutely positioned things move out of the way of
> the hole.
>
> Static: the normal default.

Thank you for the information. I didn't know about that.

> > > body {padding: 0; margin: 0;}
> > > div#bla {margin-top: 72px; padding-left: 330px; height: 18px;}
> >
> > I want this div to be like a horizontal bar across the whole window.
>
> That's what the css I gave does. Try it out.

I did and it works exactly how I want it to! Thanks...

chlori

In article <be967d$2hqv4$>,
says...
> "Jacqui or (maybe) Pete" <> schrieb im Newsbeitrag
> news:...
>
....
> > > > body {padding: 0; margin: 0;}
> > > > div#bla {margin-top: 72px; padding-left: 330px; height: 18px;}
> > >
> > > I want this div to be like a horizontal bar across the whole window.
> >
> > That's what the css I gave does. Try it out.
>
> I did and it works exactly how I want it to! Thanks...
>
You're welcome.

If you've got an absolutely positioned image to the left of the text
(I'm guessing here) then it may be easier to just stick the image in the
div. That'll set the height of the div, and the text will automatically
be to its right:

<div id="bar"><img src="fred.gif" alt="xxx"> Some text</div>

If you want a bigger gap between the pic and the text you could use eg:

#bar img {
margin-right: 3em;
}