Media Queries - Label and Content

I have prepared a working html example to give us a starting point attached.

I have this setup using CSS and a media query. A few problems:

I want there to be a vertical rule and padding between the labels and the content. But when I add padding or a margin it breaks the label, so it is now on top  of the content instead of to the left.

Capture.JPG
       .label {
            width: 30%;
            background: dodgerblue;
            text-align: right; /* when full width make label flush right */
                margin-right: 15px;
        }

Open in new window


Like so:

Capture2.JPG
the idea is that when the resolution is smaller, that the label won't be on the left, but instead will flow in the same column.

Capture3.JPG
So in short:
I need there to be padding between and a vertical rule to 100% of the height of the tallest row.

Like this:

Capture4.JPG
But when the resolution is smaller, it will flow onto the same column with the label on top of the content.

Please help and thanks!
LabelTextMediaQuery.zip
LVL 2
Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Here is another zip file with a different method of doing the same thing. It might be closer, since it has the padding, but not the vertical rule.

Plus, I don't want to use div.text input for my style as sometimes the control may be a combobox or radio button, so I'd probably want a div around these. So I don't know that this would work at all with my needs.
MediaQuery2.zip
0
GaryCommented:
Without going through all your code, when you add padding and you don't declare a box-sizing method then borders/padding etc are added to the element dimensions
The solution is to use in your css
* {
    box-sizing: border-box;
}

Open in new window


This means any padding etc that are added to an element are contained within the elements size i.e. if you add 10px padding to a 200px box then the box stays 200px with 10px padding inside it.

Further reading
http://learnlayout.com/box-sizing.html
http://www.paulirish.com/2012/box-sizing-border-box-ftw/

p.s.
In the future just post the code, it's too much hassle to download a zip, extract etc etc.
0
Slick812Commented:
greetings  BobCSD, , I have looked at your HTML and CSS for the  ZIPPED html pages you have here, I also read your descriptions for the way you say that you "need" the labels and inputs to be displayed in the wider view as two columns and in a narrower view as one column, however, your descriptions and "image views" are NOT THE SAME for the different sections, as in the image that you have *country, other state,  and  *city , there is NOT a blue background for the labels, AND you have a Blue vertical divider BAR between the labels and the inputs, this Blue BAR can be separate problem than the labels and the inputs positioning in columns.

first I will comment on your CSS, you try and use the   float: left:  for the labels, but using the CSS  float, takes that element OUT of the container "relative" positioning for the container and surrounding elements, which can cause problems for somewhat dynamic alterations in column setups.

Next and more Important to me, for column display, ,  is the Inconsistent widths you have in the inputs in your second ZIP example, , as to have a textarea that is much wider than the two text inputs, and yet you try and use a -
        @media (max-width: 350px)
even though the two column display is more like  530 pixels wide with the texarea having the  cols="50"

Below in some code that works for me, as far as I can understand your mixed up requirements. Instead of CSS float, I use the CSS  display:inline-block;  which does NOT take that element OUT of the container "relative" positioning for the container and surrounding elements, AND will automatically drop the elements into a single column display IF the container <div> width is smaller.

since the display of the two columns is less  530 pixels wide, I use this -
          @media screen and (max-width: 524px)
since the @media screen uses the pixel standard I had to change the label and text area widths to a pixel definition to guarantee some consistency in display.
FOR DEVELOPMENT and seeing the container, I have placed a dashed border on the .formDiv container, so developer can SEE the result, remove the border in final work.

<!DOCTYPE html>
<html><head><title>Dynamic labels</title>
<style type="text/css">
html, body{margin: 0;
padding: 0;
height: 100%;}

body {background: #fffadf;}

input:active,
input:focus,
input:hover,
textarea:active,
textarea:focus,
textarea:hover {background-color: #ffedd8; border-color: #c76; }

.inblk {display:-moz-inline-box;-
  moz-box-orient:vertical;
  display:inline-block;
  vertical-align:top;
  zoom:1;
  *display:inline;}
  
.formDiv {width:33em;
 border:1px dashed #0a0;}
 
.bluLabel {width:96px;
 padding:0 4px;
 text-align: right;
 background: dodgerblue;
 margin-right:-1px}
 
.leftLine {padding-left:3px;
 border-left:2px solid #008;
 padding-bottom:1em;}

@media screen and (max-width: 524px){.formDiv{width:414px;} .bluLabel{width:405px; text-align:left;} .leftLine{border: 0;}}
</style>
</head>
<body>
<h3 style="text-align: center; color:#b00;">Dynamic labels on Inputs</h3>

<div class="formDiv">
  <div>
    <label for="name1" class="inblk bluLabel">Name</label>
	  <div class="inblk leftLine">
        <input type="text" size="30" name="name1" id="name1" />
      </div>
  </div>
  <div>
    <label for="email1" class="inblk bluLabel">E-mail</label>
	<div class="inblk leftLine">
      <input type="text" size="25" name="email1" id="email1" />
	</div>
  </div>
  <div>
    <label for="comment1" class="inblk bluLabel">Comment</label>
	<div class="inblk leftLine">
      <textarea name="comment1" id="comment1" style="width:404px; height:90px;"></textarea>
	</div>
  </div>
</div>
<!DOCTYPE html>
<html><head><title>Dynamic labels</title>
<style type="text/css">
html, body{margin: 0;
padding: 0;
height: 100%;}

body {background: #fffadf;}

input:active,
input:focus,
input:hover,
textarea:active,
textarea:focus,
textarea:hover {background-color: #ffedd8; border-color: #c76; }

.inblk {display:-moz-inline-box;-
  moz-box-orient:vertical;
  display:inline-block;
  vertical-align:top;
  zoom:1;
  *display:inline;}
  
.formDiv {width:33em;
 border:1px dashed #0a0;}
 
.bluLabel {width:96px;
 padding:0 4px;
 text-align: right;
 background: dodgerblue;
 margin-right:-1px}
 
.leftLine {padding-left:3px;
 border-left:2px solid #008;
 padding-bottom:1em;}

@media screen and (max-width: 524px){.formDiv{width:414px;} 
  .bluLabel{width:405px; text-align:left;} 
  .leftLine{border: 0;}
  }
</style>
</head>
<body>
<h3 style="text-align: center; color:#b00;">Dynamic labels on Inputs</h3>

<div class="formDiv">
  <div>
    <label for="name1" class="inblk bluLabel">Name</label>
	  <div class="inblk leftLine">
        <input type="text" size="30" name="name1" id="name1" />
      </div>
  </div>
  <div>
    <label for="email1" class="inblk bluLabel">E-mail</label>
	<div class="inblk leftLine">
      <input type="text" size="25" name="email1" id="email1" />
	</div>
  </div>
  <div>
    <label for="comment1" class="inblk bluLabel">Comment</label>
	<div class="inblk leftLine">
      <textarea name="comment1" id="comment1" style="width:404px; height:90px;"></textarea>
	</div>
  </div>
</div>

</body></html>
</body></html>

Open in new window

ask questions if you need more information.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Slick,

I apologize. I meant to say the second one was another one I found on the web. I didn't create that one, but altered it and tried to make it work, but it was setup for inputs, and I need it for anything. So the original author had the weird widths, I guess to show how it wraps down on longer lines, etc. And didn't have the vertical rules, etc.

I just didn't know which one might be easier to work with from a starting point.

I tried both.

Gary,

Yes, some people flip out if I paste code in and tell me to put it in a zip and others ...

Slick,
Thank you for your educational post and helping me on this. Fantastic!
0
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Slick, thanks! I added a combobox and it works like a charm for that as well! thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.