I want to position this HTML snippet
<div id="D1">
<div id="D1.1">HeaderText</div>
<div id="D1.2"> From
<input id="from" name="from" value=""/>
</div>
<div id="D1.3"> To
<input id="To" name="To" value=""/>
</div>
</div>
this way
+-(D1)-------------------------------------------------------------------------+
|+-(D1.1)---------------------------++-(D1.2)-------------++-(D1.3)-----------+|
|| || +-(from)-------+|| +-(to)---------+||
|| HeaderText ||From| |||To| |||
|| || +--------------+|| +--------------+||
|+----------------------------------++--------------------++------------------+|
+------------------------------------------------------------------------------+
using CSS
Things I need:
D1.1 must be left aligned and D1.2 y D1.3 must take only the space they need and must be right aligned.
Even though I represented here the width of D1.1 to take all the remaining horizontal space, it's not required to do that.
D1 should grow vertically to contain D1.1, D1.2, D1.3 completely. (No overflow, all divs completely visible)
The design must be fluid (i.e. if I change the font sizes of the text inside the divs, the layout adjust itself accordingly.
Is it possible to do all of this using only CSS and no tables? How?
Yanko,
Your ID names have periods in them and that'll be a problem in CSS since period is reserved. Best thing is to not use reserved characters in names but if you must have them, then you have to escape the periods with a backward slash. Markup can stay as is.
Here is the CSS:
#D1 {
background-color: gold;
padding: 10px;
overflow: auto;
}
#D1\.1 , #D1\.2 , #D1\.3 {
float: left;
padding: 10px;
}
If you need help understanding overflow property, here's a tutorial that discusses it.
===
Layout Gala is a pretty good reference for CSS based layouts.
You might want to take a look at this layout, or possibly this layout since they both look roughly like what you're asking for.
Good luck, and hope this helps some.
#D1 {
background-color: gold;
padding: 10px;
overflow: auto;
}
#D1\.1 {
float: left;
padding: 10px;
}
#D1\.2 , #D1\.3 {
float: right;
padding: 10px;
}
</style>
</head>
<body>
<div id="D1">
<div id="D1.1">HeaderText</div>
<div id="D1.3"> To
<input id="To" name="To" value=""/>
</div>
<div id="D1.2"> From
<input id="from" name="from" value=""/>
</div>
</div>
</body>
</html>
Related
My label is on one line and text is on the next line. How could I modify the css to make them both on the same line? I have tried several things such as float based on other posts but they still are on different lines.
.indentColumn {
width: 71px;
padding-top: 5%;
}
.labelColumn {
width: 71px;
margin-left: 15%;
}
.inputForm {
margin-left: 30%;
}
<div class="indentColumn">
<div class="labelColumn">
<div class="inputForm">
<span class="secNav">
<label display:inline-block; for="username">#springMessageText("idp.login.username", "User ID:")
</label>
<input class="fieldColumn" display: inline-block; id="username" name="j_username" type="text" size="20" maxlength="64" minlength="6"
value="#if($username)$encoder.encodeForHTML($username)#end">
</span>
</div>
</div>
</div>
Thanks for the help everyone.I removed all the divs, display and also the class in the textbox and now they are on the same line. The main issue seemed to be the class in the textbox because only after I removed that did they appear on the same line.
I also found that there was a form div that was set to 250px that was causing the text field to go onto the next line whenever there was a left-margin. Once I removed that, things started working better.
If you want them on the same line, then put them in a container that is wider than 71 pixels.
There isn't room in 71 pixels for them to fit side by side.
CSS
label{
display:inline-block;
}
and remove <label display:inline-block; ... /> - its wrong
In my fiddle i show a form devided into two parts (horizontally). The left part is the problematic one. There are a select element in line with two textfields sharing the available width percentally. What i'd like to have is to give the select and the middle textfield a defined percentual width and have the right textfield to take rest to always span up to the right container border. This layout must remain behaving like this upon scaling the container. Also, the select element must remain readable. At the moment its content is getting partially hidden upon scaling.
I cannot figure the proper formatting to achive this.
Here's my code:
<style>
.unseen {
display: none
}
form {
background: maroon;
margin: 0;
display: flex;
}
[class*="span5"] {
background: olive
}
[class*="span7"] {
background: pink
}
#salutation {
width: 12%;
min-width: 50px
}
#firstname {
width: 30%
}
#lastname {
width: 40%
}
</style>
<div class="container" id="page">
<div class="row-fluid" id="page_content">
<section class="form row-fluid" id="page_content">
<div class="row-fluid">
<form class="form-horizontal form-validate">
<div class="span7">
<fieldset class="well-small">
<legend></legend>
<div class="control-group">
<div class="control-label">
<label id="salutation-lbl" for="salutation">Full Name</label>
<label id="firstname-lbl" for="firstname" class="unseen">First Name</label>
<label id="lastname-lbl" for="lastname" class="unseen">Last Name</label>
</div>
<div class="controls">
<select id="salutation" name="salutation" class="fullname salutation">
<option value="Mr." selected>Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<input type="text" name="firstname" id="firstname" value="Max" placeholder="forename" />
<input type="text" name="lastname" id="lastname" value="Mustermann" placeholder="surname" />
</div>
</div>
</fieldset>
</div>
<div class="span5">
<h2>Other content</h2>
</div>
</form>
</div>
</section>
</div>
</div>
I have tried to solve your question in the best possible way but not exactly as you wanted for the first part of the question as percentage widths won't always work properly since bootstrap is constantly changing the parent container's width. So, I have written a jquery function that will calculate the desired width of these input text boxes and dynamically add them as their respective css widths. This function along with some other minor html/css tweaks will fix your problem.
HTML - Changed the bootstrap form class from form-horizontal to form-inline which better suits the requirements.
<form class="form-inline form-validate">
CSS
Added a fixed width of 65px that keeps the select element readable even with the longest possible option. (mrs.)
Removed percentage widths from #firstname and #lastname selectors as we'll be adding those via jquery.
And finally added a !important to the display property of the unseen class (required when switching to bootstrap form-inline class)
.unseen {
display: none !important;
}
form {
background: maroon;
margin: 0;
display: flex;
}
[class*="span5"] {
background: olive;
}
[class*="span7"] {
background: pink;
}
#salutation {
width: 65px;
}
JQUERY - Here's the jquery function that does all the trick. This function calculates the available width for the textboxes to fit in with default padding
function resizeFormElements() {
/*
Calculating the available width for the two text boxes by subtracting the
=> main control container width
- the width of the selector element
- 4 * default_bootstrap_margin_of_3px between input elements (two input elements so both left and right margins)
- 4 * default_padding_of_6px of input text elements as per bootstrap.min.css line 238 (two input elements so both left and right padding)
- 1 (to not get affected by truncated values)
*/
var avail = parseFloat($(".controls").width()) - parseInt($("#salutation").css("width")) - 4 * 3 - 4 * 6 - 1;
$("#firstname").css("width", avail / 2);
$("#lastname").css("width", avail / 2);
}
$(window).on("resize load", function () {
resizeFormElements();
});
Here's a working fiddle of the above solution.
Hello I have created two divs, one is floated to the left (button), and has 120px width, and another one is for textarea, textarea should be margin-left: 20px and take rest of the width. How much ever I try, I am not able to achieve this. Guys, do you know the solution?
<div id="button" style="float: left; width: 120px; height: 80px;">
<input type="button" id="button" value="something" />
</div>
<div id="textarea" style="margin-left: 20px;">
<textarea id="message"></textarea>
</div>
(For IE8 use #ID named DIVs instead of nth-child)
DEMO
|-------- 120 --------| 20 |------ available space ----------------------------------------------------------->
<div id="formArea">
<div>
<input type="button" value="something" />
</div>
<div>
<textarea></textarea>
</div>
</div>
#formArea{
display:table;
width:100%;
}
#formArea>div{
display:table-cell;
vertical-align: top;
}
#formArea>div:nth-child(1){
width:120px;
}
#formArea>div:nth-child(2){
padding-left:20px; /* instead of margin */
}
#formArea textarea{
border:0;
width:100%;
}
And remember, ID must be unique-per-page.
Try this:
CSS
.left{
float:left;
width:120px;
}
.right{
overflow:hidden;
margin-left:20px;
}
#message{
width:100%;
}
HTML
<div class="left">
<input type="button" id="button" value="something" />
</div>
<div class="right">
<textarea id="message"></textarea>
</div>
fiddle
Let's give this one a try... Below is the code you have given us but with a few enhancements:
<div id="container">
<div class="left">
<input type="button" id="button" value="something" />
</div>
<div class="right">
<textarea id="message"></textarea>
</div>
</div>
And the following is the CSS I have attached:
.left {
width: 120px;
float:left;
}
.right {
float:right;
}
#message{
width:400px;
}
#container {
display:inline-block;
}
Now, what I have done is set all of your current divs into one main div, which can hold everything together. I implemented a display:inline-block to help keep everything on one line along with maintaining the text area to be on the right and the button on he left with the cushion you have asked for in-between. To get a better idea of what this does, I have recreated an already done JsFiddle, which can accurately depict what I am describing.
A few things to note, remember that "textarea" can have the values of "rows" and "cols" which will determine how many rows and columns the text area will be, so you really do not need to have width in this aspect, especially if you need more rows vs columns.
Another thing, if you want to learn a bit more conceptually about some CSS tricks, the Almanac is one of the better tools out there to help you understand "why this does that".
Last, I encourage you to play with everybody's JsFiddle to get a better understanding of exactly what you want to see in your own code, every answer that has been presented has their own unique JsFiddle.
If this does not work or you have questions, comment below and we can figure something else out :)
Good luck with your future HTML/CSS coding adventures :)
The Problem
I've got a problem where I'm trying to create rows of form inputs. This works OK, however, once the width of the total inputs gets too large, everything starts to wrap. What I would like is for a horizontal scroll-bar to appear inside the field-set and for all form elements for a single service-item div to remain on a single line.
<div style="display: inline-block;" class="horizontal-fields service-item">
<button class="horizontal-fields remove-service-item" style="float: left; margin-right: 5px;">-</button>
<label for="service_name">Name:</label>
<input name="service_name[]" id="service_name" value="" type="text">
<label for="service_description">Description:</label>
<input id="service_description" name="service_description[]" value="" type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label for="service_dsl_fnn[]">FNN:</label>
<input id="service_dsl_fnn" name="service_dsl_fnn[]" size="10" value="" type="text">
<button class="horizontal-fields new-service-item" style="display: inline-block;">+</button>
</div>
<br>
</div>
Current Results
Here is a JSFiddle showing the form in it's current state, I've included all the bare-bones CSS/HTML that I think are relevant: http://jsfiddle.net/FjxqG/3/
You will see that I've managed to get what I want by specifying width: 300% in the horizontal-fields class. However, this is of course not optimal because the width is essentially fixed and not automatically fitting the width of the service-item div.
Of course, this leaves the width much larger than it needs to be, but also always showing a horizontal-scroll, even when it isn't needed.
What I've tried
I've tried using display: inline-block; and whitespace: no-wrap;. However, the former did not seem to do much for me, and the latter only worked for the first few form items, not those inside the service-additional-fields div.
Unfortunately, I've got those latter items in the service-additional-fields div as they are dynamically inserted using jQuery, so although it's possible to take them out, I'd rather leave them in there, as it keeps the JavaScript simpler.
I've tried adapting the solution found here, with little success: http://www.css-lab.com/demos/image-display/side-scroll-gallery.html
Ended up with a similar situation in which the latter form elements were still wrapping.
I've also considered doing something like the jQuery solution found here: Horizontal scroll in DIV with many small DIV's inside (no text)
I guess this would work for me, because I already know that setting the width on horizontal-fields works OK, so using jQuery to find out what that width should be would probably work. However, it feels like I shouldn't need jQuery and it would be kind of a hack. So I'd like to avoid it if reasonably possible.
Thanks!
For some reason the other answer has been deleted and I can't get it back so having to answer again.
Previous answer was -
How about removing the floats and having inline-blocks with auto widths, And then for the .service-additional-fields as inline-block too?
Edited for a fuller answer.
HTML
<fieldset>
<legend>Fourth: Add Services</legend>
<div id="slide-wrap">
<div id="inner-wrap">
<div class="horizontal-fields service-item">
<button class="addField">+</button>
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
</div>
</div>
<div class="horizontal-fields service-item">
<button class="addField">+</button>
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
</div>
</div>
</div>
</div>
</fieldset>
CSS
#slide-wrap {
margin:0 auto;
overflow: auto;
background:#BCC5E1;
border:1px solid #000;
}
#inner-wrap {
float:left;
margin-right:-30000px;/*Be safe with Opera's limited negative margin of 32695px (-999em could cause problems with large font sizes)*/
padding-left:20px;
width: auto;
}
div.horizontal-fields input,
div.horizontal-fields textarea,
div.horizontal-fields select,
div.horizontal-fields label {
width: auto;
}
/* Horizontal fields is the class which is not re-sizing it's with correctly */
.horizontal-fields {
display: block;
}
.service-additional-fields {
display:inline-block;
}
DEMO
http://jsfiddle.net/aLKHJ/1/
Try this approach:
HTML:
<div id="slide-wrap">
<!-- + First row -->
<div class="row">
<!-- All elements here -->
</div>
<!-- - First row -->
<!-- + Second row -->
<div class="row">
<!-- All elements here -->
</div>
<!-- - Second row -->
</div>
CSS:
#slide-wrap {
margin:0 auto;
overflow: auto;
background:#BCC5E1;
border:1px solid #000;
width: 400px; /* for example */
padding-left:20px;
}
div.row {
float:left;
white-space: nowrap;
}
Take it easy, I was really getting confused of inner styles, so I removed them.
JsBin demo
My goal is an alignment as shown in the attached image (the fields on the left may have any width, but the ones on the right should begin at the same X coordinate).
Right now I am using a simple table code to achieve this:
<table><tr>
<td>Left1</td><td>Right 1</td></tr>
<tr><td>Left 2</td><td>Right 2</td></tr></table>
However, I've heard that using tables is generally bad. Is there a way I could achieve the same design using CSS? The website is being designed for mobile devices which might not support fancy CSS, so the code must be as simple as possible.
EDIT: since I still occasionally get a notification on this question from people who (presumably) are just starting out with HTML like I was when I made it, please refer to the accepted answer by B T as this is by far the best way to achieve this functionality. The question suggested as a "possible duplicate" (31 May 2016) does not currently offer the table-row/table-column CSS-based approach and requires you to do guess work.
I found a much easier way to do this by accident. Say you have the following:
<div class='top'>
<div>Something else</div>
<div class='a'>
<div>Some text 1</div>
<div>Some text 2</div>
</div>
<div class='a'>
<div>Some text 3</div>
<div>Some text 4</div>
</div>
</div>
You can align Some text 1 and Some text 2 using css table display styling like this:
.a {
display: table-row;
}
.a div {
display: table-cell;
}
The coolest thing is that as long as the 'top' div is NOT styled display: table, then other things like "Something else" can be ignored in terms of alignment. If the 'top' div IS styled display: table, then "Some text 1" will be aligned with "Something else" (ie it treats all its children like table rows, even if they have a different display style).
This works in Chrome, not sure if its supposed to behave this way, but I'm glad it works.
.a {
display: table-row;
}
.a div {
display: table-cell;
}
<div class='top'>
<div>Something else</div>
<div class='a'>
<div>Some text 1</div>
<div>Some text 2</div>
</div>
<div class='a'>
<div>Some text 3</div>
<div>Some text 4</div>
</div>
</div>
While it is possible to achieve the same with tables, it would be considered semantically incorrect to use a table for the purpose of layout. Especially since you can achieve the same using just a line or two of CSS.
Give your labels a fixed width (something larger than your longest label text).
<style>
label {
width: 100px;
display: inline-block;
}
</style>
<label>Name</label>
<input type="text" />
<br/>
<label>Email Address</label>
<input type="text" />
Example
Here, you could use this for getting the output required.
Using tables IMO is not bad practice, in fact they should be used where tabular data is required, or the format of data resembles a table.
However, designing a full page, or anything not to be displayed in a tabular format, using a table is discouraged, and is in fact very very wrong.
Here goes a sample using a non-table structure:
HTML :
<form>
<label for="name">Email: </label><input id="name" type="email" placeholder="#" />
<br/><br />
<label>Password: </label><input type="password" id="password" placeholder="*"/>
</form>
CSS:
label {
width: 80px;
display: block;
vertical-align: middle;
float:left;
clear:left;
}
input {
border-top-left-radius:5px;
border-bottom-right-radius: 10px;
background: #141414;
color: #fdd56c;
outline: none;
}
Here is an example
Yes, such alignment is possible. Using CSS classes, you can markup your HTML in such a way to achieve the same look of a table without the headache of using a table (or making the markup look ugly).
Using this CSS:
.label {
display: inline-block;
width: 100px;
}
.inputBox {
width: 200px;
}
and this HTML:
<span class="label">E-mail:</span><input type="email"></input><br>
<span class="label">Password:</span><input type="text"></input>
you'll get the layout you want.
To do this with IE7 support, change the CSS above to this:
.label {
display: block;
width: 100px;
float: left;
clear: left;
}
Then, add this line below the lines already shown:
<div style="clear: left"></div>
Example using IE7-compatible settings: http://jsfiddle.net/bbXXp/
True. I am learning it the hard way. I used table for alignment, and now, certain alignments are becoming bizzare in smaller screens (e.g. mobile phone, tablets etc). Hence, am switching over to div. Preferable use <div style="display:inline-block">...</div>, which will align automatically if the screen is smaller.
Hence, my advice is that Table should be used only for genuine tables, and not for aligning controls in a body.