15 replies [Last post]
nishkak
Offline
Regular
Last seen: 16 years 4 weeks ago
Timezone: GMT+10
Joined: 2004-12-21
Posts: 14
Points: 0

All CSS is in the source code - www.bur.st/~daave/shoecannon/index.htm

I am trying to add a 20px margin to the right side of #sidebar. When I do this it works in IE but the float moves down below the bottom of #container in Firefox. I also wish to maintain a 20px separation between #container and #sidebar but with a 1px solid #cccccc border in the middle. I have tried putting a 10px margin on either side, but the margin collapses into one 10px margin. Also trying to add this border to either side produces the same effect as the margin problem with the float.

Any suggestions would be greatly appreciated =D Thanks!

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

Problem with floats in Firefox & borders in margins?

An element's width is made up of its width, padding, margin & border. If you're going to add a 20px right or left margin, you need to subtract that from your width. As you're using % for your width, you're just going to have to guess, or use % for your margin.

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

nishkak
Offline
Regular
Last seen: 16 years 4 weeks ago
Timezone: GMT+10
Joined: 2004-12-21
Posts: 14
Points: 0

Problem with floats in Firefox & borders in margins?

can a width be given in the form "65% + 11px"?

nishkak
Offline
Regular
Last seen: 16 years 4 weeks ago
Timezone: GMT+10
Joined: 2004-12-21
Posts: 14
Points: 0

Problem with floats in Firefox & borders in margins?

ok tried that - guess not

it's now changed to exact px values - but is there any way to stop the margins from collapsing?

edit: padding rather - not margins

nishkak
Offline
Regular
Last seen: 16 years 4 weeks ago
Timezone: GMT+10
Joined: 2004-12-21
Posts: 14
Points: 0

Problem with floats in Firefox & borders in margins?

problem solved - it would seem

thanks for the help

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

Problem with floats in Firefox & borders in margins?

If your margins are collapsing and you don't want them to, add padding or a border. I usually add 1px of padding.

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

nishkak
Offline
Regular
Last seen: 16 years 4 weeks ago
Timezone: GMT+10
Joined: 2004-12-21
Posts: 14
Points: 0

Problem with floats in Firefox & borders in margins?

Thats not a problem any more Smile but there is one more thing:

I was just reading an article called Faux Columns on A List Apart (http://www.alistapart.com/articles/fauxcolumns/), and have a variant on the problem. Rather than wanting the background colour of my column to extend the whole way down the page, I need the left-border to extend all the way down the page. I cant simply use a right-border on the left column because of the way the margins/floats are set up it would appear on the right of the sidebar.

Any idea's on this one?

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

Problem with floats in Firefox & borders in margins?

You can still use faux columns. Just create your background image to look blank spaces either side of a border.

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

nishkak
Offline
Regular
Last seen: 16 years 4 weeks ago
Timezone: GMT+10
Joined: 2004-12-21
Posts: 14
Points: 0

Problem with floats in Firefox & borders in margins?

i tried that.. the border still stops at the end of the sidebar content

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Problem with floats in Firefox & borders in margins?

Are you putting the image in the sidebar's parent? See my 2 col demo.

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.

nishkak
Offline
Regular
Last seen: 16 years 4 weeks ago
Timezone: GMT+10
Joined: 2004-12-21
Posts: 14
Points: 0

Problem with floats in Firefox & borders in margins?

kk5st your link is broken - but I put the background in the container and wrapper div's as per the alistapart aritcle - are you sure this works with borders?

the code (www.bur.st/~daave/shoecannon) is exactly as the article explains it

should the image being used be the width of the sidebar's width element? or that plus padding+margins+borders?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Problem with floats in Firefox & borders in margins?

You need overlapping borders on the two columns.

#blog {
    margin-right: 379px; 
    padding: 20px 10px 20px 20px;
    border-right: 1px solid #cccccc;
    }
The demo I ref'd above uses borders also. If you can't get in, I'd appreciated a tracert or traceroute output. As far as I know, there are no probs with the host at the moment.

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.

nishkak
Offline
Regular
Last seen: 16 years 4 weeks ago
Timezone: GMT+10
Joined: 2004-12-21
Posts: 14
Points: 0

Problem with floats in Firefox & borders in margins?

Microsoft Windows XP [Version 5.1.2600]
(C) Copyright 1985-2001 Microsoft Corp.

C:\Documents and Settings\David>tracert garyblue.port5.com
Unable to resolve target system name garyblue.port5.com.

The overlapping borders thing worked! Thanks heaps Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Problem with floats in Firefox & borders in margins?

Glad it worked for you.

I don't have a clue why you couldn't get dns resolution. I just ran it a few minutes ago and got the fastest 14 hop connection yet. Where are you located (generally is good enough)?

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.

nishkak
Offline
Regular
Last seen: 16 years 4 weeks ago
Timezone: GMT+10
Joined: 2004-12-21
Posts: 14
Points: 0

Problem with floats in Firefox & borders in margins?

is http://garyblue.port5.com/webdev/2col.html the right url?

i'm using Optus Cable internet in Sydney, Australia

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Problem with floats in Firefox & borders in margins?

Yep, it's good. I'm getting folks from the Brisbane area, but don't see any recent Sydney activity. I had thought my problems with the Pacific Rim area over. :sigh:

The only thing I can wonder is why your ISP's DNS can't resolve it.

Of course my own ISP, Verizon, wouldn't pass requests (it bounced around three machines at Verizon's location, and died) to the next ISP, Cogent, until I spent a very frustrating hour and a half with the "help desk". Yes, English was actually their native tongue. I finally got the second supervisor (at least the two said they were supervisors) to figure out he could write a network trouble ticket. I never heard back from them, but the trouble went away.

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.