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>
Related
I have a very simple situation that I can't for some reason resolve. In ASP.NET I am trying to align the textbox inside the inline table with the text so that the text will point at the middle of the textbox, not at its foundation
Here is the markup
<span style="margin-bottom:10px">This is the text</span>
<table class="inlineTable" border="1">
<tr>
<td style="vertical-align:bottom;padding: 0; margin: 0;">
<input name="TextBox1" type="text" id="TextBox1" />
</td>
</tr>
</table>
Here is the css
.inlineTable {
display: inline-table;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
}
Here is how it looks
As it is seen in the attachment, the text points at the base. How can I move the textbox a bit down so that the text would point to the middle of the left side?
Thank you very much in advance
try vertical-align:middle on the table
.inlineTable {
display: inline-table;
padding: 0;
}
table{
vertical-align:middle;}
<span >This is the text</span>
<table class="inlineTable" border="1">
<tr>
<td style="vertical-align:middle;padding: 0; margin: 0;">
<textarea ID="TextBox1">hi</textarea>
</td>
</tr>
</table>
This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
CSS- multiple background image
(3 answers)
Closed 5 years ago.
I've got three background images that I want to put at the bottom of the page, they are three pieces that fit together. So one has to be put at the bottom left, one at the center and one at the right. But sadly I can't seem to get them into place, I already have content on that page so it's kinda hard for me to put these backgrounds into place. Any advice on how to do this effectively?
HTML
html {
height: 100%;
width: 100%;
background-color: #fdb03c;
}
.cardbox {
border-radius: 5px;
padding: 20px;
#media only screen and (min-width: 480px) {
.cardbox {
margin-bottom: 16px; } }
#media only screen and (min-width: 992px) {
.cardbox {
margin-bottom: 24px; } }
}
.cardinputs input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.cardinputs input[type=email] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<html>
<head>
<title>
Formulier
</title>
<link rel="stylesheet" href="css/cece.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQU7qWa3PGgsj2p86DkfcxAJoCyiukqnA&v=3.exp&sensor=false&libraries=places"></script>
</head>
<body>
<div>
<form class="cardinputs" method="post">
<div class="cardbox">
<table>
<th>
Gegevens:
</th>
<tr>
<td>
<label for="BTW">BTW Nummer:</label>
</td>
<td>
<input type="text" id="BTW" name="BTWnummer" maxlength="11" required autofocus>
</td>
<td id="company">
</td>
</tr>
<tr>
<td>
<label for="contactpersoon">Contactpersoon:</label>
</td>
<td>
<input type="text" id="contactpersoon" name="contactpersoon" required>
</td>
</tr>
<tr>
<td>
<label for="functie">Functie:</label>
</td>
<td>
<input type="text" id="functie" name="functie" required>
</td>
</tr>
<tr>
<td>
<label for="email">E-mailadres:</label>
</td>
<td>
<input type="email" id="email" name="email" required>
</td>
</tr>
<tr>
<td>
<label for="telefoonnummer">Telefoonnummer:</label>
</td>
<td>
<input type="text" id="telefoonnummer" name="telefoonnummer" required>
</td>
</tr>
<tr>
<td><input type="submit" id="formsubmit" name="submitformulier" disabled></td>
</tr>
</table>
</div>
</form>
</div>
</body>
<script src="js/javascript.js?t=<?php time(); ?>"></script>
</html>
Thank you in advance.
try to use bootstrap grid system, in that way you can put them in a row , and divide that row into 3 columns:
Small demo :
<div class="row">
<div class="col-md-4"> image 1 here </div>
<div class="col-md-4"> image 2 here </div>
<div class="col-md-4"> image 3 here </div>
</div>
In this way, you're giving each image 4 columns off the 12 columns of the page, they would be automatically positioned left - center - right.
Try Wrapping them all in an inline div with the following style:
display:flex
flex-direction: row
<div>
<imgLeft>
<imgCenter>
<imgLast>
</div>
That should do it.
First: I would use a container for them, for good practice, and the
EXAMPLE:
<div>
<Element-with-image>
<Element-with-image>
<Element-with-image>
</div>
Then I would float them all left, or use display: inline-block.
div element-with-image{
float: left;
}
or
div element-with-image{
display: inline-block;
width: 33.33%
}
and then I would give them a percentage of 33.333 each so they spread equally across the page. If you want them to be all the way at the bottom, just make sure that entire HTML block of code is at the very bottom of your page.
I hope that helps
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>
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.
Whats the best way to split up a table element <td>? I don't really want to use nested tables. I need the internal element to have two elements one that is left justified and the other to be right justified with no border.
For example:
<table>
<tr>
<td>LEFT, RIGHT</td>
</tr>
</table>
any other ways to do this besides the following?
<table>
<tr>
<td>LEFT</td>
<td>RIGHT</td>
</tr>
</table>
I want the internal element to be a <span> or whatever is best for this.
<table>
<tr>
<td>
<div style="float:left">LEFT</div><div style="float:right">RIGHT</div>
</td>
</tr>
</table>
I would do something like:
<td><div class="left>LEFT</div><div class="right">RIGHT</div></td>
then my css would resemble:
td{position: relative;}
td .left{position: absolute; text-align: left; left: 0;}
td .right{position: absolute; text-align: right; right: 0;}
... or something along those lines.
You could do it like this, although spans and divs are much better imo.
<table width="100%">
<tr width="100%">
<td width="100%">
<span style="float:left;">left</span>
<span style="float:right;">right</span>
</td>
</tr>
</table>
The floats didn't seem to look right so I used flexbox:
https://jsfiddle.net/6rc8w709/
.td-content{
display:flex;
}
.child{
flex:1;
}
.right{
text-align:right;
}
HTML:
<table>
<tr>
<td>
<div class="td-content">
<div class="child">
LEFT
</div>
<div class="child right">
RIGHT
</div>
</div>
</td>
</tr>
</table>
Flexbox is the right approach since it is now supported by all major browsers. This is an alternative approach if you need to target an older browsers or you don't like the drawbacks of floats. With this approach you can control the overflow of the left and right segment better and you can easily add a centered segment if you need one.
CSS:
table{
width: 100%;
}
.container{
width: 100%;
display: table;
}
.cell{
display: table-cell;
}
.cell .left{
text-align: left;
}
.cell.right{
text-align: right;
}
HTML:
<table>
<tr>
<td>
<div class="container">
<span class="cell left">LEFT</span>
<span class="cell right">RIGHT</span>
</div>
</td>
</tr>
</table>