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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    relative positioning

    Hello,

    I want to make this layout:



    There are 4 relative positioned divs next to each other in some container.

    The red line in my picture shows where the container's height should end but it doesn't because of the last div which default position is down there. I can't set fixed height for container because of random stuff above.

    How to do it?

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Share mockup of layout you want and your present code in which you have issue...

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I don't think it's important, but if you need it anyway ...

    CSS
    Code:
    #container
    {
    width:600px;
    background:blue;
    margin:0 auto;
    }
    
    .box
    {
    float:left;
    width:196px;
    height:318px;
    background:red;
    }
    
    #box1
    {
    position:relative;
    left:-140px;
    float:left;
    }
    
    #box2
    {
    position:relative;
    left:-102px;
    }
    
    #box3
    {
    position:relative;
    left:-66px;
    }
    
    #box4 //this div is doing the mess because it's default position is under the other 3 divs and that's why the container stretches.
    {
    position:relative;
    left:558px;
    top:-318px;
    }
    HTML
    Code:
    <div id="container">
    
    <div>RANDOM CONTENT</div>
    
    <div class="box" id="box1"></div>
    <div class="box" id="box2"></div>
    <div class="box" id="box3"></div>
    <div class="box" id="box4"></div>
    
    <div style="clear:both"></div>
    </div>
    Last edited by Radovan; 08-02-2011 at 12:51 PM.


  •  

    Posting Permissions

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