I have the following html:
<div id="holder">
<span>Search for</span>
<input id="srchfor" />
<span>near</span>
<input id="srchin" />
<span>submit</span>
</div>
The containing div is fixed width. The width of the 3 spans will depend on font size. Is it possible to make the two inputs take a width so that they are both equally sized, and they consume all the remaining space in holder? Or does this require using javascript?
Edit: My aim is to have the 5 elements all on one line, rather than split over several lines.
This is an old post but I came across it and figured I would answer it for the next person. Here is a CSS/HTML snippet that should resolve this issue. It is kind of like a HTML5 flexbox but without HTML5 or a flexbox. You can add width to whatever 2 sections needed and the third will fill the remaining void.
<style type="text/css">
.form-group {
border: 1px solid black;
margin-bottom: 20px;
padding: 10px;
width: 75%;
}
.a {
float: right;
margin-left: 10px;
width: 30%;
}
.a input {
width: 100%;
}
.b {
float: left;
margin-right: 10px;
width: 33%;
}
.b input {
width: 100%;
}
.c {
display: block;
overflow: hidden;
}
.c input {
width: 100%;
}
</style>
<div id="wrapper">
<div class="form-group">
<span class="a">
<label>Thing 1</label><br />
<input type="text" />
</span>
<span class="b">
<label>Thing 2</label><br />
<input type="text" />
</span>
<span class="c">
<label>Thing 3</label><br>
<input type="text" />
</span>
</div>
<div class="form-group">
<div class="a">
<label>Thing 1</label><br />
<input type="text" />
</div>
<div class="b">
<label>Thing 2</label><br />
<input type="text" />
</div>
<div class="c">
<label>Thing 3</label><br>
<input type="text" />
</div>
</div>
</div>
Well, you could change the display type from display: inline to display: block to make them fill space. But I don't know if the inline is an requirement.
You have to choose a fixed width for the span elements, and use the display:inline-block property like in this example.
Related
I've seen working examples of middle-aligning a single line of text next to an image, like so:
<div>
<img style="vertical-align:middle" src="testImage.png" />
<span style="">This works</span>
</div>
But I need to align two spans, one above the other, because they will eventually need to have different styles, and the following results in the second span being rendered beneath the image:
<div>
<img style="vertical-align:middle;" src="testImage.png" />
<span>This doesn't work</span><br />
<span>I'm annoyed</span>
</div>
NOTE: I did experiment with using float:left; for the image, which does work to a degree, but fails when the text is long enough that it requires the div to expand (it does not factor in the width of the image and produces an undesired text-wrap)
EDIT: This is an example of the solution that worked for me, based on the answer given by aje, containing a small tweak of adding vertical-align: middle; to the div tag. I've included this as an edit, rather than add my own answer, because I'd like to credit aje with the answer that helped me:
<div style="border: solid 2px green;">
<img style="border: solid 2px black; vertical-align: middle; width: 32px; height: 32px;" src="https://dummyimage.com/300.png/09f/fff" />
<div style="vertical-align: middle; display: inline-block">
<span>This now works properly.</span><br />
<span>Thanks for the help!</span>
</div>
</div>
Wrap span under a div below is a snippet
<div>
<img style="vertical-align:middle;" src="https://dummyimage.com/300.png/09f/fff" />
<div style="display:inline-block"><span>This doesn't work</span><br />
<span>I'm annoyed</span>
</div>
</div>
div {
display:table;
}
div img {
float:left;
margin-right: 10px;
width: 200px;
}
div p {
display:table-cell;
vertical-align:middle;
}
div span {
display: block;
}
div:after { /* it's always good practice to clear floats */
content: '';
display: block;
clear: both;
}
<div>
<img style="vertical-align:middle;" src="http://lorempixel.com/output/animals-q-c-640-480-8.jpg" />
<p>
<span>This doesn't work</span>
<span>I'm annoyed</span>
</p>
</div>
I am trying to create a form with multiple rows. Each row has an optional input field followed by a mandatory button. The buttons should line up vertically - something like this:
_____________ _______________
| input 1 | | button 1 |
|___________| |_____________|
_______________
| button 2 |
|_____________|
I tried to float the button left with a fixed left margin, but doing so moves the input field to the right of the button - even though the input field appears first in the markup:
<div>
<input type="text">
<button>Action 1</button>
</div>
Please see my jsfiddle here. Why is this happening and what's the correct solution?
You need thee div container to do this as shown in this jsFiddle.
HTML Code
<div class="container">
<div class="left">
<button>
</div>
<div class="right">
<button>
</div>
</div>
CSS Code
.container {
width: 190px;
height: 22px;
margin: 0;
}
.left {
float: left;
width: 95px;
height: 22px;
}
.right {
float: right;
width: 95px;
height: 22px;
}
Use rows.
<div class="row-rap">
<div class="right">
<input type="text">
</div>
<div class="left">
<input type="button" value="Action 1">
</div>
</div>
<div class="row-rap">
<div class="right">
<input type="text">
</div>
<div class="left">
<input type="button" value="Action 2">
</div>
</div>
With the following styling.
div.row-rap {
width: 100%;
}
div.row-rap .right, div.row-rap .left {
width: 50%;
float: left;
}
Here's an alternative, the margins and colors may need modification. See jsfiddle link for sample result.
It has a left-aligned label and right-aligned input (button style) in a div, for each line. The non-breaking space is needed as a placeholder in the span element that represents an "empty label".
http://jsfiddle.net/qallar/kfgCb/5/
The html is:
<div class='line'>
<span class='formlabel'>label 1</span>
<input class='formbutton' type='button' value='button 1 text ' />
</div>
<div class='line'>
<span class='formlabel'> </span>
<input class='formbutton' type='button' value='button 2 text' />
</div>
and the css:
.line
{
display: block;
background-color: #ddd; /* also try #fff */
margin: 0px;
padding: 2px;
height: 30px;
width: 200px;
}
.formlabel
{
float: left;
background-color: #eee; /* also try #fff */
margin: 0px;
padding: 2px;
width: 75px;
height: 100%;
clear: both;
}
.formbutton
{
float: right;
background-color: #0f0;
margin: 0px;
padding: 0px;
width: 100px;
height: 100%;
}
The input field is flying to the right of the button because it is an inline element. Float works on block elements only, inline elements will always flow around the floated elements. This explains the behavior in the original jsFiddle.
Having said that, even if I put display:block on the input element it still behaves like inline. I was able to make the basic concept work for a div though, which is a true block element. See the jsFiddle here.
<div class="row">
<button>Action 1</button>
<div class="in"></div>
</div>
.row {
clear: both;
}
.in {
background-color: green;
height: 24px;
width: 100px;
}
button {
float: left;
margin-left: 110px;
width: 150px;
}
The only workaround seems to be the one offered by Musa (see this jsFiddle) where he aligns the buttons to the right using text-align and limiting the width of the div.
I am not a CSS expert and usually this task works for me using table
<table>
<tr><td>Optional Input</td><td>Button</td></tr>
<tr><td>Optional Input</td><td>Button</td></tr>
</table>
if table by some reason is not an option you can use div/span
<div style="display: table-row">
<span style="display: table-cell">Optional Input</span>
<span style="display: table-cell">Button</span>
</div>
It will about like this
using Block formatting context https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context
jsfiddle code: http://jsfiddle.net/EeNFH/9/
the html code:
<div class="inp">
<input type="text">
</div>
<div class="btns">
<p><button>Action 1</button></p>
<p><button>Action 2</button></p>
</div>
and the styles:
input {
width: 100px;
}
button {
width: 150px;
}
.inp{
float:left;
}
.btns{
overflow:hidden;
}
I am trying to put on the same line $('.prize-item input') and $('.prize-edit')
Here is the DOM structure (1) and the CSS code (2).
I tried to sue the display:inline-block with no success.
The prerequisite is the following:
1) You must not use position absolute.
2) Resizing the screen, the distance between the button and the input box should not change.
3) The DOM structure should be changed only if it is not possible to obtain the result I requested with CSS.
Demo: http://jsfiddle.net/jBme9/8/
(1)
<div class="control-group">
<div class="controls">
<div class="prize-edit">
<button type="button" class="btn" data-toggle="collapse" data-target="">Edit Same line</button>
</div>
<div class="prize-item">
<div class="control-group ">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="form-prize-item-name" value="prize same line">
</div>
</div>
</div>
</div>
</div>
(2)
.prize-edit {
float: right;
display: inline-block;
}
.prize-item input {
float: left;
display: inline-block;
}
You can use relative positioning. Please adjust these values for your real page.
Demo
Code:
.controls button {
float: right;
position:relative;
top:38px;
right:17px;
}
I used pixels 'cause you're using pixels, but this can be done with ems too.
To push the button outside the input, add another class to the input's wrapper. Let's call it "controlsWrapper".
So that you'll have in html:
<div class="controls controlsWrapper"><input...other stuff...></div>
And in CSS
.controls button {
float: right;
position:relative;
top:38px;
}
.controlsWrapper {
box-sizing: border-box;
width:100%;
padding-right:40px; /* width of the button + some space */
}
Check the demo
I think it´s not possible with this DOM structure. You want to have something like this:
<div class="aWrapper">
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<div class="prize-edit">
<button type="button" class="btn" data-toggle="collapse" data-target="">Edit Same line</button>
</div>
<div class="prize-input"><!-- I renamed the class! -->
<input type="text" class="form-prize-item-name" value="prize same line">
</div>
</div>
</div>
</div>
additional:
.label { diplay: block; }
.prize-edit { float: right; width: 20%; // adjust with paddings etc. }
.prize-input { float: left; width: 80% // adjust ... }
I have aligned textboxes with their labels using the line-height method proposed here. I didn't simply use the width attribute because I wanted it to dynamically adjust if the label text changed. To get Firefox (haven't tried other browsers) to apply the line height to the column with the inputs, I had to use this hack (note the <div class="hack">):
HTML
<div class="textbox-column label">
<div>User Name:</div>
<div>Password:</div>
</div>
<div class="textbox-column input">
<div><div class="hack">#</div><input type="textbox" name="username" /></div>
<div><div class="hack">#</div><input type="password" name="password" /></div>
</div>
<div class="clear"></div>
CSS
div.clear {
clear: both;
}
.textbox-column {
line-height:1.6em;
}
.textbox-column.label {
float: left;
margin-right:1em;
}
.textbox-column.input {
float: right;
}
.textbox-column .hack {
display: inline;
width: 1em;
margin-right: -1em;
}
Can any one suggest a cleaner solution?
Here is a live demo of this code: http://jsfiddle.net/fbe7P/
CSS works best when things are grouped together, so I would group the controls into rows.
Also, the plus side of this method is that it degrades well for small screen sizes.
HTML:
<div class="row">
<label for="username">Username:</label>
<input type="text" id="username" />
</div>
<div class="row">
<label for="password">Password:</label>
<input type="password" id="password" />
</div>
CSS:
.row {
overflow: auto;
}
.row label {
float: left;
min-width: 100px;
}
.row input {
float: right;
}
Demo: http://jsfiddle.net/ezp9H/2/
I have a field_wrapper class div which contains the 3 sub divs field_label, field_input and field_error
I need to put the field_label, field_input side by side and field_error below the first two.
Please see below css code to know how i achieved this, My problem is Its is not working in IE7. clear both applied to the field_error is not working.
Even after googling for a long time i can't find a proper method to fix this without adding the HTML mark-up. Please advice css tip or any other method to avoid extra markup code
.field_wrapper
{
clear:both;
}
.field_label
{
float:left;
width:40%;
}
.field_input
{
float:left;
width:40%;
}
.field_error
{
clear: both;
color:#FF0000;
float: right;
text-align:left;
width: 60%;
}
<form method="post" action="http://localhost/locations/add">
<div class="field_wrapper">
<div class="field_label">
<label for="location_add_name">Name</label>
</div>
<div class="field_input">
<input type="text" id="location_add_name" value="" name="name">
</div>
<div class="field_error">
<p>The Name field is required.</p>
</div>
</div>
<div class="field_wrapper">
<div class="field_label">
Address
</div>
<div class="field_input">
<textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
</div>
<div class="field_error">
</div>
</div>
<div class="form_submit">
<input type="submit" value="Add" name="submit">
</div>
</form>
If you do not want to remove the float left. You can use this wrapper code
.field_wrapper { display: inline-block; }
.field_wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .field_wrapper { height: 1%; }
.field_wrapper{ display: block; }
It works for me every time (IE6 as well)
Update:
I looked at this again, and changed the markup a bit, also made it valid xhtml.
Just put the class on the P tag, you dont need an extra div.
.field_wrapper
{
clear:both;
}
.field_label
{
float:left;
width:40%;
}
.field_input
{
float:left;
width:40%;
}
.field_error
{
clear: both;
color:#f00;
width: 60%;
}
<form method="post" action="http://localhost/locations/add">
<div class="field_wrapper">
<div class="field_label">
<label for="location_add_name">Name</label>
</div>
<div class="field_input">
<input type="text" id="location_add_name" value="" name="name" />
<p class="field_error">The Name field is required.</p>
</div>
</div>
<div class="field_wrapper">
<div class="field_label">Address</div>
<div class="field_input">
<textarea id="location_add_address" rows="12" cols="90" name="address"></textarea>
</div>
</div>
<div class="form_submit">
<input type="submit" value="Add" name="submit" />
</div>
</form>
Remove float:right from 'field_error'
let me tell you one thing first. if you having floating content in a container the container never contain it untill and unless you set the container overflow property to hidden or also make it float you. like
.field_wrapper
{
clear:both;
overflow:hidden;
}
Now it contain all floating element. Now for your error div as you are floating you elements to left, so make clear:left only and it will work.
Thanks