current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

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|improve this question
1  
Do you need that, specific markup? Would be easier if you could move the submit and the link to the right column. – Yoshi Feb 13 '12 at 14:17
    
For HTML/CSS/JavaScript questions, a jsFiddle demo or similar is a very useful thing to include with your question. – thirtydot Feb 13 '12 at 14:46
    
thirtydot IE7 is not required. @Yoshi the submit and link should be attached to the input, the three taken together should occupy a single line, being the maximal space between whatever else happens to be on the page. – spraff Feb 13 '12 at 14:57
    
I removed my "is IE7 required" comment because my answer mostly already works in IE7. – thirtydot Feb 13 '12 at 15:00
up vote 3 down vote accepted

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>​
share|improve this answer
    
That results in the "Submit" and "link" being pushed down a line, so no good. Thanks anyway. – spraff Feb 13 '12 at 14:15
    
@spraff just decrease text-box size to 80% for example. See updated answer – Tural Aliyev Feb 13 '12 at 14:20
1  
No good, a solution involving magic numbers is simply not acceptable. It has to work regardless of the widths of the other elements (unless the screen is too narrow for all of them). – spraff Feb 13 '12 at 14:28
    
@spraff unfortunatelly you can't do it without setting exact width's – Tural Aliyev Feb 13 '12 at 14:30
up vote 5 down vote

See: http://jsfiddle.net/thirtydot/mSwBe/

This works in all modern browsers.

It's close enough on IE7 (no support for box-sizing: border-box, but this can be worked around easily enough, in this instance).

box-sizing: border-box makes the text input fit exactly inside the width of its containing span.

overflow: hidden is being very useful.

HTML:

<div id="left"><p>LEFT</p></div>
<div id="right"><p>RIGHT</p></div>
<div id="middle">
    <span id="buttonContainer">
        <input type="submit" />
        <a href="">Link</a>
    </span>
    <span id="textContainer">
        <input type="text" />
    </span>
</div>

CSS:

#left, #right, #middle {
    padding: 5px;
}
#left {
    float: left;
    background: #0ff;
}
#right {
    float: right;
    background: #0ff;
}
#middle {
    background: #f0f;
    overflow: hidden;
}

#middle input { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#textContainer {
    overflow: hidden;
    display: block;
}
#textContainer input {
    width: 100%;
}
#buttonContainer {
    float: right;
}
share|improve this answer
    
+1. The overflow: hidden did the trick for me. Thank you very much ! – ereOn Jul 20 '12 at 17:39
    
The overflow:hidden fixed a similar problem I was having. Never knew about this before. Thanks! – antriver May 23 '13 at 18:06
up vote 0 down vote

You need to float everything to the left, and use some relative values on the div's. 

<div style="float:left; margin-right: 20px; width: 20%;"><p>LEFT</p></div>
<div style="float:left;  margin-right: 20px; width: 20%;"><p>RIGHT</p></div>
<div style="float:left; margin-right: 20px; width: 50%;"><p>
    <input type="text" style="width:60%; " />
    <input type="submit" style="display:inline; width: 55px;" />
    <a href="">Link</a>
</p></div>​

You can see here

This WILL break when the page gets to a certain narrowness, so you might have to set a min-width on your body.

share|improve this answer
up vote 0 down vote

it's better to float every element left and then you have to give every element a width:

<div style="width:100%">
    <div style="float:left;width:10%"><p>LEFT</p></div>
    <div style="float:left;width:80%">
        <p style="clear:both">
            <input type="text" style="float:left;width:79%" />
            <input type="submit" style="float:left;width:10%" />
            <a href="" style="float:left;width:10%">Link</a>
        </p>
    </div>
    <div style="float:left;width:10%"><p>RIGHT</p></div>
</div>
share|improve this answer
up vote 0 down vote

A better approach (building off oftrl13's solution) would be to isolate the text input in its own div and move the link and submit button to sit inside the static right-floated div:

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

<div style="float:right; width:300px; background-color:red">
    <input type="submit" />
    <a href="">Link</a>
   RIGHT</div>

<div style="margin:0 310px 0 210px"><p>
    <input type="text" style="float:left; width:100%; display:run-in;" />

</p></div>

See it in at work

​

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.