here's my code:
<div class="search-option">
<div id="slider-days" class="search-opt-left"></div>
<input type="text" id="amount-days" class="search-opt-right input-small"/>
</div>
I want to make the slider and input field algin to the middle of the line.
How can i do that ? Thanks !
My CSS:
.search-opt-left {
float: left;
width: 250px;
vertical-align: middle;
}
.search-opt-right {
float: left;
margin-left: 20px;
}
This can be buggy.
What I usually do is make a table. And since table rows start with vertically-centered alignments, it's quite simple.
<div class="search-option">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="slider-days" class="search-opt-left"></div>
</td>
<td>
<input type="text" id="amount-days" class="search-opt-right input-small"/>
</td>
</tr>
</table>
</div>
You may then alter your CSS to get rid of the un-needed stuff.
Related
Here is example:
<table>
<tr>
<td style="background: lightgreen; vertical-align: middle">
<button type="button">b1</button>
</td>
<td style="background: yellow; vertical-align: middle">
<button type="button">b2</button>
<textarea cols="40" rows="2"></textarea>
</td>
</tr>
</table>
And here is JSFiddle link: http://jsfiddle.net/jhqjumgL/1/
I guess it's self-explaining, i need here all buttons vertically centered, but button paired with textarea for some reason decided to rest at bottom, any idea how to solve ?
You need to vertically align the textarea as well:
button, textarea {
vertical-align: middle;
}
Fiddle: http://jsfiddle.net/abhitalks/jhqjumgL/2/
The vertical-align property to sets the vertical alignment of an element.
So, you give it to element display vertically like following :
button{
vertical-align : middle;
}
Try this
<table>
<tr>
<td style="background: lightgreen;">
<button type="button">b1</button>
</td>
<td style="background: yellow;">
<button type="button">b2</button>
<textarea cols="40" rows="2" style="vertical-align: middle"></textarea>
</td>
</tr>
</table>
I have the HTML code below. I am trying to align the text boxes so they line up one below the other. I have the CSS below that. Not successful. Note that the .Label and .TextBoxFor merely create and Label and Text box.
<div style="text-align: left; width: 1000px">
<fieldset>
<legend>Information</legend>
<div class="form-element-row">
#Html.Label("Collector")
#Html.TextBoxFor(model => model.Collector)
</div>
<div style="clear:both"></div>
<div class="form-element-row">
#Html.Label("Email")
#Html.TextBoxFor(model => model.Email)
</div>
</fieldset>
Here is the css
.form-element-row
{
float: left;
}
.form-element-row label
{
margin: 0px;
min-width: 400px;
}
.form-element-row input
{
margin: 0px;
width: 500px;
}
Try displaying your forms as list items like so:
.form-element-row label, .form-element-row textarea {
display: list-item;
list-style: none;
}
Easiest way is to use table. This way you will not have to worry about any alignments.
You can do it like this:
<div style="text-align: left; width: 1000px">
<fieldset>
<legend>Information</legend>
<table>
<tr>
<td style ="width:30%;">
XXX
</td>
<td>
<input type="textbox"/>
</td>
</tr>
<tr>
<td>
YyYY
</td>
<td>
<input type="textbox"/>
</td>
</tr>
</table>
</fieldset>
</div>
I searched a lot, but now want to ask because I found no answer:
If have two div elements that should be located next to each other with full width (each exactly 50% of the full width). It could be that the first or the second div is hidden (style="display=none"). In this case the other div should be displayed in full width.
My solution is this:
<table style="width: 100%;">
<tr>
<td style="padding: 0px;">
<div id="div1">
...
</div>
</td>
<td style="padding: 0px;">
<div id="div2">
...
</div>
</td>
</tr>
</table>
That works almost perfect, BUT when both divs are displayed the first one seems to be 55% and the second one 45% of the width.
If course I can set the width of the div when hiding the other to 100%, but I want to avoid doing that.
Does anyone have a solution to make them both 50% when both are displayed.
A JQuery approach with no tables
You can achieve this with JQuery (or plain javascript) which I am assuming you are using to show/hide the elements anyway.
$("#ButtonOne").click(function () {
$(".one").toggle();
if($(".one").is(":visible")){
$(".two").css("width", "50%");
}
else{
$(".two").css("width", "100%");
}
});
$("#ButtonTwo").click(function () {
$(".two").toggle();
if($(".two").is(":visible")){
$(".one").css("width", "50%");
}
else{
$(".one").css("width", "100%");
}
});
The above JQuery assumes two buttons for toggling the visibility of the elements.
Here is an example
With the example, it should be noted that using 50% width with inline-block requires zero whitespace in between the elements. Hence the </div><div... requirement.
You will need some vertical-align:top; aswell to ensure the DIV elements stay in line.
Incase the link ever breaks, here is the accompanying HTML...
<div class="main">
<div class="one">this is one</div><div class="two">this is two</div>
</div>
<input type="button" id="ButtonOne" value="Toggle one" />
<input type="button" id="ButtonTwo" value="Toggle two" />
...and CSS...
body{
margin:0;
padding:0;
}
div{
margin:0;
padding:0;
}
.one {
background-color:red;
height:100px;
width:50%;
display:inline-block;
}
.two {
background-color:blue;
height:100px;
width:50%;
display:inline-block;
}
Can you place both divs in the same table cell?
<table style="width: 100%;">
<tr>
<td>
<div id="div1">
...
</div>
<div id="div2">
...
</div>
</td>
</tr>
</table>
You could simply toggle a class....
table { width: 100%; padding:0; }
td { padding:0; margin:0; }
td > div { width: 50%; display: block; float: left; height: 50px; cursor: pointer; }
#div1 {background: #a00;}
#div2 {background: #00a;}
.wide {width: 100%;}
.hide { display: none;}
and the jquery...
$('div').click(function () {
$(this).toggleClass('wide');
$('div').not(this).toggleClass('hide');
});
DEMO HERE
Would work for multiple divs easily: demo 2
Use table-layout:fixed:
EDIT:
You have to set the display:none on the td, not on the div.
<table style="width: 100%; table-layout:fixed">
<tbody>
<tr>
<td style="padding: 0px; width:50%">
<div id="div1" style="border: 1px solid black">
This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text
</div>
</td>
<td style="padding: 0px; width:50%; display: none;">
<div id="div2" style="border: 1px solid black">
This isn't as long as the other text.
</div>
</td>
</tr>
</tbody>
</table>
I've tested it on Chrome, Firefox and IE10
ok guys,
thanks for your help. now i found what i was searching for:
<table style="width: 100%;">
<tr>
<td id="td1" style="padding: 0px; min-width:50%;">
<div>
...
</div>
</td>
<td id="td2" style="padding: 0px; min-width:50%;">
<div>
...
</div>
</td>
</tr>
</table>
both td tags are next to each other and both take exactly 50%. when hiding td1 or td2, the other td goes into full width automatically.
best regards...
You can achieve this by setting width in the td itself, and when you want to hide any one div just add "display:none;" in the specified td instead of the div, then the remaining div will have 100% width.
<table style="width: 100%;">
<tr>
<td style="padding: 0px; width:50%;">
<div id="div1" >
hii
</div>
</td>
<td style="padding: 0px;width:50%;">
<div id="div2" style="">
byyee
</div>
</td>
</tr>
</table>
I've been looking for a way to produce the following HTML table with CSS:
<style type="text/css">
table.frm tr td { vertical-align: top; padding-right: 10px; }
</style>
<table class="frm">
<tr>
<td rowspan="2">Label 1:</td>
<td><input type="text" /></td>
<td rowspan="2">Label 2:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Validation Message 1</td>
<td>Validation Message 2</td>
</tr>
<tr>
<td rowspan="2">Label 3:</td>
<td><input type="text" /></td>
<td rowspan="2">Label 4:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Validation Message 3</td>
<td>Validation Message 4</td>
</tr>
</table>
The problem I've been having when I try to replace this with divs is that I can't align both the columns and the rows. I've tried using floats to align the columns, but then I loose the vertical alignment of the rows. But if I use a clear to align the rows, I loose the horizontal alignment of the columns.
Many of the examples I've seen for converting tables to divs use fixed or percentage widths, but I want the layout to have the same fluid behavior of the table since the validation messages may or may not appear and the labels/fields will have varying sizes.
Is there a designer out there who can show me how this layout can be achieved without tables?
This is not a problem with display (CSS2), but it requires IE7+. Please see this example fiddle:
Markup:
<form>
<span>
<label for="edit1">First label:</label><input id="edit1" type="text" />
<label for="edit2">Second label:</label><input id="edit2" type="text" />
</span>
<span>
<br /><p>That sounds right!</p>
<br /><p>Problem!</p>
</span>
<span>
<label for="edit3">3:</label><input id="edit3" type="text" />
<label for="edit4">Fourth and last label:</label><input id="edit4" type="text" />
</span>
<span>
<br /><p>No succes. Try again and enter another value.</p>
<br /><p>Wait...</p>
</span>
</form>
Style sheet:
form {
display: table;
}
form span {
display: table-row;
}
form span * {
vertical-align: top;
padding-right: 10px;
display: table-cell;
}
The problem you're facing is you are looking at each cell as its own little block of data. You need to look at the bigger picture. What is that collection of data? Is it actually a list of things? Does it belong in a ul or dl?
Quit trying to make this look like a table with different elements when it's not a table at all. And tables should never be used for layout.
Fluid is very vague term, by fluid do you mean its width can expand and contract like a table does for different size screens, or when the browser window is resized? Or do you want he column widths to all adjust to same width as the cell with the longest/largest content?
The first is done like so
<div style="position: absolute; width: 100%;">
<div style="position: relative; width: 100%; clear: both;">
<div style="position: relative; width: 50%; float: left;"> </div>
<div style="position: relative; width: 50%; float: left;"> </div>
</div>
<div style="position: relative; width: 100%; clear: both;">
<div style="position: relative; width: 50%; float: left;"> </div>
<div style="position: relative; width: 50%; float: left;"> </div>
</div>
</div>
That should simulate two rows with two columns in each row and widths are based on the screen size.
The second with the columns adjusting based on the content size.
<div style="position: absolute; width: 100%;">
<div style="position: relative; float: left;">
<div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
<div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
</div>
<div style="position: relative; float: left;">
<div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
<div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
</div>
</div>
That is two columns with with two rows each. Set the "min-width" and "max-width" to whatever you need. I don't think I have ever had a reason to test anything like this, so if it doesn't work you could try setting "display: inline" for each row.
And If neither of these work try posting your test code. I am certain you can make a tables out of divs. A while back after several years of not using tables I inadvertently made a site, that should have used tables, out of divs. What your looking to do can be done it is just a matter of working the CSS.
I have a cell in an HTML <table>. I would like part of the cell contents to be left justified and part to be right justified. Is this possible?
If you want them on separate lines do what Balon said. If you want them on the same lines, do:
<td>
<div style="float:left;width:50%;">this is left</div>
<div style="float:right;width:50%;">this is right</div>
</td>
I came up with this while trying to figure out how to display currency ('$' to left, number to right) in table cells:
<div class="currency">20.34</div>
.currency {
text-align: right;
}
.currency:before {
content: "$";
float: left;
padding-right: 4px;
}
It is possible but how depends on what you are trying to accomplish. If it's this:
| Left-aligned Right-aligned | in one cell then you can use floating divs inside the td tag:
<td>
<div style='float: left; text-align: left'>Left-aligned</div>
<div style='float: right; text-align: right'>Right-aligned</div>
</td>
If it's
| Left-aligned
Right Aligned |
Then Balon's solution is correct.
If it's:
| Left-aligned | Right-Aligned |
Then it's:
<td align="left">Left-aligned</td>
<td align="right">Right-Aligned</td>
Tor Valamo's answer with a little contribution form my side: use the attribute "nowrap" in the "td" element, and you can remove the "width" specification. Hope it helps.
<td nowrap>
<div style="float:left;">this is left</div>
<div style="float:right;">this is right</div>
</td>
Do you mean like this?
<!-- ... --->
<td>
this text should be left justified
and this text should be right justified?
</td>
<!-- ... --->
If yes
<!-- ... --->
<td>
<p style="text-align: left;">this text should be left justified</p>
<p style="text-align: right;">and this text should be right justified?</p>
</td>
<!-- ... --->
td style is not necessary but will make it easier to see this example in browser
<table>
<tr>
<td style="border: 1px solid black; width: 200px;">
<div style="width: 50%; float: left; text-align: left;">left</div>
<div style="width: 50%; float: left; text-align: right;">right</div>
</td>
</tr>
</table>
You could use something like:
<td>
<div style="float:left;width:49%;text-align:left;">this is left</div>
<div style="float:right;width:49%;text-align:right;">this is right</div>
</td>
The 49% is to give some room for the renderer to wrap things around.
And you can use either <div> or <span>