Please explain the following behavior

I have given position to the parent relative and child absolute, but child element(icon) not fitted in given parent, it is going out of parent. can some one please explain the behavior?

That icon should be always in right of the text and top.

If it is below the breakpoint {@media (min-width:320px) and (max-width:640px)} the text should be in left and icon should be next to the text. if text goes in two line the icon should be again in top right. please help me.

<div id="main">
        <div class="left">
            <div class="leftwrapper"> <span>*</span>
     <span>hello this is label may be two line</span>

                <div class="leftIcon"><img src="https://wiki.jenkins-ci.org/download/attachments/42469250/info.gif?version=1&modificationDate=1264477127000"/></div>
            </div>
        </div>
        <div class="right">
            <input type="text" />
        </div>
    </div>

—————css here—————

$bg:red;
 $bg1:tomato;
 $bg2:#fff;
 $pad:10px;
 $wd:100%;
 * {
    box-sizing:border-box;
}
#main {
    background:$bg;
    display:inline-block;
    width:$wd;
    height:auto;
    overflow:hidden;
    padding:$pad;
    .left {
        width:$wd - 50;
        float:left;
        .leftwrapper {
            width:$wd;
            padding:$pad;
            background-color:$bg1;
            position:relative;
            text-align:right;
            span:first-child {
                text-align:right;
                color:$bg2;
            }
            .leftIcon {
                position:absolute;
                left:100%;
            }
        }
    }
    .right {
        width:$wd - 50;
        display:inline-block;
        background-color:$bg2;
        padding:$pad;
        input[type="text"] {
            width:$wd - 10;
        }
    }
}
@media (min-width:320px) and (max-width:640px){
        #main{
            .left{
            width:$wd;  
        .leftwrapper{text-align:left;}
            }
             .right{
            width:$wd;    
            }
        }
}

Here is jsfiddle


Source: css3

Leave a Reply