I am breaking my head over this seemingly easy problem, perhaps someone could help. I would like an arbitrary amount of inputs, with labels, stacked horizontally on one line like in the image.
There are a number of ways to go about this. Personally, I like using tables for this type of data (but if it's not tabular data it is recommended to use other means like DIVs). I'll try to show a quick example of a table:
Table:
<table width="100%" cellpadding="0" callspacing="0" border="0">
<tr>
<td width="200">LABEL 1</td><td> </td> <!-- this is the padding table cell -->
<td width="200">LABEL 2</td><td> </td>
<td width="200">LABEL 3</td><td> </td>
</tr>
</table>
Example Table JSFiddle
Using Div's are slightly more involved, as they are inline by default; you would get your labels on different lines. You can look into CSS attributes like "display: table-cell" to achieve the same results as the above, otherwise you can look into absolute and relative positioning using CSS.
<div width="100%">
<div style="position:absolute; top:0px; width: 33%;">LABEL 1</div>
<div style="position: absolute; top:0px; left: 33%; width: 33%;">LABEL 2</div>
<div style="position: absolute; top:0px; left: 66%; width: 34%;">LABEL 3</div>
</div>
However, there are still some problems with this as it's assuming your layout is 100% the width of the page/browser viewing area.
Generally, when you want something to "take up the remaining space" (like your input box) you have 3 options:
Flexbox, which would be ideal, but not widely supported yet.
Tables, like explained in Kevin Reids answer
Establish separate Block Formatting Contexts, example below
HTML
<div class="container">
<div class="field">
<label for="in1">Label</label>
<div><input type="text" id="in1"></div>
</div>
<div class="field">
<label for="in2">Label</label>
<div><input type="text" id="in2"></div>
</div>
<div class="field">
<label for="in3">Label</label>
<div><input type="text" id="in3"></div>
</div>
</div>
CSS
.container {
padding: 20px;
background: #999;
overflow: hidden; /* for float containment */
}
.field {
padding: 4px;
background: #fff;
border: 2px solid #999;
float: left;
width: 33%;
-webkit-box-sizing: border-box; /* 33% effective width */
-moz-box-sizing: border-box;
box-sizing: border-box;
}
label {
float: left;
width: 100px; /* fixed width of label */
}
.field div {
overflow: hidden; /* create a new Block Formatting Context */
}
/* inputs fill the new BFC */
input {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
There is only 1 added layout element, which would be the div that wraps the input. This is because input doesn't want to behave like a block element, even if you tell him to do so.
fiddle: http://jsfiddle.net/RqzJC/
EDIT: updated to address fixed width labels. (arbitrarily set to 100px)
http://jsfiddle.net/SebastianPataneMasuelli/XHrSr/
HTML:
<div>
<div>
<div class="label">LABEL</div>
<div>filler</div>
</div>
<div>
<div class="label">LABEL</div>
<div>filler</div>
</div>
<div>
<div class="label">LABEL</div>
<div>filler</div>
</div>
</div>
CSS:
div { width: 100%; }
div div {
width: 33%;
background-color: salmon;
float: left;
position: relative
}
div div div {
background-color: pink;
position: relative;
z-index: 2
}
div div div:last-child {
background-color: red;
position: absolute;
width: 100%;
z-index: 1
}
.label { width: 100px }
The best option for this type of classic “GUI widget layout engine” layout is the CSS 3 flexbox feature, but browser support is not yet consistent enough that I would recommend using it.
Absent that, flexible "fill space" layouts generally require table layout. Thanks to CSS display, there is no particular necessity to write the table as a HTML table. The following example is similar to your example image:
<html><head>
<title>example</title>
<style type="text/css">
ul.myform { display: table; width: 100%; margin: 0; padding: 0; border-collapse: collapse; }
.myform li { display: table-cell; border: .1em solid gray; }
.myform li > * { display: table; width: auto; margin: .4em; }
.myform label { display: table-cell; width: 1%; padding-right: .4em; white-space: nowrap; }
.myform input { display: table-cell; width: 100%; }
.col1 { width: 33%; }
.col2 { width: 33%; }
.col3 { width: 34%; }
</style>
</head><body>
<form>
<ul class="myform">
<li class="col1"><span><label for="a">Label</label> <input id="a" name="a"></span></li>
<li class="col2"><span><label for="b">Label</label> <input id="b" name="c"></span></li>
<li class="col3"><span><label for="c">Label a bit longer</label> <input id="c" name="c"></span></li>
</ul>
</form>
</body></html>
There is exactly one element introduced solely for layout in the markup: the <span> is needed to serve as the table within the table-cell.
The width: 1%; of the label cell is not an actual dimension but simply to force it as narrow as possible (an absolute rather than percentage with will not have the same effect). The white-space: nowrap; prevents the label from getting wrapped due to this.
The .col1 and so on are for specifying the widths of the columns.
Related
I want to create a search box, by using a select and an input.
I have 2 issues:
I want the search input to fill all the remaining space(see the grey background);
Select and input to be connected, no space between them(because of DOM space)
Because I need to work older IE, I can't use flexbox or grid; I tried also float.
Looking for a solution where select and input width is flexible, not fixed;
I tried a trick, (in comments, width: 1%) that sometimes works, but not with select;
.searchbox {
display: table;
width: 500px;
background-color: grey;
}
select, .form-group{
display:table-cell;
margin:0;
}
/*select {
width:1%;
space:nowrap;
}*/
<div class="searchbox">
<select>
<option>Abras</option>
<option>Brat</option>
</select>
<div class="form-group">
<input placeholder="Search" name="q""/>
<span>icon_placeholder</span>
</div>
</div>
According to this float: will not work in IE9, but if you use -ms- it should work in IE10 +. I was reading around and although the website I listed said it's not supported in IE9 im finding articles of people being able to use it. Let me know if you have any issues with the following code.
img {
width: 100%;
height: 100%;
}
.wrapper {
overflow: hidden;
width: 100%;
max-width: 500px;
}
.left {
float: left;
-ms-float: left;
overflow: hidden;
}
.options {
width: 75px;
}
.search {
width: calc(100% - 110px);
}
.image {
width: 35px;
height: 35px;
}
.style {
padding: 8px;
margin: 0;
}
.full {
width: calc(100% - 25px);
}
<div class="wrapper">
<div class="left options">
<select class="left style">
<option>Abras</option>
<option>Brat</option>
</select>
</div>
<div class="left search">
<input class="style full" placeholder="Search" name="q" />
</div>
<div class="left image">
<img src="https://seeklogo.com/images/C/company-leaf-and-flames-logo-2ECEE07FDD-seeklogo.com.png" alt="img" />
</div>
</div>
Changing the display for the select to display: inline-block; aligns everything to the left.
This won't center align the fields vertically if you choose to change the height later, but I think it solves your problem.
select, .form-group {
display: inline-block;
margin: 0;
}
You can float the select and then turn the .form-group div into a block formatting context, doing this will make it respect the floats position and fill the remaining space making it dynamic. See the demo below and click here to read more about block formatting contexts
.searchbox {
display: table;
width: 500px;
background-color: grey;
}
/* select, .form-group{
display:table-cell;
margin:0;
} */
select {
float: left;
}
.form-group {
overflow: auto;
}
input {
width: 100%;
box-sizing: border-box; /* keep box model properties subtracted from width not added */
}
<div class="searchbox">
<select>
<option>Abras</option>
<option>Brat</option>
</select>
<div class="form-group">
<input placeholder="Search" name="q"/>
<span>icon_placeholder</span>
</div>
</div>
There are many ways to turn an element into a block formatting context, I have opted to set the overflow property to hidden.
If you want an element to sit on the right of .form-group make sure to add it before the .form-group element in your mark up and float it right. The form-group will then fill the remaining space in the middle of the 2 floated elements.
Lastly when using floats don't forget to clearfix your container
I'm try put a table in fieldset, where table has a width 2200px fixed, and table parent (a div) has css property overflow-x: auto; width: 100%
Structure like this:
fieldset:
div:
table:
But scroll of div is not showing, how to can I fix this problem?
jsBin: http://jsbin.com/sazogamiha/edit?html,css,output
You can use width: 100vw; instead of width: 100%;.
Jsbin
#pai {
width: 100vw;
overflow-x: auto;
float: left;
white-space: nowrap;
}
Or you have to give min-width: 0; to fieldset. fieldset has min-width: -webkit-min-content; by default so you override that.
fieldset {
width: 100%;
min-width: 0;
}
Jsbin
Is it possible that you're using the comma (",") instead of the semicolon (";") to separate css properties?
About widths.
Some tags do not work well for your issue, and one of those is fieldset
Try this
<div class="wrapper">
<div class="container">
<fieldset>
<table>
<tr>
<td>...</td>
</tr>
</table>
</fieldset>
</div>
</div>
And this CSS
div.wrapper {
width: 100%;
}
div.container {
overflow-x: auto;
width: 90%;
}
table {
width: 2000px;
}
table td {
border: 1px solid black;
}
This is a very basic question but I think inputs behave strangely so im struggling to find a solution.
I have a liquid width layout. I need a link to sit to the side of an input. I need the input to take up all the available width:
Information Link
<input type="number" class="form-control form-control-default-new" placeholder="400">
If the input was a div I would just float the link the right and not have to do anything else. However if I make the input display block it wont take up the full width. And If I make it width 100% then it takes up the whole line and the link no longer sits along side it.
If you can wrap that input in a div container, you can achieve that effect pretty easy:
float right for the a tag
overflow: hidden to the div container of the input
set input width to 100%
done.
Check out the demo here
a{
float: right;
}
div{
overflow: hidden;
padding-right: 20px;
}
input{
box-sizing: border-box;
width: 100%;
}
Information Link
<div><input type="number" class="form-control form-control-default-new" placeholder="400"/></div>
Example with display: block and float: left :
* {
box-sizing: border-box;
}
a, input {
display: block;
float: left;
}
a {
text-align: center;
width: 20%
}
input {
width: 80%
}
<input type="number" class="form-control form-control-default-new" placeholder="400">
Information Link
You can try using display: table and display: table-cell. The white-space: nowrap CSS prevents the second cell (with the link) from line-breaking and the width: 100% on the first cell makes that cell grow as large as the table will allow it to (i.e. until the cell runs into the second cell with the nowrap restriction.
JSFIDDLE DEMO
CSS:
* {
box-sizing: border-box;
}
input {
width: 100%;
}
.container {
width: 100%;
display: table;
}
.container div {
display: table-cell;
white-space: nowrap;
}
.link {
text-align: right;
padding-left: 10px;
}
.input-box {
width: 100%;
}
HTML:
<div class="container">
<div>
<input type="number" class="form-control form-control-default-new" placeholder="400" />
</div>
<div class="link">
Information Link
</div>
</div>
I would set the desired width for the input fields, like this http://codepen.io/anon/pen/PwpBoK
.wrapper {
width: 100%;
height: 120px;
background: #ccc;
padding: 12px;
}
.text {
margin: 0 auto;
width: 600px;
}
.container {
background: #fff;
margin: 0 auto;
width: 600px;
height: 45px;
padding: 10px;
}
input {
width: 400px;
margin-right: 8px;
}
.form-control form-control-default-new {
width: 400px;
}
<div class="wrapper">
<div class="text">
<p>I need this:</p>
</div>
<div class="container">
<input type="number" class="form-control form-control-default-new" placeholder="400">Information Link
</div>
</div>
EDIT SCREENSHOT
I want to create a portfolio page. My problem is the inner html
<div class="box desktop-3 tablet-3 tablet-ls-3 mobile-3">
<a class="modulText" href='#module'>
<img src="../img/placeholder.png" />
<div class="label">
<div class="label-text">
<div class="text-title">
<%= title %>
</div>
<span class="text-category">Category</span>
</div>
</div>
</a>
</div>
the css looks like this:
desktop-3 {
width: 25%;
}
.box {
min-height: 282px;
padding: 10px;
float: left;
}
img {
max-width: 100%;
max-height: 100%;
z-index: 1;
}
.label {
background-color: rgba(25, 25, 25, 0.5);
width: 100%;
bottom: 0;
}
.label-text {
color:#fff;
position: relative;
z-index:500;
padding:5px 8px;
}
text-category {
display: block;
font-size: 9px;
}
as soon as the text-title doesn't fit in one box the label height changes and i'm not able to show 4 boxes in one row. I just want to have the label in the box element fiexed. If the text-title is to wide i want to have the whole label getting higher inside the box not that the box is getting higher. jFiddle
thanks for an advice
From your screenshot, I understood that the second title is longer. That breaks the layout. So you might want to add the below CSS to text-title avoid design breakage. The below code will keeps the title in one line.
.text-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 400px;
}
Here is the html code:
<div id="wrapper">
<div id="ads">...</div>
<div id="content">...</div>
</div>
I know how to place divs like columns on page, but i cant figure out is it possible to achieve that content div fills all space after ads div?
One obvious solution is to put ads-div into content-div like in below answer. But there is one problem. Content div may include any other html code, not only plain text. So, for example, if i place inner div with style "width:100%", 100% means all width of content div, its not pay attention to ads-div.
I guess its not possible to achieve this by keeping two divs separated.
Please see the screenshot for demo:
You could re-arrange your elements so ads are inside content <div>. See this JSFiddle for example:
<div id="wrapper">
<div id="content">
<div id="ads">...</div>
Lorem ipsum ...
</div>
</div>
With CSS:
#ads {
width: 100px;
height: 200px;
background-color: red;
float: right;
}
#content {
width: 100%;
height: 100%;
background-color: yellow;
}
Now floating the elements on the page won't help you achieve that, if you want, you can use display: flex;
Demo
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrap {
display: flex;
}
.first {
width: 80%;
background: #f00;
}
.second {
width: 20%;
background: #00f;
}
Or, if you are looking to support legacy browser, consider using display: table; and display: table-cell respectively...
Demo
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrap {
display: table;
width: 100%;
}
.first {
width: 80%;
display: table-cell;
background: #f00;
}
.second {
width: 20%;
display: table-cell;
background: #00f;
}
You need to place the <div id="ads">into your <div id="content">.
Heres the whole code:
HTML:
<div id="wrapper">
<div id="content"><div id="ads">...</div>
</div>
CSS:
#content {
width:600px;
height:500px;
background-color:red;
}
#ads {
height: 300px;
width:100px;
background-color:blue;
float:right;
}
Or just have a look at this fiddle.
i have tried this but not by div but i have used paragraph and div in my case.
you can try this also
<div id="wrapper">
<div id="content">
<div id="ads">...</div>
<p>
//your content
</p>
</div>
</div>
if you don't want to use inline css then add
#ads{
float:right
width:200px;
}
check (http://jsfiddle.net/q8NJk/)
and you can get padding or margin as you want