I have 3 simple textareas, with numbers next to them. I used a CSS table before to display them, but I need to later add things in between each row so that isn't efficient.
For some reason, the 2nd number, "2)" goes up next to the 1). I can't understand why this is happening.
JSFIDDLE: http://jsfiddle.net/b5h7p/
HTML:
<div style="float:left;">1)</div>
<div style="width:90%; float:right;">
<input type="textarea" style="width:100%;">
</div>
<div style="float:left;">2)</div>
<div style="width:90%; float:right;">
<input type="textarea" style="width:100%;">
</div>
<div style="float:left;">3)</div>
<div style="width:90%; float:right;">
<input type="textarea" style="width:100%;">
</div>
Set floating divs with clear
Markup
<div style="float:left;">1)</div>
<div style="width:90%; float:right;">
<input type="textarea" style="width:100%;">
</div>
<div class="clear"></div>
CSS
.clear{
clear:both;
}
Fiddle Demo
Clear Docs
Float
Related
One of our forms has two columns set up approximately as it is below (edited a number of input fields out since it's a rather large form). The user needs to be able to tab from the top of the left column all the way to the bottom, then back up to the top of the right column and again down to the bottom.
I have the form set up using two divs, one for each column (left/right). However, this has the effect of throwing the fieldsets out of whack horiztonally like so:
Keeping in mind the requirement that the user must be able to tab from top to bottom in each column, how would I adjust the CSS/general set up so that the fieldsets align horiztonally.
For example, in this fiddle Producer Info and Address Info are aligned properly, however I'd like Basic Info to horizontally align with Territory Info.
HTML
<div id="BigDiv" style="clear:both;display:inline;">
<div id="LeftDiv" style="width:450px;float:left;">
<fieldset style="width: 400px;" >
<legend>Produer Info</legend>
<div class="M-editor-label">
Producer Type
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
<fieldset style="width: 400px;" >
<legend>Basic Info</legend>
<div class="M-editor-label">
First Name
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
<div class="M-editor-label">
LastName
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
</div>
<div id="RightDiv" style="width: 450px; float:right">
<fieldset style="width: 400px;" >
<legend>Address Info</legend>
<div class="M-editor-label">
Home
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
<div class="M-editor-label">
Business
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
<fieldset style="width: 400px;" >
<legend>Territory Info</legend>
<div class="M-editor-label">
Territory Type
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
</div>
</div>
CSS
.M-editor-label
{
clear: both;
}
.M-editor-label
{
float: left;
margin: 1em 0 0 0;
}
.M-editor-field
{
float: right;
margin: 0.5em 0 0 0;
color: Black;
}
.M-editor-field-xtraspace
{
float: right;
margin: 0.5em 0 20 0;
color: Black;
}
As Basic Info and Territory Info are within two different div, their alignment can't be dependent on each other. Their alignment is affected only by their sibling like Producer info for Basic info and Address info for Territory info.
So, you need to manually give margin-top to the Basic Info so that it is at proper height from top matching that of Territory info.
Here's its fiddle: http://jsfiddle.net/mb2x8e68/
<div id="BigDiv" style="clear:both;display:inline;">
<div id="LeftDiv" style="width:450px;float:left;">
<fieldset style="width: 400px;" >
<legend>Produer Info</legend>
<div class="M-editor-label">
Producer Type
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
<fieldset style="margin-top:35px;width: 400px;" >
<legend>Basic Info</legend>
<div class="M-editor-label">
First Name
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
<div class="M-editor-label">
LastName
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
</div>
<div id="RightDiv" style="width: 450px; float:right">
<fieldset style="width: 400px;" >
<legend>Address Info</legend>
<div class="M-editor-label">
Home
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
<div class="M-editor-label">
Business
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
<fieldset style="width: 400px;" >
<legend>Territory Info</legend>
<div class="M-editor-label">
Territory Type
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
</div>
I don't believe that you can achieve what you want without setting a fixed height to your elements. Adding the following to your CSS will ensure that all your fieldsets are aligned properly. Keep in mind that you will have to account for the largest sized box.
fieldset{ height:100px;}
<div id="container" style="width:100%;">
<div id="text1" style="width:20%;float:left;">1<br>1</div>
<div id="text3" style="width:20%;float:right;">3<br>3</div>
<div style="width:60%;float:none;">
<textarea id="phrases" cols="50" rows="20"></textarea>
<div id="text2">2<br>2</div>
</div>
</div>
I wish to have 3 columns. In the middle column, I wish to have a textarea and then text directly under the textarea. However, the text 2<br>2 is appearing in the left column. What am I doing wrong?
http://jsfiddle.net/z7UXW/22/show/
see this, Demo
<div id="container" style="width:100%;">
<div id="text1" style="width:20%;float:left;">1<br>1</div>
<div style="width:60%;float:left;">
<textarea id="phrases" cols="50" rows="20"></textarea>
<div id="text2" >2<br>2</div>
</div>
<div id="text3" style="width:20%;float:right;">3<br>3</div>
</div>
I'm coming from an iOS background and having trouble laying out elements in HTML and using CSS. I want to create something as "simple" as this:
I want to be able to split the screen in separate divs but have all the fieldsets align with each other. (They are fieldsets but I didn't draw them in my primitive mockup. I also didn't put anything in the third box but there's more stuff in there).
But here are some of my questions:
Box 1 questions:
I basically have style="display:block;" in all my elements. If I have an overarching div as style=display:block, I don't get the same effect. Is there a better way to do that?
Box 2 general question:
I ended up hardcoding all my styles to sort of achieve the image shown. It doesn't seem very usable or scalable. Any general principals I should start with?
<div style="display:inline-block; vertical-align:top; float:left; width:25%">
<fieldset>
<legend>First fieldset</legend>
<div style="display:block;">field 1
<input type="text" style="display:block;" />
</div>
<div style="display:block;">field 2
<select style="display:block;">
<option>field 2 options</option>
</select>
</div>
<div style="display:block;">field 3
<input type="text" style="display:block;" />
</div>
</fieldset>
</div>
<div style="display:inline-block; vertical-align:top; width:33%">
<fieldset>
<legend>Second fieldset</legend>
<div style="clear:both"></div>
<div class="one-half" style="display:inline-block; float:left;">
<input type="radio" name="scoops" />Single
<div style="display: block">Radio 1</div>
<div style="display: inline">Radio 2
<input type="text" />
</div>
<div style="display: block">
<input type="checkbox" />Radio 3</div>
</div>
<div class="one-half" style="display:inline-block;">
<input type="radio" name="scoops" />Double
<div style="display: block">Blah 1</div>
<div style="display: inline">Blah 2
<input type="text" />
</div>
<div style="display: block">
<input type="checkbox" />Blah 3</div>
</div>
</fieldset>
</div>
Your title says it all, don't use inline styles or it will quickly become a mess. Create an external stylesheet to hold all CSS, and style groups of elements targeted with CSS selectors.
Start by simplifying the structure. You have three columns, so three divs. It's a good idea to wrap them too:
<div id="wrapper">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
So you want them side-by-side. Floating them or using inline-block elements are two common techniques to achieve that. You tried to use both at the same time, choose one. I'll give an example for floating:
#wrapper { overflow: hidden; } /* clear the floats at the end,
so the wrapper extends down */
#col1, #col2, #col3 { float: left; }
#col1 { width: 25%; }
#col2 { width: 33%; }
You also don't need a div wrapping every field, and you don't have to manually make divs block (they are blocks by default, and fieldsets are too). Use labels and make them blocks too:
<fieldset>
<legend>First fieldset</legend>
<label for="fld1">field 1</label>
<input id="fld1" type="text">
<label for="fld2">field 2</label>
<select id="fld2">
<option>field 2 options</option>
</select>
<label for="fld3">field 3</label>
<input id="fld3" type="text">
</fieldset>
And make them all blocks:
label, input, select { display: block; }
I hope this gives you a general idea you can apply to the other columns.
This is exactly what CSS classes are for : http://www.w3schools.com/css/css_id_class.asp
For starters here are classes for your left and right sections:
.left {
display:inline-block;
vertical-align:top;
float:left;
width:25%;
}
.right {
display:inline-block;
vertical-align:top;
width:33%;
}
In use: http://jsfiddle.net/basarat/BM6Fp/#base
<div class="left">
<fieldset>
<legend>First fieldset</legend>
<div style="display:block;">field 1
<input type="text" style="display:block;" />
</div>
<div style="display:block;">field 2
<select style="display:block;">
<option>field 2 options</option>
</select>
</div>
<div style="display:block;">field 3
<input type="text" style="display:block;" />
</div>
</fieldset>
</div>
<div class="right">
<fieldset>
<legend>Second fieldset</legend>
<div style="clear:both"></div>
<div class="one-half" style="display:inline-block; float:left;">
<input type="radio" name="scoops" />Single
<div style="display: block">Radio 1</div>
<div style="display: inline">Radio 2
<input type="text" />
</div>
<div style="display: block">
<input type="checkbox" />Radio 3</div>
</div>
<div class="one-half" style="display:inline-block;">
<input type="radio" name="scoops" />Double
<div style="display: block">Blah 1</div>
<div style="display: inline">Blah 2
<input type="text" />
</div>
<div style="display: block">
<input type="checkbox" />Blah 3</div>
</div>
</fieldset>
</div>
I have 1 form and I would like to place it in 2 divs, so that the following:
<div style="float:left; position:relative; margin-right:40px">
<form id="testForm2">
</form>
</div>
<div position:relative">
<form id="testForm2">
</form>
</div>
would be turned into something like this:
<div style="float:left; position:relative; margin-right:40px">
<form id="testForm2">
</div>
<div position:relative">
</form>
</div>
See the fiddle. Any ideas?
Thanks!
What you want, is to put the form around both divs like so:
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
</div>
<div style="position:relative">
</div>
</form>
Here's an updated version of your jsFiddle.
Edit
Also, your second div's style is incorrect. It's fixed now in my example.
The markup in your jsFiddle file required some tidying up. This is what i would go with, trying to minimize your code somewhat:
<div class="post_edit_modeling">
<div class="tab_trash">
<div id="prof_picture">
<form id="testForm2">
<fieldset id="left">
<legend>Sex:</legend>
<div>
<label>
<input type="radio" name="sex" id="genderMale" value="male" />
Male
</label>
</div>
<div>
<label>
<input type="radio" name="sex" id="genderFemale" value="female" />
Female
</label>
</div>
<div>
<label>Weight</label>
<input id="weightpounds" type="text" name="weightpounds"/>
</div>
<div>
<label>Bust</label>
<input id="bust" type="text" name="bust"/>
</div>
</fieldset>
<fieldset id="right">
<div>
<label>Cup</label>
<input id="cup" type="text" name="cup"/>
</div>
<div>
<label>Waist</label>
<input id="waist" type="text" name="waist"/>
</div>
<div>
<label>Hips</label>
<input id="hips" type="text" name="hips"/>
</div>
<div>
<label>Hair Color</label>
<select name="haircolor">
<option value="1">White</option>
<option value="2">Black</option>
<option value="3">Yellow</option>
<option value="4">Blue</option>
</select>
</div>
<div>
<label>Dress Size</label>
<input id="dress" type="text" name="dress"/>
</div>
</fieldset>
<fieldset>
<div>
<input type="button" name="btnUpdate" id="btnUpdate" value="Update" />
</div>
</fieldset>
</form>
</div>
</div>
</div>
CSS:
form div {float: left; margin-bottom: 15px;}
fieldset { float: left; width: 200px; border: 0; padding: 0; margin: 0;}
#left { }
#right { margin-right: 0; }
label {float: left;}
input {clear: both;; float: left}
Ive updated your jsFiddle file. Here.
Can you not just make the two divs live inside the form? Like this:
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
Form Content Here
</div>
<div position:relative">
Form Content Here
</div>
</form>
If the form is affecting your page layout, make sure that you set the form style to display:inline;!
As Drackir and joe_coolish said, you don't need to nest your form tags that way.
Typically I always open the entire content block with the form tag, totally isolated from the other content. There's absolutely no harm in doing things this way. ANything including <h1> and entire layouts can be nested in a form, as long as you know that every input within it will belong to that form.
<form>
<!-- tons of content here including layout -->
</form>
Can't you just put the 2 DIV's inside the FORM tags? Something like:
<form>
<div id="one">
...
</div>
<div id="two">
</div>
</form>
edit: Seems I'm a little too late :)
Just move your <div> tags within the <form>...
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
... left side ...
</div>
<div position:relative">
... right side ...
</div>
</form>
what about
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
</div>
<div position:relative">
</div>
</form>
I am trying to align text fields in a div and make them float left so that they look like a table.
I want a layout like below:
Label1: TextField Label2: TextField Label3: TextField
Label4: TextField Label5: TextField Label6: TextField
I tried to do this but it just won't come out correct. http://jsbin.com/izuwi3/edit
I put this together really quickly, so it can definitely be improved upon, but how about something like this?
http://jsfiddle.net/LBcp5/1/
What I'm doing is essentially creating a container for what would be a row in a table. The way I'm doing this is as follows:
<div class="row">
// put whatever you want in here
</div>
... and I'm styling this row class with clear: both so that each row will be on its own line. You can add <div> elements within each row, as many as you want, and floating them to the left or using display: inline to get the effect you want.
So when you want multiple rows, you create multiple of these row containers. Check out the jsFiddle demo above for an example.
I hope this helps.
Maybe you are looking for something like this?
HTML:
<form>
<div id="wrapper">
<div id="left">
<div class="label-container">
<label for="label1">Label1</label>
<input name="label1" type="text">
</div>
<div class="label-container">
<label for="label4">Label4</label>
<input name="label4" type="text">
</div>
</div>
<div id="center">
<div class="label-container">
<label for="label2">Label2</label>
<input name="label2" type="text">
</div>
<div class="label-container">
<label for="label5">Label5</label>
<input name="label5" type="text">
</div>
</div>
<div id="right">
<div class="label-container">
<label for="label3">Label3</label>
<input name="label3" type="text">
</div>
<div class="label-container">
<label for="label6">Label6</label>
<input name="label6" type="text">
</div>
</div>
</div>
</form>
CSS:
#wrapper
{
width: 800px;
}
#left,
#center,
#right
{
float: left;
}
.label-container
{
margin: 10px 10px;
}
:)
Well, you can for example put each column in a fieldset tag, set it's display attribute to block, float to left and set width to desired value.
i think it'll allways end using some tag like span or div to group those fields, however the fieldset tag is the most desired one cause it's invented exactly for grouping form fields :)
you can do this:
<div style="clear:both;">
<div style="float:left;">
<label for="TextField1">Label1:</label>
<input id="TextField1" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField2" style="padding-left:50px">Label2:</label>
<input id="TextField2" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField3" style="padding-left:50px">Label3:</label>
<input id="TextField3" value="TextField"></input>
</div>
</div>
<div style="clear:both;">
<div style="float:left;">
<label for="TextField4">Label4:</label>
<input id="TextField4" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField5" style="padding-left:50px">Label5:</label>
<input id="TextField5" value="TextField"></input>
</div>
<div style="float:left;">
<label for="TextField6" style="padding-left:50px">Label6:</label>
<input id="TextField6" value="TextField"></input>
</div>
</div>
Use this html tag
align="center"
center can be substituted for left or right if you want not to position them on the center
The proper way to do it is by linking your html to a CSS file and assign each div to a certain type of class in the CSS file, this helps you avoid redundancy. To do so create a css file and
link it to the html by including this in your html code
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
And then in your mystyle.css file you would have to include something like this
DIV.Left{text-align:left;}
DIV.Center{text-align:center;}
DIV.Right{text-align:right;}
Then your html file divs would look like
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>