layout input field and button

Magnus Warker

unread,

Sep 21, 2012, 9:54:43 AM9/21/12

to

Hello,

I want an input field and a button at the right of it. The button should
always be at the right of the containing div and the input field should
be stretched over the available space:

It should look like this:

+-div----------------------+
|+-------------------++---+|
|| input || > ||
|+-------------------++---+|
+--------------------------+

Here is my approach:

<div style="width:100%;background:red;padding:1px;">
<button type="button" style="float:right;width:50px;">></button>
<input type="text" style="margin-right:550px;">
<div class="clear:right;"></div>
</div>

(http://jsfiddle.net/hpAEZ/10/)

This doesn't work.
What can I do?

Thank you!

Magnus

David Stone

unread,

Sep 21, 2012, 10:35:45 AM9/21/12

to

In article <k3hrmn$kgu$1...@news.albasani.net>,

Use a table, set its width to whatever is appropriate, and don't worry
about the rest.

Magnus Warker

unread,

Sep 21, 2012, 12:17:54 PM9/21/12

to

Shouldn't one do layout with CSS?

Besides that, why does this work:
http://jsfiddle.net/EHCGu/

And this not:
http://jsfiddle.net/hpAEZ/10/

???

Magnus

Dr....@nyc.rr.com

unread,

Sep 21, 2012, 12:22:39 PM9/21/12

to

On Fri, 21 Sep 2012 18:17:54 +0200, Magnus Warker <mag...@mailinator.com>
wrote in <k3i3tb$tpl$1...@news.m-online.net>:

Because you have over specified things -- you don't know the width and font
sizes of the user.

Experiment with various width and you will see.

A table is the solution. That what they are designed for.

Magnus Warker

unread,

Sep 21, 2012, 12:31:55 PM9/21/12

to

On 09/21/2012 06:22 PM, Dr....@nyc.rr.com wrote:
> On Fri, 21 Sep 2012 18:17:54 +0200, Magnus Warker<mag...@mailinator.com>

>> Besides that, why does this work:
>> http://jsfiddle.net/EHCGu/
>>
>> And this not:
>> http://jsfiddle.net/hpAEZ/10/
>>
>> ???

> Because you have over specified things -- you don't know the width and font
> sizes of the user.

I have tried a thousand things. Could you point me to it please?

> Experiment with various width and you will see.
> A table is the solution. That what they are designed for.

I have no tabular data, I want to layout widgets.
Isn't it important to separate data from layout?

Magnus

James Moe

unread,

Sep 21, 2012, 12:38:57 PM9/21/12

to

On 09/21/2012 09:22 AM, Dr....@nyc.rr.com wrote:
>
> Because you have over specified things -- you don't know the width and font
> sizes of the user.
>
> Experiment with various width and you will see.
>

I suspect you meant "variable/flexible/liquid" width?

> A table is the solution. That what they are designed for.
>

No, they were not. Tables just make layout easier in some cases
especially when the designer is lazy. If semantic coherency of the
markup is not a priority, then any old thing that makes a page look good
will do.
Table-like properties are possible using the "table-*" values for the
"display" property.

--
James Moe
jmm-list at sohnen-moe dot com

Jukka K. Korpela

unread,

Sep 21, 2012, 12:41:46 PM9/21/12

to

2012-09-21 19:31, Magnus Warker wrote:

> I have no tabular data, I want to layout widgets.

You don't understand the structure of your data then.

> Isn't it important to separate data from layout?

In a particular quasi-religion, yes. They have their own religious
language about "semantics", which does not contain what one might expect
it to contain (meaning), at least in the case of form data. As they see
a form as an amorphous mass, they require you to <div> and <span> it,
depriving any structure from it, and they call this "semantic approach".

Ask for their help if you have chosen to take their way no matter what.
Beware that the religion has been split to Floatists, Positioners, and
Gridists, at least.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Andreas Prilop

unread,

Sep 21, 2012, 1:01:31 PM9/21/12

to

On Fri, 21 Sep 2012, Jukka K. Korpela wrote:

> In a particular quasi-religion, yes. They have their own religious
> language about "semantics", which does not contain what one might
> expect it to contain (meaning),

> ...

> they require you to <div> and <span> it,

<span> should be replaced by <div style="display:inline">.

scnr

--
In memoriam Alan J. Flavell
http://groups.google.com/groups/search?q=author:Alan.J.Flavell

Magnus Warker

unread,

Sep 21, 2012, 1:24:55 PM9/21/12

to

On 09/21/2012 06:41 PM, Jukka K. Korpela wrote:
> 2012-09-21 19:31, Magnus Warker wrote:

>> I have no tabular data, I want to layout widgets.
> You don't understand the structure of your data then.

As I wrote, there is no data.

Magnus

Jukka K. Korpela

unread,

Sep 21, 2012, 1:31:55 PM9/21/12

to

2012-09-21 20:24, Magnus Warker wrote:

> As I wrote, there is no data.

Then you have nothing to layout, nothing to style. And no form. A form
control is data, and so is a label for it. Unless you are too deep in
the quasi-religion, you might see a connection between these types of
data - and a structure, when such connections exist between several
control/label pairs. Such structures are often called arrays; you might
recognized them under a different name in HTML.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Magnus Warker

unread,

Sep 21, 2012, 3:58:06 PM9/21/12

to

On 09/21/2012 07:31 PM, Jukka K. Korpela wrote:
> 2012-09-21 20:24, Magnus Warker wrote:
>
>> As I wrote, there is no data.
>
> Then you have nothing to layout, nothing to style.

This is a stupid conclusion.

It was in the 90s when people built layouts using html tables. And it's
also common sense to separate layout from content.

It's not "religion", but a structured view on the world. You seem to
have a very simplified view on the world.

I really wonder why this group is called "stylesheets"...

Magnus

dorayme

unread,

Sep 21, 2012, 6:47:46 PM9/21/12

to

In article <k3hrmn$kgu$1...@news.albasani.net>,
Magnus Warker <war...@mailinator.com> wrote:

The button is always "at the right of the containing div" but the
input field can't "stretch[] over the available space" because you
have pinned down a definite px width. How can it stretch?

> What can I do?
>

OK, let's look at your particular markup and styling closer.

Why the width on the containing DIV? It is not being floated or
positioned and therefore will be as wide as it's container, possibly
BODY. So, let's cut this width out for a start.

Next, we need to be rid of the margin-right on the input element, it
seems to cause nothing but trouble, no?

Can't see your need for the clearing DIV. But maybe your real
situation is more complex and does need it?

Anyway, this might do you:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Rounded corners</title>
</head>
<body>
<div style="background:red;padding:5px;">

<button type="button" style="float:right;width:

10%;">></button> <input type="text" style="width: 80%;
background-color: yellow;">
</div>
</body>
</html>

This approach helps avoid some pesky issues of float drop that you are
likely not to be wanting to wrestle with.

You could use a table, I would. A table is not just for eating on or
for dramatic effects in films where feverish couples sweep all from
the top before indulging in wild and impulsive gyrations which I
understand you earthlings call sex.

An HTML table is good for your purpose because not only is it
naturally nice for your styling aims but aptly expresses a deeper and
more meaningful connection between the objects in the cells, the
button is the button for the input field, the input field is
incomplete without it and cries for a button.

Come to think of it, this is about as meaningful, sexy and romantic as
HTML can get. I mean, just look at the coldness in your markup. These
two related things are like total strangers, they just happen to be in
the same DIV; that is simply *not* the reality. The table "gets" their
relatedness better. I know this because I write romantic HTML/CSS
novels as a sideline.

> Thank you!
>
> Magnus

--
dorayme

Thomas 'PointedEars' Lahn

unread,

Sep 21, 2012, 10:06:17 PM9/21/12

to

James Moe wrote:

> On 09/21/2012 09:22 AM, Dr....@nyc.rr.com wrote:
>> Because you have over specified things -- you don't know the width and
>> font sizes of the user.
>>
>> Experiment with various width and you will see.
>>
> I suspect you meant "variable/flexible/liquid" width?

I think they meant what they posted, with a missing plural form.

>> A table is the solution. That what they are designed for.
>>
> No, they were not. Tables just make layout easier in some cases
> especially when the designer is lazy.

That is utter nonsense. Tables are for tabular, relational data. Authors
have been misusing tables for layouts for lack of a better alternative
before CSS was invented and widely supported. Those techniques and this
kind of Web authors are obsolete since about 12 years now.

> If semantic coherency of the markup is not a priority, then any old thing
> that makes a page look good will do.

"Semantic coherency" (better: semantic plausibility) should always be a
priority for a Web author. Web documents are not only read in and by
graphical Web browsers.

> Table-like properties are possible using the "table-*" values for the
> "display" property.

But they are not intended as a replacement for semantic markup. That would
be a basic misconception of CSS.

PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$8300...@news.demon.co.uk> (2004)

tlvp

unread,

Sep 22, 2012, 12:19:39 AM9/22/12

to

On Fri, 21 Sep 2012 21:58:06 +0200, Magnus Warker wrote:

> On 09/21/2012 07:31 PM, Jukka K. Korpela wrote:
>> 2012-09-21 20:24, Magnus Warker wrote:
>>
>>> As I wrote, there is no data.
>>
>> Then you have nothing to layout, nothing to style.
>
> This is a stupid conclusion.
>
> It was in the 90s when people built layouts using html tables.

They were just a bit ahead of their time, I suppose :-) .

