In the following snippet I want <span>1</span> to have the same width, as <input type="text" size="1" value="1" />
Same for second span and second input. And so on.
<!DOCTYPE HTML>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div>
<input type="text" size="1" value="1" />
<input type="text" size="1" value="2" />
<input type="text" size="1" value="3" />
</div>
</body>
</html>
How can I accomplish this with css?
UPD: Sorry, I did not make it clear, that it must be 2 rows. Row of spans and row of inputs
I assume that you want to retain the span elements inline behavior, but inline1 elements don't take width, so assign display: inline-block; to your span elements
div span {
display: inline-block;
width: 25px;
text-align: center;
border: 1px solid #f00;
}
div input[type=text] {
width: 25px;
}
Demo
1. Inline Elements
Note: As you might be aware, inline-block retains white space between the elements, to get rid of that, either call font-size: 0; on the parent element, or consider floating your elements to the left, and you don't have to use size attribute anymore, consider assigning width to the elements using CSS instead.
Also make sure you normalize your CSS for cross browser consistency.
Remove the size of one on the inputs and add a class.
(Just in case you dont know, 1 em = the current font-size)
<!DOCTYPE HTML>
<style>
.one {
width: 1em;
}
.two {
width: 1em;
}
.three {
width: 1em;
}
</style>
<body>
<div>
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
</div>
<div>
<input type="text" class="one" value="1" />
<input type="text" class="two" value="2" />
<input type="text" class="three" value="3" />
</div>
</body>
</html>
JsFiddled here :
span, input {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:222px;
height: 33px;
padding:0;
margin:0;
display:block;
float:left
}
BUT, by forcing the input in a border-box layout, you will have to deal with some other situations....
Somehow, i feel ashamed trying to help you without seeing first what you have tried.
Well if you want to remain your span's, you could use something like this:
#wrapper
{
height: auto;
width: 500px;
}
span, input
{
width: 30%;
display: inline-block;
}
jsFiddle
However, your layout is so close to a table layout. So why not use the <table> element:
<table>
<tr>
<td>
<label>1</label>
</td>
<td>
<label>2</label>
</td>
<td>
<label>3</label>
</td>
</tr>
<tr>
<td>
<input type="text" size="1" value="1" />
</td>
<td>
<input type="text" size="1" value="2" />
</td>
<td>
<input type="text" size="1" value="3" />
</td>
</tr>
</table>
jsFiddle
Related
I am very new to HTML and hesitate before posting this question, because it very simple looking problem, but I am not getting good answer after Googling.
So following is my simple form code, I wanted to keep both the form input elements in different line. Problem is I literally need to use hardcoded 250px width to div, so that element will code in different lines.
How do I improve my code so it will be portable across different browsers and screens?
Secondly, distance between all the lines in very less, they are actually collapsing on each other. How to give more vertical space to elements?
<form id="frm">
<div style="width: 250px;">
<label>Name </label>
<input type="text" required="required" />
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
<input type="submit" value="submit" />
</div>
</form>
If you want each label/input pair to appear on a line of its own, you should make that happen in markup using elements that actually cause line breaks, such as wrapping each of the pairs in a div or p element, or using <br> between them, or making each of them a row of a table. It is very unreliable to set just a width on a block and expect browsers to automatically wrap lines. Consider e.g. what happens in your example if the user sets font size to 60px (maybe due to eyesight problems).
To set vertical spacing, use CSS. There are many ways to do that, and the techniques partly depend on the markup chosen. Here is one example:
<style>
td { padding-bottom: 0.5em; }
</style>
<form id="frm">
<table>
<tr>
<td>
<label for="name">Name</label>
<td>
<input id="name" name="name" type="text" required="required">
<tr>
<td>
<label for="email">Email</label>
<td>
<input id="email" name="email" type="email"
placeholder="someone#example.com">
<tr>
<td colspan="2">
<input type="submit" value="submit">
</table>
</form>
Float the label and inputs and specify 50% width with border-box box sizing method. You also need a wrapper element for each label-input pair which is used to contain the floats.
form > div {
width: 250px;
margin: 1em 0;
overflow: hidden;
}
label,
input {
display: block;
float: left;
width: 50%;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
}
<form id="frm">
<div>
<label>Name</label>
<input type="text" required="required" />
</div>
<div>
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
</div>
<div>
<input type="submit" value="submit" />
</div>
</form>
1) you can define the diplay style for the label to block, this will bring label onto new line,
http://jsfiddle.net/naeemshaikh27/rvg4jdbo/
label{
display:block;
}
<form id="frm">
<div>
<label>Name </label>
<input type="text" required="required" />
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
<input type="submit" value="submit" />
</div>
</form>
2) Or if you want to keep the label with the input element, then just add a div element between them http://jsfiddle.net/naeemshaikh27/rvg4jdbo/1/
If each element (labels and inputs) has to have own line, set them display: block;
#frm label, #frm input {display: block}
or
#frm div > * {display: block;}
If you need to have the label and input on one line, you can try to work with floats and clear.
label, input {float: left;}
label {width: 80px; clear: left;} /* set width to align inputs and clear to 'set' a new line */
First use block elements for vertical placement of elements.
label{
display:block;
}
Use width in percentages not pixels if you can. It will keep it better, specially if they are in same line(inline).
<p style="width:50%"> </p> <p style="width:50%"> </p>
Can use media queries too for different resolutions.
label tags and input tags are inline by default. You can set them both to display: block to make them stack. You can also add some margin to space them out:
label, input{
display: block;
margin: 10px 0;
}
EXAMPLE 1
OR
If you want the label and input inline but each one stacked, you can simply wrap them with a block element like a div:
<form id="frm">
<div>
<div>
<label>Name </label>
<input type="text" required="required" />
</div>
<div>
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
</div>
<input type="submit" value="submit" />
</div>
</form>
EXAMPLE 2
This is my code where I am trying to put 3 Buttons in parallel.
<!DOCTYPE html>
<html>
<head>
<div class="aParent">
<div id="left_side">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<label for="q">Make A new folder:</label><br>
<input id="q" name="q" type="text" /><br>
<input name="commit" type="submit" value="Submit" />
</form></div>
<div id="centre">
<input id="btn" type="button" value="Save" action="update" alignment="center" />
</div>
<div id="right_side">
<form accept-charset="UTF-8" action="/target" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<input name="commit" type="submit" value="Customize Weight" />
</form></div>
</div>
<style type="text/css">
#left_side {
float: left;
}
#center_s {
margin:50px 50px;
width: 65px;
}
#right_side {
float: right;
}
</style>
Now if I change margin values save button position is not changing . Any guesses for changes to be made to put 3 buttons in parallel.
Add this:
#centre{ float:left;}
If you're looking to centre this div, you will need to add an appropriate margin-left value, so long as your parent container is of fixed width.
add display:inline-block to all the three container div and remove the float property.
#left_side {
display: inline-block;
}
#center_s {
margin: 50px 50px;
width: 65px;
display: inline-block;
}
#right_side {
background: Green;
display: inline-block;
}
Js Fiddle Example
You have some complex html structure to do this simple thing as you can achieve without using the css and just you need to put simple markup like this
<div class="aParent">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get">
<div id="label">
<label for="q">Make A new folder:</label>
</div>
<div id="input-control">
<input id="q" name="q" type="text" />
</div>
<div id="button-control">
<input name="commit" type="submit" value="Submit" />
<input id="btn" type="button" value="Save" action="update" alignment="center" />
<input name="commit" type="submit" value="Customize Weight" />
</div>
</form>
</div>
Js Fiddle - Simple design
Can you just put all 3 divs {float: left} and then add a small margin to them to separate them?
You have two options for this:
1.You can float the elements you want to position. Add a line in the css code, for example
#center_s {
margin: 50px 50px;
width: 65px;
float: left;
}
This will change the element model from box to inline.
Using float will stack the elements next to one another.
You can read this great article about float property - http://css-tricks.com/all-about-floats/
You can change the display property to inline-block - add a new css property - display: inline block; to all three elements.
This will change the div from block model to inline model!
Another great article about display property - http://www.impressivewebs.com/difference-block-inline-css/
Hope this answered your question.
I've been having quite a few issues with dynamic div tags that take into account static div tags. Here's the 2 styles I'm currently using:
Dynamic Div tag:
div.Display {
width: 95%;
color: #333333;
margin-left: 360px;
background-color: #333333;
height: 100%;
margin-right: 0px;
float: left;
}
Static Div tag:
div.LoginBox {
box-shadow: 0px 0px 3px 0px #000000;
width: 350px;
height: 350px;
background-color: #F0F0F0;
border: 1px solid #DADADA;
clear: none;
float: left;
color: #000000;
margin-left: 0px;
}
The issue I'm having is that the dynamic div tag won't size properly. It's taking into account the margin left (360px), but it's also defaulting to the bottom of the LoginBox div tag (so it's like it's taking a top margin of 350px). Here's the actual application of the Div tag: http://ordwurkz.com/
And the HTML:
<body onload="FP_preloadImgs(/*url*/'images/hover/minimize.png',/*url*/'images/click/minimize.png')">
<div class="Page" id="Page">
<div class="LoginContainer" id="LoginContainer">
<div id="divLoginTitleBar" class="TitleBar">
Login
<div id="divTitleButtonBox" class="TitleButtonBox">
<img id="LoginMinimize" alt="Button Text" onmousedown="FP_swapImg(1,0,/*id*/'LoginMinimize',/*url*/'images/click/minimize.png')" onmouseout="FP_swapImg(0,0,/*id*/'LoginMinimize',/*url*/'images/minimize.png')" onmouseover="FP_swapImg(1,0,/*id*/'LoginMinimize',/*url*/'images/hover/minimize.png')" onmouseup="FP_swapImg(0,0,/*id*/'LoginMinimize',/*url*/'images/hover/minimize.png')" src="images\minimize.png"/><img id="LoginClose" alt="Button Text" onmousedown="FP_swapImg(1,0,/*id*/'LoginClose',/*url*/'images/click/close.png')" onmouseout="FP_swapImg(0,0,/*id*/'LoginClose',/*url*/'images/close.png')" onmouseover="FP_swapImg(1,0,/*id*/'LoginClose',/*url*/'images/hover/close.png')" onmouseup="FP_swapImg(0,0,/*id*/'LoginClose',/*url*/'images/hover/close.png')" src="images\close.png"/></div>
</div>
<div id="divLoginBox" class="LoginBox">
<div id="divLoginContent" class="LoginContent">
<img alt="System Image" src="images/loginsplash.png" />
<form method="post" action="processor\login_processor.do" id="frmLogin">
<table id="tblLoginContent" class="LoginContent">
<tr>
<td>Username:</td>
<td>
<input maxlength="50" name="txtUsrName" size="20" type="text" /></td>
</tr>
<tr>
<td>Password:</td>
<td>
<input maxlength="24" name="txtPassword" size="20" type="password" /></td>
</tr>
<tr>
<td><input name="btnLogin" type="submit" value="Login" /></td>
<td><input name="btnReset" type="reset" value="Reset" /></td>
</tr>
</table>
</form>
</div>
<div class="PlatformVersion">V1.0.0.0</div>
</div>
</div>
<div class="Display"></div>
</div>
<div class="Footer">Contact Us | Terms of Service</div>
</body>
Is there any chance you could put your .LoginBox inside of your .Display, then remove the margin-left on .Display so that .LoginBox just floats to the left of the content in .Display?? Hard to really say without seeing your HTML.
I am pulling some content from a webservice that creates select lists with a label as a form of title. Rules are that the select lists must line up and stack on top of each other, and take up the rest of the screen real estate that the label does not take up.
I can do this by creating them with tables, but am looking for a more pure CSS route if possible.
tried using a combination of divs with display: table, display: table-row, display: table-cell but I couldn't get the stacking effect to work properly.
this is the effect I am looking for:
.horizontalFill {
width: 100%;
}
.noWrap {
white-space: nowrap;
}
<table class="horizontalFill">
<tr>
<td class="noWrap">
<label>some dynamic text</label>
</td>
<td class="horizontalFill">
<select class="horizontalFill">
</select>
</td>
</tr>
<tr>
<td class="noWrap">
<label>
other dynamic text here
</label>
</td>
<td class="horizontalFill">
<select class="horizontalFill"></select>
</td>
</tr>
</table>
You can try something similar to this:
label {
display: block;
overflow: hidden;
padding-bottom: 5px;
}
label .label {
display: block;
float: left;
width: 150px;
}
label .input {
display: block;
margin-left: 160px;
}
label select {
width: 100%;
}
<label class="row">
<span class="label">Label name one</span>
<span class="input">
<select>
<option>Select item</option>
</select>
</span>
</label>
<label class="row">
<span class="label">Label name two</span>
<span class="input">
<select>
<option>Select item</option>
</select>
</span>
</label>
<label class="row">
<span class="label">Label name three</span>
<span class="input">
<select>
<option>Select item</option>
</select>
</span>
</label>
It involves the label column being set to a static width, though, so it may not work out for you if you need that column to stretch or shrink. The label text will wrap to the next line without any issue, though.
I have the following:
<div style="float: left; padding-right: 1%;">
<label class="editor-label" for="BrowserTitle">Browser Title</label>
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
</div>
I want to make the input field appear below the label. Right now it just follows the label on the same line. Is there a way that I can do this with CSS?
Set
display: block;
on either the label or the input.
Note: As pointed out in a comment, you'd also need to remove the float style from your containing div if you want the divs to appear below each other.
Why not remove the float on the DIV and make the LABEL a block?
<div style=" padding-right: 1%;">
<label class="editor-label" style='display:block;' for="BrowserTitle">Browser Title</label>
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
</div>
Demo : http://jsfiddle.net/h7mnJ/
You can put the label and the input in their own divs or set each to display: block in CSS.
put label inside a div:
<div style="float: left; padding-right: 1%;">
<div>
<label class="editor-label" for="BrowserTitle">Browser Title</label>
<div>
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
See the results at: http://jsfiddle.net/uUEn8/
Also you can set display:block on either label or input.
You can put display: block on the label:
.editor-label {
display: block;
}
Example: http://jsfiddle.net/ambiguous/b5UrP/
Or you could float both the label and input to the left and put clear: left on the input:
.editor-label {
float: left;
}
.editor-field {
clear: left;
float: left;
}
Example: http://jsfiddle.net/ambiguous/hxhCx/
As all of the CSS solutions have been exhausted, here's a HTML solution with the <br /> element:
<div style="float: left; padding-right: 1%;">
<label class="editor-label" for="BrowserTitle">Browser Title</label>
<br />
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
</div>