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 2 of 2
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    make div lay on top of wrapping divs padding

    I have a 2 column layout where my left column is fixed and right column will adjust as the screen size increases. So far I have right column behaving perfectly by adding left padding to my wrapping div making enough room for the left div to fit in place. my problem is my left div is going below where the padding is.

    so basic setup:

    Code:
    <div class="wrapper">
    
    <div class="right_col">
    </div>
    
    <div class="left_col">
    </div>
    
    </div>

    my css:
    Code:
    .wrapper
    {
     padding-left: 250px;
    }
    
    .left_col
    {
    width: 100%;
    }
    
    .right_col
    {
    width: 240px;
    position: relative;
    right: 250px;
    }
    horizontally, they are all where they need to be, but vertically my left_col is sitting below where my padding is created by the wrapper.

    The only way to fix this and make it ignore the padding is by setting position absolute. But this will then break it out of all divs. so it will float freely on the page which will screw up how to place it as the screen size changes.

    Any suggestions on how to fix this?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello surreal5335,
    Look at it this way and see if it works for you -
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {margin: 0;}
    #left {
    	height: 600px; /*demo only*/
    	width: 400px;
    	float: left; 
    	background: #3ff;
    }
    #right {
    	height: 600px; /*demo only*/
    	margin: 0 0 0 400px;
    	background: #f00;
    }
    </style>
    </head>
    <body>
            <div id="left">
            <!--end left--></div>
        <div id="right">
        <!--end right--></div>
    </body>
    </html>
    Based on this simple 2 column demo.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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