I'm working on a form with an horizontal layout:
<div id="container">
<label for="ta">description</label>
<textarea id="ta" name="ta" cols="50" rows="10"></textarea>
</div>
The problem is that what I want is the textarea take up all available space that the label leaves in the same line. If I try with width=100% it jumps to the next line:
div * {
vertical-align: middle;
}
textarea {
width: 100%;
height: 300px;
}
Any idea to implement it without assign a fixed space to each tag?
Like this? http://jsfiddle.net/4QbMr/
<div id="container">
<label for="ta">description</label>
<div class="twrap"><textarea id="ta" name="ta" cols="50" rows="10"></textarea></div>
</div>
label {
float: left
}
.twrap {
overflow: hidden;
padding: 0 4px 0 12px
}
textarea {
width: 100%;
height: 300px;
}
For table-like behaviour with CSS, display: table is your friend:
#container {
display: table;
width: 100%;
}
#container label, #container textarea {
display: table-cell;
vertical-align: top;
}
#container textarea {
width: 100%;
height: 300px;
}
Note that if you specify cols and rows attributes, they will override your CSS.
http://jsfiddle.net/N9hvU/27/
I think this is the behavior you're looking for. Even though I prefer to use divs/spans for element positioning; tables have the unique behavior (from my experience; don't know if this is in w3 specs or not) of not letting items go onto the next row; regardless of how big they become.
So, by setting the table row width to 100 percent, and the width of the cell w/the text area to 100%, the text area will consume any width available.
<div id="container">
<table>
<tr style="width:100%;">
<td>
<label for="ta">description</label>
</td>
<td style="width:100%;">
<textarea id="ta" name="ta"></textarea>
</td>
</tr>
</table>
</div>
You need to specify width for label.
like
label{ width: 20%; } textarea{ width:80%; }
I would instead put text for the label in the div and textarea in a different div and float both divs (and specify widths for both as well).
use a percentage less than 100% and leave out the cols in the textarea.try this http://jsfiddle.net/bingjie2680/Bw4MR/
update: try this: http://jsfiddle.net/bingjie2680/Bw4MR/3/ you need to use table to accomplish this job.
Related
I am trying to make a header with a search input and the name of the user next to each other. As the name of the user can be very long, the search input has to vary its width (as well as the username div). Like the image below:
<div class="container">
<div class="left" style="width: 80%">DYNAMIC WIDTH - search input</div>
<div class="right" style="width: 20%">SHORT NAME</div>
</div>
codepen is here.
I'm setting the width manually there (80% and 20%, or 70% and 30%), I want it to change dynamically according to the name's length and both div's have to sum 100%.
It looks very simple but I can't think of a way of doing it.
Thanks for any help!
It easier to set them as display: table-cell elements, since cells adjust their width to fit the parent.
If you set the left div to width: 100% it will always take the remaining space left by right div:
http://jsfiddle.net/fzmj5q2r/
.container {
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 100%;
background: red;
}
.right {
display: table-cell;
background: green;
white-space: nowrap;
}
Have you tried setting the margins to auto? Like so:
<div style="margin-left:auto; margin-right: auto;">Sample Text</div>
http://codepen.io/stephenbe/pen/KhDJw
All I did was have a wrap, inside your input and name ...name is over the input text
Tell me if this is a solution that works for you
.name {
position:absolute;
right:0;
top:0;
height:100%;
background:red;
padding:20px;
vertical-align:middle;
box-sizing:border-box;
}
How to make all inputs with the same width 100%?
if I set width 100% then input will be break on new line:
div > input {
width: 100%;
}
HTML:
<div class="wrapper">
<div>
<label>Label</label>
<input type="text" />
</div>
<div>
<label>Label</label>
<input type="text" />
</div>
<div>
<label>Label</label>
<input type="text" />
</div>
</div>
CSS:
.wrapper label {
float: left;
margin-right: 10px;
}
.wrapper div {
margin-bottom: 15px;
}
The desired result (JSFiddle):
.wrapper input {
width: 90%;
}
You cannot make it 100% without a new line because the Label will take some space of the screen. Remaining portion you can allot for the text fields.
You can do something like this: DEMO
Just remove the float statement, and make both the label and input display: inline-block.
.wrapper div {
margin-bottom: 15px;
}
div > input, div > label {
display: inline-block;
}
div > input {
width: 77%;
}
div > label {
width: 20%;
}
You can change the width of the input fields and/or the labels, but I think width: 77% is the highest value possible for the input fields (with the width of the labels set to 20%) to still display inline.
EDIT:
Do note that using CSS selectors based on HTML tagnames is not the ideal way of doing this. A better way is to give all labels and inputs a class (f.e. class="lbl" and class="inp" respectively), and selecting those, like underneath:
...
.lbl, .inp {
display: inline-block;
}
...
<pre>
.wrapper{width:100%; display:block}
.wrapper lable{width:30%; display:inline-block; position:relative}
.wrapper input{width:70%; display:inline-block; position:relative}
</pre>
Imagine the site:
[list][ iframe ]
both columns must be set next to each other, and has variable widths. I saw many solution, for example this: http://www.sitepoint.com/forums/showthread.php?615554-Floating-100-of-Remaining-Width but thats not the case. I dont have fixed widths, nor dynamics - the left column must be as thin as its content, and the iframe must fill all the remaining space.
jQuery is enabled to use for this case. In addition, how to detect, if the width of list changed?
http://jsfiddle.net/trgC3/
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
<br /><br />
<div class="lineContainer">
<div class="left"></div>
<div class="right"></div>
</div>
.lineContainer {
overflow: hidden; /* clear the float */
border: 1px solid #000
}
.lineContainer div {
height: 10px
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
try using display: table-cell
http://jsfiddle.net/YRTM9/
<div class='table-div'>
<div class='left'>
hello!
</div>
<div class='right'>
<iframe src='http://www.stackoverflow.com'>
</iframe>
</div>
</div>
with following CSS
.table-div {
display: table;
width: 100%;
}
.left {
display: table-cell;
vertical-align: top;
}
.right {
display: table-cell;
width: 100%;
}
.right iframe {
width: 100%;
}
I'm on board with those who think about table, but I'd rather add width: 100% only for column with iframe. Here is the spec
For each column, determine a maximum and minimum column width from the
cells that span only that column. The minimum is that required by the
cell with the largest minimum cell width (or the column 'width',
whichever is larger). The maximum is that required by the cell with
the largest maximum cell width (or the column 'width', whichever is
larger).
see demo
but if you need iframe to keep ratio, you'll have to wrap it div and use some hack
I would like to convert the table below into a series of DIV tags, styled with CSS. I have used text-align, and am familiar with display: block; and margin: auto type tricks, but nothing gives me the same result as this simple table layout:
<table width="100%">
<tr>
<td align="center">
<div>some objects</div>
</td>
</tr>
</table>
The issue with using the other approaches I'm familiar with is that they rely on me knowing the width of the objects I'm trying to align - which I don't. I want to be able to center arbitrarily wide objects, such as buttons and images.
margin: 0 auto; works perfectly anyway. If you are suffering from this, try to use text-align: center;
div{margin: 0 auto; text-align: center;} /* Replace div to your selector. */
After you could use text-align: left; if you like to others.
What you are doing there can be achieved with exactly this:
<div>some objects</div>
css:
div{
text-align:center;
}
No more fuzz needed. text-align basically centers the content, so you can place other elements into that div which get perfectly centered automatically.
Demo
You could use display:table;
http://jsfiddle.net/3Z4E8/
<div class"table">
<div class="row">
<div class="cell" style="text-align:center">
<div>some objects</div>
</div>
</div>
</div>
.table {
display: table;
width: 100%;
border: 1px solid blue;
}
.row {
display: table-row;
border: 1px solid red;
}
.cell {
display: table-cell;
border: 1px solid green;
}
See the docs.
You should be able to use a div like this...
HTML
<div class="example">
Some objects!
</div>
CSS
.example {
width: 60%;
margin: 0 auto;
}
I am slightly guessing that you are just using the table in order to make the div tag appear in the middle of the screen - the margin style does this.
To center child elements, which I guess are also div elements, you need to do two things.
.example {
text-align: center;
}
.example .button {
display: inline-block;
}
I can be more specific if you can show me your markup - maybe on a JSFiddle.
If you simply want your inner div to be in center of the outer container, you can simply do this (without using table):
<div class="parent">
<div>some objects</div>
</div>
Where .parent is:
.parent
{
text-align: center;
width: 100%;
}
See this fiddle.
You just have to use text-align:center CSS to center align your inner content.
Note that, parent container must have enough width to show visible spaces at the left and right ends.
I tried your code here with CSS and divs:
<html>
<head>
<style>
#td{
text-align:center;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<td align="center">
<div>some objects</div>
</td>
</tr>
</table>
<div id="table">
<div id="td">
Some objects
</div>
</div>
</body>
</html>
Please run the above code. Both are displaying in the same manner. If the above is not what you want, then please can you show what you tried?
You can use text-align: center; to center the objects in a parent container without knowledge about the width of the objects.
Use tabletodivconverter.com to convert html layout table to div tag and CSS. Did I mention that it's free?
I have a row in a web page. which has three controls
SomeText Input Button
It is like this
<div> SomeText <Input/> <img> </div>
In above img is floating right
Right now i have Input size 30, but in small resolution 30 is too big for the row and it splits in two.
I want input width to be maximum available instead of fixed width.
If i try size = 100% it takes whole row start to finish pushing text and img above and below in new row.
How do i need to format this row?
In the simple case:
<div>
<label for="thing">SomeText</label>
<input type="text" id="thing" />
<img />
</div>
div label { float: left; width: 20%; }
div input { width: 60%; }
This is assuming that SomeText will fit nicely into 20% of whatever width you've got.
But maybe it won't.
If you want to have fixed-size elements (eg. 8em each) at the sides and subtract those from the width of the input, you'd need to say 100% minus 16em. Unfortunately CSS has no such expression-calculating feature. The best you can manage is by adding wrappers to make 100% correspond to what you really want:
<div>
<label for="thing">SomeText</label>
<img />
<div>
<input type="text" id="thing" />
</div>
</div>
div label { float: left; width: 8em; }
div img { float: right; width: 8em; }
div div { margin-left: 8em; margin-right: 8em; }
div div input { width: 100%; }
It's a bit ugly as you have to fiddle the markup order for floats (or use absolute positioning). At this point you may be better off just giving up and using a table to get the desired width:
<table><tr>
<td class="label"><label for="thing">SomeText</label></td>
<td class="input"> <input type="text" id="thing" /></td>
<td class="img"> <img /></td>
</tr></table>
table { table-layout: fixed; width: 100%; }
tabel .label, table .img { width: 8em; }
table input { width: 100%; }
Somewhat-complex liquid-layout forms often exceed the capabilities of CSS Positioning and need help from tables.
(Either way, a bit of box-sizing on the input can also help to line things up.)