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/

<style type="text/css">
.cf-full input,
.cf-full label{
    float:left;
}
@media all and (max-width: 300px){
    .cf-full input,
    .cf-full label{
        float:right;
    }
}
</style>

<div class="cf-full">
    <input id="a" />
    <label class="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-full input,
.cf-full label{
    display:block;
    position:absolute;
}
.cf-full input {left:0;top:20px;}
.cf-full label{left:0;top:0px;}

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

Share

You may like these posts

• 
  Chrome Extension Form Input Text Is Blank On Submit
• 
  Getimagedata Causes "uncaught Error: Not_supported_err: Dom Exception 9"
• 
  Angularjs Custom Filter To Check For Values Inside A Data Array
• 
  Vertically Align Multi-line Text In A Div Sitting Next To Floated Sibling