> ... And it's

> also common sense to separate layout from content.

Except, of course, when the content *is* the layout :-) .

> It's not "religion", but a structured view on the world.

As structured view on the world? That's not a faith? a religion?

> ... You seem to

> have a very simplified view on the world.

Or you, o[f|n] religions :-) .

> I really wonder why this group is called "stylesheets"...

It's where to come for stylesheet advice, where appropriate, or for
whatever other advice may unexpectedly prove to be more appropriate.

Even a gastro-enterological surgeon is wise to refrain from operating on
someone manifesting only the sort of abdominal pains a bout of the shingles
can inflict on someone :-) .

> Magnus

HTH. Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

tlvp

unread,

Sep 22, 2012, 12:24:21 AM9/22/12

to

On Sat, 22 Sep 2012 08:47:46 +1000, dorayme wrote:

> ... I know this because I write romantic HTML/CSS
> novels as a sideline.

Graphically pointillistic ones, matching your X-Face, at that :-) .

Cheers, and bravo!, -- tlvp

dorayme

unread,

Sep 22, 2012, 2:40:04 AM9/22/12

to

In article <1r9yshn5hi6ub.1op9sdr7l77nx$.d...@40tude.net>,

tlvp <mPiOsUcB...@att.net> wrote:

> On Sat, 22 Sep 2012 08:47:46 +1000, dorayme wrote:
>
> > ...
>

