I am trying to create an HTML,which should look as follows:-
I am able able to make it but i have a very specific requirement to make it such that when the font size of the first div increases(ie "Gross margin amount'),the div should wrap the text inside it.
But when the font-size of the same increases i get output like follows
Here is my code
<div style="width:132.5px; height:140.5px;background-color:#759BA6;display:block;float:left;margin:3px">
<div style="background-color:#759BA6;width:100%;height:50%;float:top;color: black;">
<span style="font-style:bold;font-size:18.52px;line-height: -moz-block-height;text-align:center;word-wrap: break-word;width:100%;height:100%">Gross Margin Amount</span>
</div>
<div style="background-color:#084C61;font-style:bold;font-size:18.52px;line-height: -moz-block-height;text-align:center;width:100%;height:50%;color: white;float:bottom">
<span style="font-size:13.52px"></span>2,483<span style="font-size:13.52px"></span>
</div>
</div>
Here is the fiddle i have created for reference.
I don't know what should i do to make the first div to wrap text inside it.Any help will be appreciated!
Make height of the div to 100 %:
<div style="width:132.5px; height:100%.5px;background-color:#759BA6;display:block;float:left;margin:3px"><div style="background-color:#759BA6;width:100%;height:100%;float:top;color: black;"><span style="font-style:bold;font-size:28.52px;line-height: -moz-block-height;text-align:center;word-wrap: break-word;width:100%;height:100%">Gross Margin Amount</span></div>
fiddle
Related
the code is not so small to paste it here, so I'm including a codepen link,
but I'm sure its easy to read and understand.
The Problem is: There's extra empty space below body and I learned that it's caused by the body not expanding to fit in the itemsbox div's 10% margin on top and bottom, I want to know why it is not expanding and what can be done to make it expand so as to fit the itemsbox including it's margin.
Additional info: The body expands to fit itemsbox including it's margin on top and bottom if there's 3 or more rows of products in the itemsbox excluding the productdummies, you can copy the following product code and add it before the first productdummy, to see this in action.
Add 5 copies of this code.
<div class="product" id="2155640">
<div class="product-imagecontainer"><img class="product-image" src=""></div>
<p class="product-name">Ninja Melk</p>
<p class="product-price">$24</p>
<button class="product-button-addtocart" onclick="addtocart">Add To Cart</button>
</div>
no needed of line min-height in #itemsbox
and remove two line in file html
<div class="product product-dummy"></div>
<div class="product product-dummy"></div>
What I want to do is basically this
But for this solution to work, I need to specify the height of the div, but the div needs to fill all the remaining height, so I found this
the issue is: each answer works separately, but both together seems to not work.
Here's what I have:
<body>
<div id="master-page">
<div id="some-unknown-size-content"></div>
<div id="separator"></div>
<div id="sub-master-page">
<div id="more-unknown-size-content"></div>
<div id="another-separator">
<div id="scrollable-content-taking-remaining-space">
<!-- content -->
</div>
</div>
</div>
</body>
The master-page have an asp:placeholder which is replaced by div sub-master-page
The sub-master-page have another asp:placeholder which is replaced by div scrollable-content
I don't know if i understood your question correctly or not.
You can use following jquery code to calculate and assign remaining space
var remaining_space = $('#master-page').height() - $('#some-unknown-size-content').height()-$('#more-unknown-size-content').height()-$('#separator').height();
$('#scrollable-content-taking-remaining-space').css('height',remaining_space+'px');
you can go to following link to see it in action:
https://jsfiddle.net/fq7bgo4w/
My scenario is to achieve a section in web page looks like this:
I am okay to use image and I am okay to use css. But as I am working in Salesforce, it is quite hard to put images into css file or section which means I can't use css code like this:
.wStatusCompleted {
background: #DBFBD6 url(../img/wizardCompleted.png) 20px 16px no-repeat;
}
Everything else is fine but putting the url of image in the css will result in resource not found. So I am trying to achieve it via html way and here is what I tried:
<div style="float:left">
<img src="{!$Resource.wizardCompleted}"/>
</div>
<div>
<span style="font-size:18px;margin-bottom:20px;"> Completed</span>
<br />
<span>Well done, you have successfully completed this request and received payment.</span>
</div>
I have tried a couple of things and this is the closest one but still not what I want. Any suggestions?
Edit
To answer the comment, the above html will result in an image as shown below:
You should be floating both of your divs not just the one wrapping the image:
<div style="float:left;">
<img src="http://www.placecage.com/50/50"/>
</div>
<div style="float:left;">
<span style="font-size:18px;margin-bottom:20px;"> Completed</span><br/>
<span>Well done, you have successfully completed this request and received payment.</span>
</div>
Be sure to clear your floats using overflow:hidden or a clearfix on a parent element or (in the event that there is no parent) by adding an empty element set to clear:both. This appeared to be working but your second container was actually sitting behind the image because of the float:left
FIDDLE
To align the text in the middle just use display:inline-block instead of float:left and set vertical-align:middle; for both of them:
NEW FIDDLE
You can try also display:inline to make the img behave like a text element.
<img src="http://png.findicons.com/files/icons/985/affel/128/tick.png" style="display:inline-block;"/>
<div style="display:inline-block; vertical-align:top; margin-top:2em;">
<span style="font-size:18px;margin-bottom:20px;">Completed</span><br/>
<span>Well done, you have successfully completed this request and received payment.</span>
</div>
Fiddle to play with
I want to show a decimal number with currency sign.
The currency and the floating point number should be smaller that the integer part.
For example: $ 4,080,048.00
In the jsFiddle you can see the first line is how I want it to be, but it is written in old HTML style.
I done that with modern HTML (The div with 3 spans) but I have a space between the decimal point: $ 4,080,048. 00.
How can I make the second line to looks like the first one?
Write the markup in a way that there is no space between the spans will fix the problem
<div class="container">
<span class="currency">$</span>
<span class="integer">4,080.</span><span class="decimal">53</span>
</div>
Or, if you don't want to change the markup, you could add font-size:0; to your container class
FIDDLE
.container
{
font-size:0;
}
Yet another option would be to add comments between elements within your markup to make it as if the elements were written one after the other:
FIDDLE
<div class="container">
<span class="currency">$</span><!--
--><span class="integer">4,080.</span><!--
--><span class="decimal">53</span>
</div>
It's the white space which is causing this issue
<div class="container">
<span class="currency">$</span>
<span class="integer">4,080.</span><span class="decimal">53</span>
</div>
http://jsfiddle.net/yrFeB/2/
I cannot add the comment in the answer above but you shouldn't use float: left; for this purpose
I'm trying to make two horizontal divisons using <div> tag in html, but I couldn't make it. Can anyone help me make horizontal division using html and css with <div> tags?
<div id="firstDivistion" class="division"></div>
<div id="secondDivistion" class="division"></div>
.division{
width:50%;
height:100px;
float:left;
}
`<div style='float:left'>stuffs</div>
<div style='float:right'>stuffs</div>
<div style='clear:both'></div>`
Works well in every cases and is followed in many places...
Set the float property for each div to be matched, for example left to each, give each of them enough width so that the parent contains them.
DEMO