How do you make text wrap around so that it doesnt overlap into the next box?

Jorge, If the input is for a username, make the input type="text". Also, you have two inputs and two labels for the same thing. Try using just one label, and one username for the input, put them both in the same div, and you can also wrap the label around the input. if you need additional text to describe the input field, include it in a paragraph or header tag, inside the same div, and then constrain the width of the elements inside of the div to each be 100%, or whatever percentage you want them to be relative to the total size of the div.

Sorry Justin. I should have presented my code in a manner that is more understandable in what I am trying to do. I am actually trying to build a static webpage that allows me to enter numerical values. The "username" names will be changed to something else that makes sense.

Having said this, I do need to input boxes side to side, and then I will need a label below those input boxes. Should I still follow what you said, or is there a different way about this now that I have clarified a bit more?

Thank you.

Jorge, No worries. Separate the labels you want with the inputs you want. In other words, In the 1st div, put the first label with the (corresponding) 1st input inside of it. In the second div, put the other label with the other input. There are a few ways to do what you want to done, but I think this is the easiest. After they have been re-arranged, each div will be able to control the total size of its contents. If you are still having trouble, please add the actual code here so I can edit it.

Hi Justin,

This is what I have so far but my problem lies in the divs not being centered properly.

Also, when I shrink the browser window the divs dont stack up properly one over the other.

check it out

https://drive.google.com/folderview?id=0ByGkh3KXsrkmfjNXeHZhVVJmX293SG1naEJvbE1fZVFTN1V5dWNobW5kdW9xVWpoWE9JUjg&usp=sharing

Jorge,

@media screen and (max-width: 500px) {
      div1 {
          margin: 0 auto;
     }
}

try adding this with each respective div. The max width here should be set to wherever the proper breakpoint should be. You can also change the first number of the margin to something greater if you wish to add more vertical margin. This will help on the smaller screen sizes, but I'm not sure exactly where you want the divs to be on the larger screen. You can try putting all of the divs in a wrapper div.