Responsive Design Css Dom Element Manipulation

I have div field including a input element and a label element. Both are display: block

Solution 1:

This works

div {
    display:table;
}
input {
    display:table-footer-group;
}
label {
    display:table-header-group;
}

http://jsfiddle.net/v8xTC/

Solution 2:

yes it is: you are trying something like this: (you can resize the viewport in jsfiddle to see what happens) http://jsfiddle.net/SuWLr/

<styletype="text/css">.cf-fullinput,
.cf-fulllabel{
    float:left;
}
@media all and (max-width: 300px){
    .cf-fullinput,
    .cf-fulllabel{
        float:right;
    }
}
</style><divclass="cf-full"><inputid="a" /><labelclass="helptext">Label</label></div>

UPDATE: after the coment as it wasn't clear to me to have the label change from above to underneath (up/down) so maybe this helps.

Something similar with some positiong styles: http://jsfiddle.net/SuWLr/1/

.cf-full {
    position:relative;
}
.cf-fullinput,
.cf-fulllabel{
    display:block;
    position:absolute;
}
.cf-fullinput {left:0;top:20px;}
.cf-fulllabel{left:0;top:0px;}

@media all and (max-width: 300px){
    .cf-fullinput {left:0;top:0px;}
    .cf-fulllabel{left:0;top:20px;}
}

Share