CSS Issues with image and input field

Question

I am having difficulties manipulating an input field, image and text all in the same line. I have set float to the image and text but it doesnt solve the issue. How can I make the image, text and input be all in one line for all browsers?

enter image description here

CSS

h1 {
    letter-spacing: 2px;
    font-style: italic;
    padding: 5px;
    color: #898989;
    font-size: 140%;
    font-weight: lighter;
    margin: 0px;

}



h2 {
    color: #333333;
    font-weight: bold;
    font-size: 105%;
    margin: 0px;

}

input, select {
    border: 1px solid #C3C3C3;
    background: #ffffff;
    padding: 3px 4px;
    color: #222;
    margin: 0px 5px 0px 0px;
    border-radius: 7px 7px 7px 7px;
    font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
}

input:focus, select:focus {
    outline: none;
}

.InputGroup {
    display: inline-block;
    padding: 3px 4px;
    border: 1px solid #FFF;
    border-radius: 7px 7px 7px 7px;
}

input.medium, select.medium{
    width:55%;
}

.youTubePng {

float:left; padding-right: 5px;


}

.youTubeLink {
padding-right:5px; float:left; padding-top: 3px;

}

HTML

<form autocomplete="off" enctype="multipart/form-data" method="post"  name="form">
                    <h1 style="padding-left:0;">Video(Optional)</h1>
                     <img src="images/YouTube.png" class="youTubePng" />
                     <h2 id="youTubeLink">Link:</h2>

                    <input id="ytinput" name="ytinput" type="text" class="field text medium" value="<? $url ?>" maxlength="255" tabindex="1"    />


       </form>

Here is a demo before: (your code) jsbin.com/edafun/edit#javascript,html,live — Roko C. Buljan
– Roko C. Buljan, Commented Jul 14, 2012 at 23:31

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

First: remove the </html> from your <form>.
Try to wrap the desired into a <label> !
Remove the <h2> and replace it with a <span>

jsBin demo

<label for="ytinput">
    <img src="images/YouTube.png" class="youTubePng" />
    <span id="youTubeLink">Link:</span>
</label>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 14, 2012 at 23:26

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brian Warshaw · Accepted Answer · 2012-07-14 23:32:41Z

0

h2 is, by default, a block element. It's not going to share the line with anything. Unless you have a really good reason for it being in an h2, take the advice of the other chap and use a label instead.

answered Jul 14, 2012 at 23:32

Brian Warshaw

23k9 gold badges55 silver badges72 bronze badges

Collectives™ on Stack Overflow

CSS Issues with image and input field

2 Answers 2

jsBin demo

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related