How do I prevent the image from stretching?

Question

1.00/5 (1 vote)

See more:

I am simply trying to place a 16x16 calendar icon to the right of this text box. It was working fine, then I purchased a template and after applying the template, the image started appearing below the text box and is stretching the length of the div.

.contact-form {
position: relative;
vertical-align: top;
z-index: 1;
margin: 0;
top: -10px;
}
.contact-form .txt-form {
display: none;
}
.contact-form .coll-1, .contact-form .coll-2, .contact-form .coll-3 {
margin-bottom: 23px;
float: left;
width: 200px;
}
.contact-form .coll-1 p, .contact-form .coll-2 p, .contact-form .coll-3 p {
margin-bottom: 3px;
}
.contact-form .coll-1, .contact-form .coll-2 {
margin-right: 10px;
}
.contact-form fieldset {
top: 9px;
border: none;
padding: 0;
width: 100%;
position: relative;
z-index: 10;
}
.contact-form label {
display: block;
min-height: 45px;
position: relative;
margin: 0;
padding: 0;
float: left;
width: 100%;
}

Due Date*

What I have tried:

I've tried float and various display options on the image.

Posted 19-Oct-17 4:32am

ftbadolato76

Updated 19-Oct-17 8:33am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

omerkamran · Answer 1 · 2017-10-19T04:56:00

Solution 1

In your CSS, change the property of Position to static in the css class like this:

position: static

this will not allow the image to stretch. For further more information about position you can visit this link
CSS Layout - The position Property[^]

Posted 19-Oct-17 4:56am

omerkamran

Updated 19-Oct-17 5:03am

Comments

ftbadolato76 19-Oct-17 11:10am

There are a number of instances of "position: relative;". Which are you suggesting I change? Also, will this not have potential adverse affects to other uses of this CSS throughout the site? Is there any solution where I can apply CSS directly to this image? I'd hate to screw things up for other pages as this is the only case where I need to stick that image to the right of the text box.