<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>
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;}
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
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 a JQuery mobile application that is running on a tablet. But my problem is that my button (SEARCH) losses position and I would have to drag the screen if I want to see it when the tablet orientation is in landscape. How do I make sure it is still visible on both potrait and on landscape?
<div id="divBody" data-role="page" data-theme="c">
<div data-role="header" class="hesto">
<h1>Weld Splice </h1>
</div>
<div data-role="content">
<div> <input type="text" name="text-1" id="txtBarcode" class="barcodeTxt" placeholder="Scan barcode" value=""/></div>
<div id="divButton"> Search</div>
</div>
<div id="divFooter" data-role="footer" >
</div>
</div>
Wrap each one - input and button - with div class ui-grid-solo
<div class="ui-grid-solo">
<input type="text" name="text-1" id="txtBarcode" class="barcodeTxt" placeholder="Scan barcode" value="" />
</div>
<div class="ui-grid-solo">
<div id="divButton">Search
</div>
</div>
Reference: Grids - JQM v1.3.0
If the button is getting pushed down why not placed it in the header bar??
If you are ok with the approach you may change something as below
<div id="divBody" data-role="page" data-theme="c">
<div data-role="header" class="hesto">
<h1>Weld Splice </h1>
Search
</div>
<div data-role="content">
<div>
<input type="text" name="text-1" id="txtBarcode" class="barcodeTxt" placeholder="Scan barcode" value="" />
</div>
<div id="divButton"></div>
</div>
<div id="divFooter" data-role="footer"></div>
</div>
Check out a live fiddle at http://jsfiddle.net/mayooresan/DuReF/
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>