www.webdeveloper.com
Results 1 to 4 of 4

Thread: CSS Float refuses to do its job

  1. #1
    Join Date
    Oct 2008
    Posts
    2

    CSS Float refuses to do its job

    Hello,

    i am having a problem with CSS.

    I have three DIVs that should be placed next to each other within a container DIV. However, the middle DIV should stretch out to fill the whole empty space. The left DIV is floatet left, the right DIV is floatet right.

    For some reason the right DIV drops to the next line but i fail to see why, since there would be enough space for it (exactly the right space, actually) to be placed there (where it belongs).

    I have create a little graphic to illustrate my problem.

    http://www.dreamtailor.net/prv/problem.jpg

    I will also add all according source code (HTML & CSS). However, please be aware that the container ("bottom-corners") which contains the three DIVs ("left","mid" and "right") is, in itself, nested in another container.

    The correct result this, should be that the two DIV elements on the left and on the right stick to their sides, resulting in those corners (see image). The middle DIV should stretch out to fill all the space that is left with the appropriate color. I am trying to achieve a rounded corner effect here.

    Does anybody know how to solve this problem?

    Code:
    /* the html */
            
            <div class="bottom-corners">                        
                    <div class="left"></div>
                    <div class="mid"></div>
                    <div class="right"></div>
            </div>
     
    /* the css */
     
    .bottom-corners .left {
                                             
            float:                                  left;
            width:                                  10px;
            height:                                 10px;
            background-image:                       url('/img/interface/tr_corner_left.gif');
            background-repeat:                      no-repeat;
            
    }
     
    .bottom-corners .mid {
                                             
            height:                                 10px;
            background-image:                       url('/img/interface/tr_flow.gif');
            background-repeat:                      repeat-x;
            margin:                                 0px 10px;
     
     
    }
     
    .bottom-corners .right {
                                             
            float:                                  right;
            width:                                  10px;
            height:                                 10px;
            background-image:                       url('/img/interface/tr_corner_right.gif');
        background-repeat:                          no-repeat;
        
    }

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    /* the html */
            
            <div class="bottom-corners">                        
                    <div class="left"></div>
                    <div class="right"></div>
            </div>
     
    /* the css */
     
    .bottom-corners .left {
                                             
            float:                                  left;
            width:                                  10px;
            height:                                 10px;
            background-image:                       url('/img/interface/tr_corner_left.gif');
            background-repeat:                      no-repeat;
            
    }
     
    .bottom-corners {
                                             
            height:                                 10px;
            background-image:                       url('/img/interface/tr_flow.gif');
            background-repeat:                      repeat-x;
            
     
    }
     
    .bottom-corners .right {
                                             
            float:                                  right;
            width:                                  10px;
            height:                                 10px;
            background-image:                       url('/img/interface/tr_corner_right.gif');
        background-repeat:                          no-repeat;
        
    }

  3. #3
    Join Date
    Oct 2008
    Posts
    2

    Not possible

    Thank you!

    I would have done exactly that, but the corners are transparent on the outside, which means that if i stretch the tr_flow background over the whole area, the whole corner effect will be lost, rather disturbed.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    /* the html */
            
            <div class="bottom-corners">                        
                    <div class="left"></div>
                    <div class="mid"></div>
                    <div class="right"></div>
            </div>
     
    /* the css */
    
    .bottom-corners {position:relative;}
     
    .bottom-corners .left {
                                             
            position:absolute; left:0;top:0;
            width:                                  10px;
            height:                                 10px;
            background-image:                       url('/img/interface/tr_corner_left.gif');
            background-repeat:                      no-repeat;
            
    }
     
    .bottom-corners .mid {
                                             
            height:                                 10px;
            background-image:                       url('/img/interface/tr_flow.gif');
            background-repeat:                      repeat-x;
            margin:                                 0px 10px;
     
     
    }
     
    .bottom-corners .right {
                                             
            position:absolute; right:0;top:0;
            width:                                  10px;
            height:                                 10px;
            background-image:                       url('/img/interface/tr_corner_right.gif');
        background-repeat:                          no-repeat;
        
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles