SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2001
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div negative width hack ?

    I was messing around with my layout, trying to fix some divs that were in a big table. I know that tables are not supposed to be used for layout, but somehow I still like to use them for big layouts as I mostly have various combinations of 2 or 3 columns under eachtother, and colspan/rowspan is so easy to use for that in a table. But the divs inside the cells were always too big and were coming over the internal border of the table. Those divs had a different background colour, so this was very clearly visible. In IE I could make it look good somehow, but in Firefox it was always overlapping. But in opera it did look good again, much like in IE. I was reading up on possible mistakes with this, came across topics of the broken box model, but since most of the overlapping was only in Firefox I thought it could not be this, but more likely bad usage of padding or margin or borders somewhere.

    So I tried a lot of combinations with padding and margins, and when I set 'width:95%' for those divs then somehow it looked acceptable in all browsers. But the space next to wide cells was much bigger then those that were next to small cells, and even between the different browsers their were a lot of visible differences when it came to the actual width of the spaces between the divs. And no space between the divs looked like I wanted it to have, it was hard to control it to the pixel.

    I dropped all those padding and margin attempts, so that I was back to the 'normal' overlapping I started with. I saw those divs that were too big for the place they were supposed to have in the table, so just as joke I thought : hey lets remove some of its width, that will punish them for being too big all the time.... so I added ' width:-30; ' to the css of the div.. I uploaded it .... and suddenly everything looks perfectly right, in every browser I had.

    A small negative number in width for a div prevents it from moving outside the table it is in, and makes sure every setting of padding or margin can be used like you want it

    Did I ran into an unknown css hack ? Or is this common knowledge ? Atleast its new to me and I thought it might be interesting to share this experience. I did not found anything related to this when searching info about it.


    Setting a negative width of a few pixels does sound very wrong though. I'm probably correcting an earlier mistake by adding a new one. And maybe there are more factors involved then just this negative width to make it work like this. The actual number that is used does not seem to matter much, as long as its more then the amount of pixels that the div was overlapping. But still, it now looks exactly like I want it in every browser I used, so what can be wrong about it ?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    According to the CSS 2.1 specifications, negative values for width are illegal, so you may be on thin ice with this.
    Birnam wood is come to Dunsinane

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Can you show us an example of this in action as i have my doubts that a negative width will have any effect at all.

    Code:
    #outer{
     width:800px;
     padding:100px;
     background:red;
     position:absolute;
     width:-100px;
    }
    Both ie and firefox ignore the negative width completely and apply the previous 800px width.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •