Is there a way that i can make the word align properly? I tried to add word-break and word-wrap property in but it didn't make any different.
<div class="transreview" style="float: right; background-color: #e0e0e0; word-wrap: break-word; border-radius: 5px; padding: 10 20 10 20px;">
<div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
<label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Subtotal</b></label>
<div class="review-label" style="float: right; text-align: right; height: 20px; width: 120px; padding: 5 5 5 5px">S$42.50</div>
</div>
<div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
<label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Total Shipping</b></label>
<div class="review-label" style="float: right; text-align: right; height: 20px; width: 120px; padding: 5 5 5 5px">S$42.50</div>
</div>
</div>
Turn it into a table. I made a Fiddle. Just tweak the CSS and you should get the same result. But don't add CSS inline!
HTML
<table>
<tbody>
<tr>
<td>
Subtotal
</td>
<td>
<label>
S$42.50
</label>
</td>
</tr>
<tr>
<td>
Total Shipping
</td>
<td>
<label>
S$42.50
</label>
</td>
</tr>
<tr>
<td>
Tax
</td>
<td>
<label>
S$42.50
</label>
</td>
</tr>
<tr>
<td>
Discount
</td>
<td>
<label>
S$42.50
</label>
</td>
</tr>
<tr>
<td>
Total (including tax, if applicable)
</td>
<td>
<label>
S$42.50
</label>
</td>
</tr>
</tbody>
</table>
CSS
table{
background-color: #E0E0E0;
border-radius: 5px;
padding: 4px 0;
}
td label{
background-color: #FFF;
border-radius: 5px;
padding: 4px 4px 4px 20px;
}
td{
padding: 4px;
}
You have to put the fixed width for both the Parent container and the label. Please check http://jsfiddle.net/fanafazil/rcye5m36.
<div class="transreview" style="float: right; background-color: #e0e0e0; word-wrap: break-word; border-radius: 5px; padding: 10 20 10 20px; width: 210px;">
<div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
<div style="float: left;width:100px;padding-right: 5px;">
<label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Sub Total</b></label>
</div>
<div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
</div>
<div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
<div style="float: left;width:100px;padding-right: 5px;">
<label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Total Shipping</b></label>
</div>
<div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
</div>
<div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
<div style="float: left;width:100px;padding-right: 5px;">
<label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Tax</b></label>
</div>
<div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
</div>
<div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
<div style="float: left;width:100px;padding-right: 5px;">
<label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Discount</b></label>
</div>
<div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
</div>
<div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
<div style="float: left;width:100px;padding-right: 5px;">
<label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Total Shipping(Including Tax and VAT)</b></label>
</div>
<div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
</div>
</div>
Related
I am using mPDF to create a PDF from the following HTML-Code:
<div style="border: 5px solid black; height: 115px;">
<div style="width: 29%; height: 115px; float: left; background-color: red;">
<img src="testimage.png"
alt="Bild 1" style="height: 115px;">
</div>
<div style="width: 55%; float: left; padding-top: 60px; font-size: 18px; font-weight: bold;">
SOME TEXT
</div>
<div style="float: right; width: 16%; font-size: 18px; padding-top: 10px;">
<div style="float: left; width: 25px;">ANOTHER TEXT</div>
</div>
</div>
The outcome in the PDF is rather unsatisfying:
The outcome
I am dealing with this weird space below the image. I tried giving the image a blue and the div a red background and it is always red, so the div is too high. It just ignores every fixed height I give. I already read about using display: top but none of it worked. What exactly is the problem here? On a HTML-Page everything is just fine.
Try adding width:100%; height:100%; object-fit:cover; to the image. Hope it works for you.
<div style="border: 5px solid black; height: 115px;">
<div style="width: 29%; height: 115px; float: left; background-color: red;">
<img src="https://via.placeholder.com/150"
alt="Bild 1" style="width:100%;
height:100%;
object-fit:cover;">
</div>
<div style="width: 55%; float: left; padding-top: 60px; font-size: 18px; font-weight: bold;">
SOME TEXT
</div>
<div style="float: right; width: 16%; font-size: 18px; padding-top: 10px;">
<div style="float: left; width: 25px;">ANOTHER TEXT</div>
</div>
</div>
creating this application in MVC5 with bootstrap....
I have added div :
<div class="divFullWidth" style="margin:10px 0px 0px -15px; height:150px;background-color:grey;">
<div class="wireframe_div">
<div class="Row">
<div class="Cell">
#Html.Label("Ext :")
</div>
</div>
<div class="Row">
<div class="Cell">
#Html.TextBox("txt_Ext", null, new { #class = "form-control" })
</div>
</div>
</div>
</div>
CSS :
.wireframe_div {
border: 1px solid black;
background-color: darkgrey;
padding: 15px 20px 25px 20px;
.Cell
{
display: table-cell;
padding-left: 5px;
padding-right: 5px;
}
.Row
{
display: table-row;
}
.divFullWidth {
float: left;
width: 100%;
}
But am not able split the div exactly like in screen shot.
Can any one help on this. Am very new to web tech.
<div style="width: 100%; height: 150px;">
<div style=" width: 100%; height: 30%;">
Ext <input type="text" style="width: 35%;"/>
Area <input type="text" style="width: 10%;"/>
</div>
<div style="width: 50%; height: 70%; float: left; text-align: center;">
Activity Catagory <input type="text" style="width: 80%;"/>
</div>
<div style="width: 50%; height: 70%; float: right;">
<div style="width: 50%; height: 100%; float: right; text-align: center;">
Activity Date To<input type="text" style="width: 80%;"/>
</div>
<div style="width: 50%; height: 100%; float: left; text-align: center;">
Activity Date From <input type="text" style="width: 80%;"/>
</div>
</div>
</div>
also try bootstrap it makes life easy
What's wrong with the code. The border is faulty.
<div id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;">
<div id="USER" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p>
<input id="txt_ID" type="text" style="width: 45%; float: left"/>
</div>
<div id="PASS" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p>
<input id="txt_Password" type="text" style="width: 45%; float: left"/>
</div>
</div>
You are using floats in the inner divs so the parent has no height. Just set float: left; to the contents div and you see your problem.
<div id="contents" style="width: 50%; height: auto; margin: 0 auto; float: left; left: 50%; border: 2px solid #73AD21;">
<div id="USER" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p>
<input id="txt_ID" type="text" style="width: 45%; float: left"/>
</div>
<div id="PASS" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p>
<input id="txt_Password" type="text" style="width: 45%; float: left"/>
</div>
</div>
You should probably not use inline-css but rather have a external css-file and use clearfix to clear floats on the contents div instead.
You using float elements so add clear: both before main div end
<div id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;">
<div id="USER" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p>
<input id="txt_ID" type="text" style="width: 45%; float: left"/>
</div>
<div id="PASS" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p>
<input id="txt_Password" type="text" style="width: 45%; float: left"/>
</div>
<div style="clear: both"></div>
</div>
You have to clear floats.
Add following css
#contents:after {
content: '';
display: table;
clear:both;
}
You can apply #contents { float: left} or use clear float trick for parent to take inner element height:
#contents {
width: 50%;
height: auto;
margin: 0 auto;
left: 50%;
border: 2px solid #73AD21;
}
#contents:after {
content: '';
display: block;
clear: both;
}
#contents > div {
margin: 5px;
}
#contents p {
width: 50%;
text-align: left;
padding-left: 1%;
float: right;
font-size: large;
}
#contents input {
width: 45%;
float: left
}
<div id="contents">
<div id="USER">
<p>user :</p>
<input id="txt_ID" type="text" />
</div>
<div id="PASS">
<p>pass :</p>
<input id="txt_Password" type="text" />
</div>
</div>
It's because you're using float - this takes the element out of the normal flow, because everything is floated, the outer div has no height.
Use display: inline-block instead:
<div id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;">
<div id="USER" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; font-size: large; display: inline-block;"> user :</p>
<input id="txt_ID" type="text" style="width: 45%; display: inline-block;"/>
</div>
<div id="PASS" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; font-size: large; display: inline-block;">pass :</p>
<input id="txt_Password" type="text" style="width: 45%; display: inline-block;"/>
</div>
</div>
link to fiddle
Your parent container is being collapsed by its floated children. I recommend using a clearfix class:
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
<div class="cf" id="contents" style="width: 50%; height: auto; margin: 0 auto; left: 50%; border: 2px solid #73AD21;">
<div id="USER" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large"> user :</p>
<input id="txt_ID" type="text" style="width: 45%; float: left"/>
</div>
<div id="PASS" style="margin: 5px">
<p style="width: 50%; text-align:left; padding-left: 1%; float: right; font-size: large">pass :</p>
<input id="txt_Password" type="text" style="width: 45%; float: left"/>
</div>
</div>
Clearfix source: http://nicolasgallagher.com/micro-clearfix-hack/
Info on clearfix: What is a clearfix?
<div class="dispLoginSearch"> <!-- LOGIN AND SEARCH -->
<div class="loginBox">
<div class="loginTopHolder hidOverflow">
<div class="floatLeft setCenter hidOverflow" style="width: 45%;">
<span class="myText">My</span>
<br /><br />
<span class="wmText">Login</span>
</div>
<div class="floatRight hidOverflow" style="height: 100%; background: #FF0000;">
<div class="hidOverflow brClear" style="height: 50%; background: #0000FF;">
<input type="submit" name="ctl00$SubmitLoginNM" value="Login" id="ctl00_SubmitLoginNM" class="styledBtn logBtn floatLeft lightLinks" />
</div>
<div class="hidOverflow brClear" style="height: 50%; font-size: small; display: table-cell; vertical-align: bottom;">
Register a New Account
<br />
Forgot Username/Password
</div>
</div>
</div>
</div>
</div> <!-- LOGIN AND SEARCH -->
CSS:
CSS:
.dispLoginSearch {
width: 40%;
height: 100%;
vertical-align: middle;
float: right;
padding-right: 2%;
background: #FFFFFF;
overflow: hidden;
text-align: center;
margin: 0 auto;
}
.loginBox {
margin-top: 3%;
border: 1px solid #d4d4d4;
display: block;
width: 95%;
font: 16px sans-serif;
padding: 0 0 0 15px;
border-radius: 5px;
-webkit-font-smoothing: antialiased;
text-align: left;
overflow: auto;
}
.loginTopHolder {
width: 95%;
margin: 5px 5px 5px 5px;
height: 85px;
}
.hidOverflow {
overflow: hidden;
}
.setCenter {
text-align: center;
}
.brClear {
clear: both;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
Output:
I want the green DIV to get the 50% of the height and align the text bottom, but can't seem to get it done.
Please help me resolve it.
The parent element should be defines as position: absolute; so the child elements width and height depends on that
I have a textarea message box with 2 rows and 20 columns. I want to keep the label for this box - 'Message' exactly in center outside textarea. What css properties should I use to align it ? I used the following method but it is not helping in my case.
CSS:
.headerImage {
width: 100%;
text-align: center;
}
.footer {
width: 100%;
text-align: center;
border: 0;
}
.page {
margin-top: 42px;
padding: 10px;
width: 866px;
text-align:left;
margin-left: auto;
margin-right: auto;
border: 1px solid #C0C0C0;
border-top: 0px;
margin-bottom: 10px;
}
.main {
margin: 10px;
border-style: groove;
padding: 20px;
}
.borderhead {
z-index: 10;
position: relative;
top:-32px;
left: 2px;
background: white;
}
.commonText {
font-family: arial;
font-size: 11px;
color: black;
text-align: left;
line-height: 16px;
}
.mandatoryStar {
color: red;
padding-right: 5px;
font-size: 12px;
}
.padTxtbox {
padding-left: 5px;
font-family: arial;
padding-bottom: 5px;
text-align: left;
color: black;
font-size: 11px;
display:inline;
position: relative;
}
.contactPad {
margin-left: 300px;
position: absolute;
display: inline;
font-family: arial;
font-size: 11px;
color: black;
text-align: left;
line-height: 16px;
}
.txtBox {
font-family: arial;
font-size: 11px;
width: 150px;
}
.errormsg {
font-family: arial;
font-size: 11px;
color: red;
}
.suggest {
padding-left: 10px;
font-family: arial;
font-size: 11px;
padding-bottom: 4px;
vertical-align: middle;
display: inline-block;
}
.multitxtboxLarge {
width: 420px;
font-family: arial;
font-size: 11px;
height: 80px;
color: black;
}
.cancel {
vertical-align: top;
padding-left: 100px;
}
.textarea {
vertical-align:middle;
display: inline-block;
}
HTML:
<div class ="pa">
<br>
<div class="col-md-6 col-md-offset-2">
<div class="container">
<div class="row">
<ul class="nav nav-tabs">
<li class="active">Suggestions</li>
<li>Contact</li>
<li>Login/Register</li>
<li>Account</li>
<li>Journals</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
<div class="page">
<div class ="main">
<span class="borderhead">Contact Us</span>
<form name="form1" method="post" action="contact.php" id="form1">
<div id="commonText" class="commonText">
<div style="margin-left: 80px">
<table>
<tr>
<td class="commonText"><b>Mail</b></td>
<td class="contactPad"><b>Phone</b> 800-237-6999</td>
</tr>
<tr>
<td class="commonText">8789 San Jose Blvd #305,Mail,</td>
<td class="contactPad"><b>Fax</b> 800-647-1356</td>
</tr>
<tr>
<td class="commonText">Jacksonville, FL 32217</td>
<td class="contactPad">Submit form below.</td>
</tr>
</table>
</div>
All fields that have (<span class="mandatoryStar">*</span>) are mandatory fields.
<br>
<br>
<div style="padding-left: 46px;padding-bottom: 7px">
<span class="mandatoryStar">*</span>Name
<div class="padTxtbox">
<input name="txtName" type="text" id="txtName" class="txtBox" />
<span id="reqName" class="errormsg" style="color:Red;display:none;"></span>
</div>
</div>
<div style="padding-bottom: 8px">
<span class="mandatoryStar">*</span>E-mail Address
<div class="padTxtbox">
<input name="txtEmail" type="text" id="txtEmail" class="txtBox" />
<span id="reqEmail" class="errormsg" style="color:Red;display:none;"></span>
</div>
</div>
<div style="padding-left: 52px;padding-bottom: 6px"> Phone
<div class="padTxtbox">
<input name="txtPhone" type="text" maxlength="14" id="txtPhone" class="txtBox" />
<span id="regPhone" style="color:Red;display:none;"></span>
</div>
</div>
<div style="padding-bottom: 6px;padding-left: 80px">If you would like someone to contact you by phone, please provide the area code
and phone number to be used between 8:00 AM and 5:00 PM EST, Monday through Friday.</div>
<div class="suggest">
<span class="mandatoryStar">*</span> Message
<div class="padTxtbox">
<textarea name="txtMessage" rows="2" cols="20" id="txtMessage" class="multitxtboxLarge"></textarea>
<span id="reqMessage" class="errormsg" style="color:Red;display:none;"></span>
</div>
</div>
<br>
<div style="padding-left: 90px;padding-top: 6px">
<input type="image" name="imbSubmit" id="imbSubmit" src="images/submit.gif" alt="Submit" onclick="contactSubmit()"/>
<img alt="Cancel" src="images/cancel.gif" style="cursor:hand" onclick="ClearFormData()" class ="cancel"/>
</div>
</div>
</form>
</div>
Here is an example of how to do this :
<form>
<label for="textarea">Textarea:</label>
<textarea cols="50" id="title" name="title" rows="4"></textarea>
</form>
And css property :
label, textarea{
display:inline-block;
vertical-align:middle;
}
well you have to add this to your css
textarea{
display:inline-block;
vertical-align:middle;
}
vertical-align:top; or vertical-align:bottom;
and that's all, i hope i helped you :-D