I have two divs side by side. I want to align the contents of one to the left and the contents of the other to the right. The left aligns properly but when I align the right, it screws up the input table just below. (See image)
This
Sadly Becomes
This
I feel like this is probably a really simple question but I just can't figure it out, though I swear I've done it before.
Here's the html (I've removed some php loops in the middle of it because I doubt it's relevant but let me know if you think it is):
<div class='uppertitle'>
<div class='question'><h4>What does {$business['name']} aim to achieve within the next three months?</h4></div>
<div class='addRow'><input type="button" value="Add Goal" onclick="addRow('threemonths')" /></div>
</div>
<div class='goals_table'>
<table id="threemonths" class= 'milestones' width="350px" border="1">
<tr>
<td class= 'deleteRow'><input type="button" name="Delete" onClick="newDelete(this);"/> </td>
<td><input type="text" name="txt[]" value='{$goal['description']}'/><input type="hidden" name="type[]" value='threemonths'></td>
</tr>
</table>
</div>
And here's the CSS:
.addRow {
float: right;
display: inline;
}
div#goals .question {
float: left;
margin-left: 40px;
display: inline;
}
.goals_table {
display: block;
}
A sample of the element can be found here: https://dl.dropboxusercontent.com/u/11993667/Hosting%20Signup%20%7C%20%7C%20Page%2010.html
Thanks in advance.
You are going to need this CSS on the table.
clear: both
clear will prevent items from sitting on left, right or both the sides of an element.
Related
So, I did a search and it seems that every single person who's asked this exact same question has actually had success with an answer given by someone - I tried multiple different methods and honestly, I'm about to have a meltdown.
I've tried floating left, floating right, inline-block, etc, and none of it has seemed to work. I am at a loss as to what I'm doing wrong, but it's driving me nuts.
Here's the HTML I'm trying to get on the same line:
<div class="search-and-staff-app-button">
<div class="search-position">
<form method="get" id="sb_searchform" action="<?php bloginfo('home'); ?>/">
<div class='search-box'>
<input name="s" id="s" class='search-input' placeholder='Search' type='text' />
<img onclick="document.getElementById('sb_searchform').submit();" class='search-img' src='<?php bloginfo('template_url'); ?>/img/search.png'>
</div>
</form>
</div>
<div id="staffAppButtonPlaceholder" class="staff-app-position"></div>
</div>
and the CSS:
.search-and-staff-app-button {
width:360px;
margin:0px;
float:right;
display: inline-block;
}
.search-position {
float:left;
}
.staff-app-position {
float:left;
}
What am I doing wrong? I've tried Getting 2 divs on the same line and this doesn't work either.
Any help would be super appreciated!
-Stu
To place the search-position and staffAppButtonPlaceholder divs on the same line, first float the search-position div:
.search-position {
float: left;
}
Then add some content to the placeholder:
<div id="staffAppButtonPlaceholder" class="staff-app-position">Content</div>
Finally, increase the width of the containing div to allow the elements to fit side-by-side:
.search-and-staff-app-button {
width:760px;
Both divs will now be aligned horizontally.
http://jsfiddle.net/jzefu2j9/1/
Here is a little example, maybe it will help you. I used flexbox, which in my opinion is a great solution for aligning.
.search-and-staff-app-button{
display: flex;
background:red;
align-items:center;
}
.search-and-staff-app-button > div{
box-sizing:border-box;
display:block;
flex:1 50%;
align-self:center;
padding:1em;
}
http://jsfiddle.net/pulamc/u9nLwacs/
add style="position:relative" to your outer div. Then make the inner div's style="position:absolute;left:0". You will have to manually set the left value for each of the divs. The downside is that you will have to know the width of the other divs on the same line.
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 :)
How do I get the contents of my DIV to all stay on one line?
I've seen other posts, but I can figure out what I'm doing wrong?
here is a link to the page with an issue:
http://www.heatx.org/productcart/pc/viewCategories.asp?idCategory=2
Given your link start by adding float: left; to #pcIconBarRight img and #pcIconBar a. This should address your question.
EDIT:
Then change this:
And this:
EDIT2:
To display two divs in one row you could do this:
<div style="float: left; width: 200px;">
<div style="float: left; clear: none;">Total: </div>
<div style="float: left; clear: none;">159 USD</div>
</div>
Note: the width: 200px; you should set the width big enough for the inner div's to fit, otherwise it will break the second div to the next line.
I believe the issue is due to the images inside the div. Set display:inline to those images.
Please add this into your bottom of css file
table{
margin: 0 auto;
}
to align your site in center
your menu is not appeared !
A little bit late for answering OP's question. This will be useful for other people having the same problem.
So to get all the elements to appear on a single line the easiest way is:
Set white-space: nowrap;overflow-x: auto; on the parent element.
Set display: inline-block on all child elements.
Result:
Fiddle
<div style="width:100%;white-space:nowrap;overflow-x:auto;border: 1px solid red; border-radius: 10px;padding: 3px;">
<label style="display: inline-block">Some label </label>
<select style="display: inline-block">
<option value="0">aaaaa</option>
<option value="1">bbbbbb</option>
<option value="2">ccccccccc</option>
</select>
<label style="display: inline-block">Another label: </label>
<input type="text" style="display: inline-block;width:200px;" />
<span style="display: inline-block">NOTE: some other text</span>
</div>
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.
I have two elements (a button and an anchor tag) both with a dynamical text inside that grow to the length of their content.
I cannot know which one of them will be the longest at compile time, nor can I know what the maximum/minimum width will be.
The shorter one should always adapt to the longest one.
<span id="buttonsColumn">
<button type="submit" name="powerSearchSubmitButton" id="powerSearchSubmitButton">
<span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Search")%></em></span>
</button>
<a class="linkButton" href="something">
<span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Advanced")%></em></span>
</a>
</span>
The wrapping span can be changed to anything desired.
Any ideas?
You could try something like this:
#buttonsColumn {
display: block;
float: left;
background-color: #F88;
}
#buttonsColumn button,
#buttonsColumn a {
display: block;
}
#buttonsColumn button {
width: 100%;
background-color: #8F8;
}
#buttonsColumn a {
width: 100%;
background-color: #88F;
}
As I see it, you could do it two ways:
Figure out the length on the ASP side and set a variable with the length of the larger, then use that in a size property on each.
Write a javascript function to figure out which of the two is larger and set the length of both to that.
Might I suggest you give up and use tables?
They are still part of the specification after all, and what you're doing could be construed as tabular data. All you'd need to add would be a style="width:50%" to each table data tag and a style="width:100%" tag to the button.
<table>
<tr>
<td style="width:50%">
<button type="submit" style="width:100%" name="powerSearchSubmitButton" id="powerSearchSubmitButton">
<span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Search")%></em></span>
</button>
</td>
<td style="width:50%">
<a class="linkButton" href="something">
<span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Advanced")%></em></span>
</a>
</td>
</tr>
</table>
You can probably get rid of those spans within the button and anchor tags, they don't seem to serve a purpose unless your CSS is doing something with the span children of the container.