I don't know where to begin learning about doing such a layout without tables, or at most one two column table as a simple container. Where should I start?
So after seeing your comment about you looking for a layout with two columns of fieldsets, I went and wrote up this one without the use of tables:
<html>
<head>
<title>Two Column Fieldsets</title>
<style>
html, body
{
background: #156;
text-align: center;
}
#container
{
background: #FFF;
border: 1px #222 solid;
height: 600px;
margin: 0 auto;
text-align: left;
width: 700px;
}
#container form
{
margin: 0 auto;
}
label
{
float: left;
width: 50px;
}
.singleRow
{
float: left;
width: 322px;
}
</style>
</head>
<body>
<div id="container">
<form action="">
<fieldset class="singleRow">
<label for="1">Text:</label>
<input id="1" type="text" />
<input type="submit" value="submit" />
</fieldset>
<fieldset class="singleRow">
<label for="2">Text:</label>
<input id="2" type="text" />
<input type="submit" value="submit" />
</fieldset>
</form>
</div>
</body>
</html>
Most of the styles are just to make it line up nice and centered and to provide some contrast. The way to get two columns is to float both fieldsets left. Each fieldset has a class called .singleRow, whose only important style is float: left; (the width is in there to make them line up nicely). By floating both of the elements (in this case fieldsets, but they could be divs lis, any element) left, and making sure their combined widths are less than the width of their container, you can achieve a nice two-column layout.
Hope this helps.
Related
I am new to CSS. Created a form with 4 input text boxes. Here is the code:
body {
background: #484848;
color: white;
margin:0px;
}
.pagetop{
width:1280px
}
header{
background: #D9853B;
padding:15px 40px;
margin:20px;
}
a{
color:white;
}
div{
padding:2px;
}
.pagetop nav h1,ul,li{
display:inline;
}
nav ul,li{
padding: 20px;
}
.signinform{
margin:0 auto;
margin-top:20px;
max-width: 600px;
}
.inputleft{
width: 30%;
float: left;
text-align: right;
}
.inputright{
width: 65%;
margin-left: 10px;
float:left;
}
.submitbutton{
width: 60%;
align-self: center;
}
<html>
<head>
<link rel="stylesheet" href="src/static/base.css">
</head>
<form method="post" class="signinform">
<div class="inputleft">
UserName:
</div>
<div class="inputright">
<input type="text" name="username" value={{username}}>
</div>
<div class="inputleft">
Password:
</div>
<div class="inputright">
<input type="password" name="pwd">
</div>
<div class="inputleft">
Verify Password:
</div>
<div class="inputright">
<input type="password" name="pwdverify">
</div>
<div class="inputleft">
Email(Optional):
</div>
<div class="inputright">
<input type="text" name="email" value={{email}}>
</div>
<div>
<input type="submit">
</div>
</form>
</html>
The last div element in the form covers all of the form when viewed in inspector in Firefox browser, my understanding says when I hover over div element then only div element should be highlighted not the other elements of form element.
This problem occurs when I apply the inputright style. Please explaing what's going on here.
First you have to close your <form> tag and the main thing to remember is to use clear:both; after every div where you have used float css.
This is must thing while using float as by float we are breaking the flow and pushing element to come inline so when element did not fit in space they got misaligned. You did not get that issue yet but to save your self by that issue, better use clear:both after every floated div so it will clear the blank space and you will save from that issue.
Also if you won't clear then it won't appear in inspect too. See my example i have used clear:both after every floated row so there won't be any issue with blank space or inspect element like you are facing.
I have two forms that I want to align. I was able to figure out how to align the height, but I can't get the width to work the way I want.
In my situation, I want the left box to fill in the remaining space. Using 'auto' just fills in the space to fit the contents. So instead of an expanding form, there is a gap between the two forms.
The reason I require this is I also have PHP around this form. There is a flag that dictates whether or not the second form shows up. So if there is only one form, I want it to expand the entire space. If there is two forms, I want them to share the space.
The way I thought of doing this would be to set the right form to a specific width and have the left form mold to whether or not anything else exists. I just can't figure out how to get the left form to expand itself without specifying an exact width.
I've included the HTML and CSS below as well as a JSFiddle reference.
HTML
<div class="section">
<div class="container">
<form>
<fieldset class="left">
<legend>PC Management</legend>
<div>
<input type='submit' value='Backup' />
<input type='submit' value='Backup' />
<input type='submit' value='Backup' />
</div>
</fieldset>
</form>
<form>
<fieldset class="right">
<legend>PC Management</legend>
<div>
</div>
</fieldset>
</form>
</div>
</div>
CSS
.section {
margin: 0 auto;
text-align: center
}
.container {
height: 100px;
width: 500px;
}
.container form, .container fieldset, .container input {
height: 100%;
display: inline;
}
.left {
width: auto;
float: left;
}
.right {
width: 40%;
float: right;
}
display: flex will get you the dynamic resizing that you want without needing any JavaScript:
.section {
margin: 0 auto;
text-align: center
}
.container {
height: 100px;
width: 500px;
display: flex;
}
.container form {
flex: 1 1 auto;
}
.container form, .container fieldset, .container input {
height: 100%;
}
<div class="section">
<div class="container">
<form class="left">
<fieldset>
<legend>PC Management</legend>
<div>
<input type='submit' value='Backup' />
<input type='submit' value='Backup' />
<input type='submit' value='Backup' />
</div>
</fieldset>
</form>
<form class="right">
<fieldset>
<legend>PC Management</legend>
<div>
</div>
</fieldset>
</form>
</div>
</div>
http://jsfiddle.net/eeLfx9d6/1/
Consider the following.
2 DIVS - the left one of known width, the right one of unknown width.
We can make the right-hand side fill the remaining space, however if I exchange the right-hand DIV to a textbox, it then does not fill the space, but wraps below the left-hand div.
Here's a fiddle: example
<div>
<div id="left">
left
</div>
<input type="textbox" id="right">
right
</input>
</div>
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}
I'm confused - any advice?
Still not behaving as it should!
New fiddle here: updated fiddle
JSFiddle
Inputs are inline bydefault and only the
Block level elements can aquire the remaining space left after a floating element. So you should change the display property for input to block i.e. display:block
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
display:block;
background-color:#00FF00;
}
<div>
<div id="left">
left
</div>
<input type="textbox" value="right" id="right"/>
</div>
EDIT: http://jsfiddle.net/naeemshaikh27/MHeqG/1522/ using Calc.
Using Calc
If You wanted to set the width of only a single element, you may want to look at the calc() option.
Something like:
width: calc(100% - width px);
in which could be incorporated into most projects nowadays, as you can see from its browser support.
You could also make use of the auto width:
.secondElement{
width:auto;
}
to fill the space left
Have a look here...
* {
margin: 0;
padding: 0;
}
div {
display: inline-block;
width: 50%;
background: blue;
}
input {
width: 50%;
display: inline-block;
}
.fix {
border: none;
background: gray;
}
.now {
width: 49.5%;
}
.nowNew {
width: auto;
}
<div>Div on left</div>
<input type="text" placeholder="text here" />
<br/>Notice the lengths aren't the same? Yet both are defined as 50%?
<br/><br/>
<br/>That's due to the border around the input!
<br/><br/><br/>
<div>Div on left</div><input class="fix" type="text" placeholder="text here" />
<br/><br/>
<br/>To fix 'stuff' like this, I feel the general rule in web dev. is to aim to make it 99.9% instead:
<br/><br/><br/>
<div class="now">Div on left</div><input class="now" type="text" placeholder="text here" />
<br/><br/>
<br/>Or make the input width auto:
<br/><br/><br/>
<div>Div on left</div>
<input class="nowNew" type="text" placeholder="text here" />
You can accomplish this using display: table and display: table-cell.
JSFIDDLE
HTML:
<div class="container">
<div id="left">
left
</div>
<input type="textbox" value="right" id="right" />
</div>
CSS:
#left {
display: table-cell;
width: 180px;
background-color:#ff0000;
}
#right {
display: table-cell;
width: 100%;
background-color:#00FF00;
}
.container {
display: table;
width: 100%;
}
I'm looking to center this textbox and submit button on the page both vertically and horizontally but the following code just puts it in the top center. How can I center this to the page? It's like it's ignoring the vertical-align setting.
<div style="text-align:center; vertical-align:middle">
<form action="save_thought.php" method="post">
<input type="text" name="thought"><br>
<input type="submit" value="Submit">
</form>
</div>
You can use position:absolute DEMO http://jsfiddle.net/kevinPHPkevin/U8dZr/
div#form-wrapper {
position:absolute;
top:50%;
right:0;
left:0;
}
You can also go for this:
HTML
<div id="main" >
<form id="frm" action="save_thought.php" method="post">
<input type="text" name="thought"><br>
<input type="submit" value="Submit">
</form>
</div>
CSS
#main
{
line-height: 400px;
text-align:center;
vertical-align:middle;
}
#frm
{
display: inline-block;
vertical-align: middle;
line-height: 14px;
}
Demo Here
None of the solutions provided above worked for me for my real proyect in which I wanted to center both vertically and horizontally a form inside a div (not taking as reference the full page) but I got it using display: flex; property. Just display your parent div as flex and then use the property margin: auto; for your child form.
In your case, it would be like this:
HTML code:
<div id="centeringDiv" style="display: flex;">
<form id="mainForm" action="save_thought.php" method="post">
<input type="text" name="thought"><br>
<input type="submit" value="Submit">
</form>
</div>
CSS code:
html, body{
height: 100%;
width: 100%;
margin: 0;
}
#centeringDiv{
height: 100%;
width: 100%;
display: flex;
}
#mainForm{
margin: auto;
}
JSFiddle in which you can see that the form it is being centered both vertically and horizontally in the full page.
CSS will probably never stop to amaze me. Given Dhaval Marthak's answer I was actually able to achieve what I wanted, right aligned labels and left aligned fields (on the right of the labels of course):
label {
display: block;
position:relative;
text-align: right;
width: 100px;
margin: 0 0 5px 0;
}
label > input,
label > select,
input {
position: absolute;
left: 120px;
}
The JSfiddle still points out my remaining problem, the field will align with the bottom of the label if the label breaks the line. But I am sure that can be amended as well.
Of course it would also be nice if the space between labels and fields could be assigned more "dynamically" based on the sizes of the labels (e.g. in different languages) but I have not seen this done anywhere so far. I guess I will have to resort to tables if I really need it.
You have have to change the width from "100%" to "px" and then you have to do margin: "auto".
Then the form will be centered horizontally.
Putting two divs on the same line is an old question. But I can't find a solution when working with simple_form in rails. What I want to do is to display content and its label on the same line. The width of the label is 125px (.left) and the content is on the right (.right). The text in the label is aligned to the right and the text in content is aligned to the left.
Here is the HTML:
<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8">
<input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token">
</div>
<div class="left">Proj Name：</div>
<div class="right">must have a name</div>
<div class="input string required">
Here is the CSS:
.simple_form div.left {
float: left;
width: 125px;
text-align: right;
margin: 2px 10px;
display: inline;
}
.simple_form div.right {
float: left;
text-align: left;
margin: 2px 10px;
display: inline;
}
However, in the result, there is a linebreak, like so:
Proj Name：
must have a name
The erb code of the simple form is:
<div class="left">Proj Name：</div><div class="right"><%= #project.name %></div>
I don't want to use a table but CSS only to solve the issue.
Your css is fine, but I think it's not applying on divs. Just write simple class name and then try.
You can check it at Jsfiddle.
.left {
float: left;
width: 125px;
text-align: right;
margin: 2px 10px;
display: inline;
}
.right {
float: left;
text-align: left;
margin: 2px 10px;
display: inline;
}
You can't float or set the width of an inline element. Remove display: inline; from both classes and your markup should present fine.
EDIT: You can set the width, but it will cause the element to be rendered as a block.
why not use flexbox ? so wrap them into another div like that
.flexContainer {
margin: 2px 10px;
display: flex;
}
.left {
flex-basis : 30%;
}
.right {
flex-basis : 30%;
}
<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8">
<input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token">
</div>
<div class="flexContainer">
<div class="left">Proj Name：</div>
<div class="right">must have a name</div>
</div>
<div class="input string required"> </div>
</form>
feel free to play with flex-basis percentage to get more customized space.