SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nested boxes problem

    Hi,

    I need to make two boxes stick together with content in them. I am not able to have these two boxes on the same row. The content of the box that is supposed to be at right is under the left box.

    Is someone could help me to do this?

    Page is at:
    http://connaissances.org/site2/
    css is at:
    http://connaissances.org/site2/web.css

    Thank you

    GJ

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

    You haven't used any positioning system as right:400px on its own means nothing.

    You could float the blocks together or use absolute positioning which is what I think you were trying to do. First you need to seta stcking context by applying position:relative to the parent and then you can position the element in respect of the parent.

    e.g.

    Code:
    #nouveautes {
     background: #fff url(http://connaissances.org/site2/images/nouveautes2.gif) repeat-x;
     width: 560px;
     height: 122px;
     margin-bottom: 20px;
     text-align: left;
    position:relative;
    } 
    #nouveaute {
     width: 255px;
    	height: 120px;
     margin: 0;
     padding: 0;
     top: 0;
    }
    #nouveaute h3{
     color: #fff;
     background: #f00;
     width: 80px;
    	font-size: 1em;
     padding: 0 15px 0 10px;
     margin: 0;
     
    }
    #communique {
     color: #000;
     padding: 0;
     width: 220px;
     height: 117px;
     margin: 0;
     left: 255px;
     position:absolute;
     top:0;
    }
    
    Just remember that absolute elements are removed from the flow so you will need to control the height and width of the content so that it stays within the boundaries of the parent.

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank You Paul,

    I was exactly what I need.

    Thanks also to make clear to me the relation between the element and the parent in relative and absolute positioning. Il will help in the future.

    GJ


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
  •