> ...X-Face, at that :-) .

>
> Cheers, and bravo!, -- tlvp

You have a keen sense of relevance, homing straight into the most
important bits. You home in and quote the target and show how
comprehensively you have read and have taken an interest in the
business of the CSS. Bravo!

--
dorayme

Dr J R Stockton

unread,

Sep 22, 2012, 2:11:31 PM9/22/12

to

In comp.infosystems.www.authoring.stylesheets message <k3hrmn$kgu$1@news
.albasani.net>, Fri, 21 Sep 2012 15:54:43, Magnus Warker
<war...@mailinator.com> posted:

>I want an input field and a button at the right of it. The button
>should always be at the right of the containing div and the input field
>should be stretched over the available space:

This approximately fits the description, if not necessarily the
intention :
<div style="background:silver; width:75%; height:33%">AAA<br>
<input type=text style="width:87%;">
<input type=button value=">" style="float:right; width:12%;">
</div>

Note how one can vary the size of the div, for test, by heaving at a
corner of the window.

The true answer must be to calculate the width of the input control
using the arithmetic capabilities of the latest HTML or CSS actual or
proposed standard(s); and to test and publish your page only after
support for those features is sufficiently general.

--
(c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05.
Website <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

Magnus Warker

unread,

Sep 25, 2012, 12:25:38 AM9/25/12

to

Hi,

the input tag has different default value for the "display" property,
and setting "display:block" did not work for the input tag for some reason.

I was told that one should put a div around it in such cases... :-)

So this works perfect for me:

(http://jsfiddle.net/hpAEZ/41/)

Magnus