CODEWITHSUNDEEP
htmlcsstemplates
Daksh Shah
Daksh Shah

Reputation: 3113

HTML-CSS: Avoid Next Line Before Input Field

A had a theme in which I am making changes.
My code ges as folllows:

<div class="box four last">
    <!-- box title-->
    <h5>
        <a href="products.html">SEND QUERY</a>
    </h5>
    <!-- text-->
    <p>
        <!--Text Here-->                
    </p>
    <a href="#" title="" class="small_button">Read More</a>
</div>

I want to insert a form at the place where it is written text here.
So I insert the following code in there:

<form action="mail.php" method="POST" style="display:inline;">
    <div><label>Name:</label> <input type="text" name="name"></div>
    Email: <input type="text" name="email">
    Phone: <input type="text" name="phone">
    Website:<input type="text" name="website">
    Message:<textarea name="message" rows="6" cols="25"></textarea><br />
    <input type="submit" value="Send">
    <input type="reset" value="Clear">
</form>

And here is what I get as output: Output (The last one - Send Query)

See in this, the input fields come in the next line, but what I want is that it comes in front of the text (ex. Name: <textfield>)
So that I can minimize the form length by making it around 50% shorter so that it goes with the other thing

What I have tried: I thought that it has something to do with the class "box four last", so I searched for the exact string among all the css files but could not find, however I found a lot of occurrences of 'box', 'four' etc.all those mainly had just the width described. I also tried removing the div tag but it made it worse, I have also tried putting inline attribute in from tag.

There is 1 relevant CSS File:

<link rel="stylesheet" type="text/css" href="css/style.css" />

stlye.css -> http://jsfiddle.net/4sEhE/2/

Update 1 In style.css I found this:

/* Four*/.box.four{width:220px; }/*

Update 2 Even if I lessen the width of the input(by adding more to the end of css file), the input field comes in next line :P

enter image description here

Upvotes: 0

Views: 402

Answers (1)

Kheema Pandey
Kheema Pandey

Reputation: 10265

Not sure if you are following same structure as it is there in the following demo

OLD Demo. http://jsbin.com/yotirifo/1/

Updated Demo http://jsfiddle.net/kheema/4sEhE/20/

Upvotes: 2

Related Questions