CSS Problem

Discussion in 'Web Design and Development' started by JavaWizKid, Jan 21, 2009.

  1. JavaWizKid macrumors 6502a

    Joined:
    Sep 18, 2008
    #1
    I'm having trouble with some css on my webpage. I'm trying to get a square to appear 10 pixels from the top and 10 pixels from the bottom, when the browser is resized the box resizes with it, staying at 10 pixels from the top and bottom.

    Code:
    #main
    {
    	margin-left: 190px;
    	margin-right: 10px;
    	margin-top: 10px;
    	border: 2px solid blue;
    	position: relative;
    	height: 500px;
    	background-color: white;
    }
    if I add margin-bottom: 10px; it doesn't do what I'm trying to explain.

    How can I achieve this?
     
  2. kgarner macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #2
    I don't think that is possible with CSS. You can achieve this with some JavaScript to get the browser window dimensions and then altering the height attribute.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Try
    Code:
    position: absolute;
    top: 10px;
    bottom: 10px;
     
  4. JavaWizKid thread starter macrumors 6502a

    Joined:
    Sep 18, 2008
    #4
    Any way to do it with
    Code:
    position: relative;
     
  5. XnavxeMiyyep macrumors 65816

    XnavxeMiyyep

    Joined:
    Mar 27, 2003
    Location:
    Washington
    #5
    It is possible to do with CSS. You will need far more divs than that. I'll see what I can come up with and get back to you.

    I do something similar with on http://www.foodmoocher.com/404.php (although I have it go down slightly below to make sure the scrollbar is always there), but my CSS file is probably far too annoying to read as is.
     
  6. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    This is tested/works in FF3 and MSIE7, including your window resize test:

    Code:
    <style>
    
    body,div#container { 
        border: 0; 
        margin: 0; 
        height: 100%
    }
    
    div#box {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background-color: green;
        border: 1px solid black;
    
    }
    
    </style>
    
     <div id="container">
         <div id="box">Test</div>
    </div>
    The CSS posted by others likely won't create the liquid layout you want, i.e. the box resizes automatically when the user changes their window size, plus it works in MSIE too.

    The first thing I did was apply full window size to the body. Then inside that I added a div as a container which I find helps maintain the height in children div's in all browsers including MSIE. Then inside that I placed the child div, the box, set with absolute positioning.

    The next commands, top/left/bottom/right, each determine how many pixels offset from the margin the box will display. In my example I used 10 pixels each so you can easily see the green box and border with whitespace around it to prove its working. Simply adjust those values as you see fit.

    To display the box EXACTLY the way you phrased it in your question (you didn't mention margin space on the left and right) use:

    left: 0;
    right: 0;
    top: 10px;
    bottom: 10px;

    Instead of my values.

    -jim
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    The way you're describing this box is that it is absolutely 10px from top and bottom, not relative to some other elements. Any reason you need it to be relative?
     
  8. JavaWizKid thread starter macrumors 6502a

    Joined:
    Sep 18, 2008
    #8
    What's the difference between:
    Code:
    margin-top: 10px;
    and
    Code:
    top: 10px;
     
  9. kgarner macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #9
    margin-top adds 10px to the margin property of the box. top tells the browser to put it 10px from the top. so if you had a box that was top:10px and margin-top: 10px it was appear to be positioned 20px formt he top.
     
  10. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #10
    @JavaWizKid

    In CSS margin-top sets the top margin space of an element. Top specifies the top edge, which really means the offset from the top when positioned absolutely (ignoring any real margins that may exist). That's why top/left/bottom/right exist - sometimes developers need to position elements based on the edge (absolute, outside the flow), not the elements near them (relative, within the flow). Absolute positioning is often used due to limitations in CSS rendering heights properly in some browsers or dealing with dynamic heights as is true in this example, as you are really making a liquid layout where the box adjusts as the user adjust the browser window dimensions. Try my code please.

    -jim
     
  11. JavaWizKid thread starter macrumors 6502a

    Joined:
    Sep 18, 2008
    #11
    And what's the difference between:
    Code:
    position: relative;
    and
    Code:
    position: absolute;
     
  12. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #12
  13. JavaWizKid thread starter macrumors 6502a

    Joined:
    Sep 18, 2008

Share This Page