Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Thanked 0 Times in 0 Posts

    Problems with CSS float


    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.

    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?

    (Please note: i can not use fixed width on this container. I can not use 100% or any percentage width either)

    /* the html */
            <div class="bottom-corners">                        
                    <div class="left"></div>
                    <div class="mid"></div>
                    <div class="right"></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;
    Any help would be appreciated! Thanks!
    Last edited by jameshoward; 10-28-2008 at 08:23 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Thanked 2,224 Times in 2,211 Posts
    Could you post a link to your page(or a sample page)?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


    Posting Permissions

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