Home/ Questions/Q 7458615
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T13:28:16+00:00

Try this: <div style=float:left><p>LEFT</p></div> <div style=float:right><p>RIGHT</p></div> <div><p> <input type=text style=width:100% /> <input type=submit />

  • 0

Try this:

<div style="float:left"><p>LEFT</p></div>
<div style="float:right"><p>RIGHT</p></div>
<div><p>
    <input type="text" style="width:100%" />
    <input type="submit" />
    <a href="">Link</a>
</p></div>

This ends up with LEFT and RIGHT being on the first line, the text input taking up the whole of the second line, and “Submit” and “Link” being on a third line.

I want all of these to be on one line, and if the window is widened, the text input should widen. How do I do this without tables?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It can’t be done without setting exact widths.

    Set exact width to left and right columns, also margin to center div. Here is my solution

    JsFiddle

    http://jsfiddle.net/xe4EJ/2/

    Code

    <div style="float:left; width:200px; background-color:red"><p>LEFT</p></div>

<div style="float:right; width:200px; background-color:red"><p>RIGHT</p></div>

<div style="margin:0 210px 0 210px"><p>
    <input type="text" style="width:80%" />
    <input type="submit" />
    <a href="">Link</a>
</p></div>​
    • 0