CSS make a width:100% stop against floating objects

Question

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?

Do you need that, specific markup? Would be easier if you could move the submit and the link to the right column. — Yoshi
– Yoshi, Commented Feb 13, 2012 at 14:17
For HTML/CSS/JavaScript questions, a jsFiddle demo or similar is a very useful thing to include with your question. — thirtydot
– thirtydot, Commented Feb 13, 2012 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
– spraff, Commented Feb 13, 2012 at 14:57
I removed my "is IE7 required" comment because my answer mostly already works in IE7. — thirtydot
– thirtydot, Commented Feb 13, 2012 at 15:00

thirtydot · Accepted Answer · 2012-02-13 15:08:40Z

6

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;
}

edited Feb 13, 2012 at 15:08

answered Feb 13, 2012 at 14:57

thirtydot

229k51 gold badges393 silver badges354 bronze badges

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

3 Comments

ereOn Over a year ago

+1. The overflow: hidden did the trick for me. Thank you very much !

antriver Over a year ago

The overflow:hidden fixed a similar problem I was having. Never knew about this before. Thanks!

Orun Over a year ago

This should be marked as the correct answer

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

1

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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 13, 2012 at 14:11

Tural Ali

23.5k18 gold badges82 silver badges134 bronze badges

4 Comments

spraff Over a year ago

That results in the "Submit" and "link" being pushed down a line, so no good. Thanks anyway.

Tural Ali Over a year ago

@spraff just decrease text-box size to 80% for example. See updated answer

spraff Over a year ago

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).

Tural Ali Over a year ago

@spraff unfortunatelly you can't do it without setting exact width's

chipcullen · Accepted Answer · 2012-02-13 14:14:12Z

0

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.

answered Feb 13, 2012 at 14:14

chipcullen

7,0001 gold badge23 silver badges17 bronze badges

Comments

Jules · Accepted Answer · 2012-02-13 14:26:18Z

0

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>

answered Feb 13, 2012 at 14:26

Jules

3,1552 gold badges30 silver badges34 bronze badges

Comments

Ben D · Accepted Answer · 2012-02-13 14:29:46Z

0

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

answered Feb 13, 2012 at 14:29

Ben D

14.6k3 gold badges47 silver badges59 bronze badges

Collectives™ on Stack Overflow

CSS make a width:100% stop against floating objects

5 Answers 5

3 Comments

JsFiddle

Code

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

JsFiddle

Code

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related