Re: [WSG] All is not well...

[Gunlaug Sørtun]

Adam Morris wrote:

Done it. Georg? margin-right:-6px; did not work on the right side of
 the container but 'margin-LEFT: -6px' did!


My fault - sorry. Yes, it should be a negative margin-left on the right
container :-)

Why do negative margins shift things around in a better way than 
positive ones?


In your case: the negative margin is pulling in the backside edge of the
floating container - the container becomes so many pixels narrower when
the browser is calculating its space in relation to other elements.
The actual, and visual, width stays the same though, so the containers
starts to cover each other visually. That's one way to make the gap
disappear.

Note that this is a solution that'll only work well on floats. Floats
can be positioned and manipulated by frontside and backside margins in
many ways.
Create some tests so you know how to control them. It may come handy.

Example:


More extreme examples - with IE/win fixes:



...links to more float-info in the side-column(s).

regards
Georg
--
http://www.gunlaug.no
**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [WSG] All is not well...

[Christian Montoya]

> Done it. Georg? margin-right:-6px; did not work on the right side of
> the container but 'margin-LEFT: -6px' did! Why do negative margins
> shift things around in a better way than positive ones?

Because negative margins "pull," while positive margins "push." And
everyone knows it's easier to pull than to push :)

--
--
C Montoya
rdpdesign.com ... cssliquid.com ... montoya.rdpdesign.com
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

Re: [WSG] All is not well...

[Adam Morris]

Done it. Georg? margin-right:-6px; did not work on the right side of
the container but 'margin-LEFT: -6px' did! Why do negative margins
shift things around in a better way than positive ones?
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

Re: [WSG] All is not well...

[Adam Morris]

Georg! That's brilliant! I have absolutely no idea how it works but it
does! I added the #content margin of -114px and no more popping down
underneath the logo! Also, moving the contenttopleft top and bottom
divs -3 px worked first time. But... the right side is proving more
stubborn. Still won't close the gap in IE...
How does giving the content div a negative margin from the right keep
it in position on the left? Fascinating...
also, why 114? what's the logic behind it? Thanks, Georg

Adam
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

Re: [WSG] All is not well...

[Gunlaug Sørtun]

Adam Morris wrote:

http://www.janelehrer.co.uk/live5/

In IE, when the window is shrunk, the content block drops underneath 
the logo image (ugly). Why does that happen when, in FF, it stays in 
position and compresses nicely?


IE don't know how to overflow a container, and the logo-image at the
bottom is too wide. Make it appear narrower and tell IE to present the
overflow.

#logo img {margin: 0 -145px; position: relative;}
#content {margin-right: -114px; position: relative;}
...will work quite well to below 500px window-width.


Also, in IE, there are gaps between the border images. Again, in FF,
 a nice smooth line.


Natural behavior in IE - created by MS to save web designers from their
own decisions, if I remember correctly...
You just have to counteract it.

#contenttopleft,#contentbottomleft {margin-right: -3px;}
#contenttopright,#contentbottomright {margin-right: -6px;}

Georg
--
http://www.gunlaug.no
**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

[WSG] All is not well...

[Adam Morris]

http://www.janelehrer.co.uk/live5/

In IE, when the window is shrunk, the content block drops underneath
the logo image (ugly). Why does that happen when, in FF, it stays in
position and compresses nicely?

Also, in IE, there are gaps between the border images. Again, in FF, a
nice smooth line.

Any help would be greatly appreciated.

Adam
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**