Responsive Design Css Dom Element Manipulation February 28, 2024 Post a Comment I have div field including a input element and a label element. Both are display: block Solution 1: This worksdiv { display:table; } input { display:table-footer-group; } label { display:table-header-group; } Copyhttp://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>CopyUPDATE: 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;} } Copy Share Post a Comment for "Responsive Design Css Dom Element Manipulation"
Post a Comment for "Responsive Design Css Dom Element Manipulation"