Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeň, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts

    Positioning dilemma - uneven margins

    Ok, this is a knify one. I have an element, which has a percentage width but is limited by min and max widths as well. This means that there may be space to the sides of it, and I don't know how much in either relative or absolute values, because of the limits. Well, so far so goo, this is where the real problems comes in: I want whatever space is left outside it to be unevenly proportioned, 1/4 on the right side, 3/4 on the left side. After beating my head against the wall for about four hours trying to solve this, I figured you people would be able to help me, or tell me if it's a hunt for a lost cause.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeň, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Hmm, if nothing else, this seems to be a possible future solution: <http://lists.w3.org/Archives/Public/...4Jan/0218.html>
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Something like that can give you uneven space on the sides, but I'm not sure how to make it 1/4 and 3/4 without knowing the units you used for widths.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
    <head>
    <title>IE Behaviors</title>
    <script type="text/javascript">
    </script>
    <style type="text/css">
    p
      { border:    solid #000 #1px;
        background: #eef;
        padding:   1em;
        width:	20ex;
        max-width: 300px;
        min-width: 200px;
    
        position: relative;
        left: -15%;
        margin: auto;
      }
    
    </style>
    </head>
    <body>
    <p>Test paragraph</p>
    </body>
    </html>
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeň, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    I removed the parts of the description that I deemed unessential for you to know. I can give you a more detailed description if you like.

    - The inner box normally has a width of 70% of the document width.
    - However, it may never be smaller than 40 em and never larger than 52 em.
    - The width of the space left outside the box thus defaults to 30% of the document width, but may be either larger or smaller, depending on the user set font size and the document width.
    - Whether this space is 30% or not, it should be proportioned so that one fourth of it is to the right of the box, and three fourths of it is to the left of it. This proportion should be retained if the user changes the font size or window width.
    - The document should scroll horizontally if it's width is below 40em.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards


  •  

    Posting Permissions

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