how to make the second div properly align with the first div....
i gave display inline for horizontal alignment...
but the second div is still down...
i am talking with respect to 24 inch monitor....
http://jsfiddle.net/ke6Se/1/embedded/result/
<div style=" width: 300px; display: inline-block;">
<span style="color: #000; font-size: 12px; font-family: arial; font-wieght: bold; margin-left: 45px;">Mark Up</span><span style="margin-left: 110px;">10%</span>
<div>
<span style="margin-left: 45px;">Non-Tax Amount</span><span style="margin-left: 59px;">0</span>
</div>
</div>
first of all, as Kevin said in his comment, you're html is wrong. You have one div nested inside the other. Fix that and then apply inline-block to the second div
<div style=" width: 300px; display: inline-block;">
<span style="color: #000; font-size: 12px; font-family: arial; font-wieght: bold; margin-left: 45px;">Mark Up</span><span style="margin-left: 110px;">10%</span>
</div>
<div style="display:inline-block">
<span style="margin-left: 45px;">Non-Tax Amount</span><span style="margin-left: 59px;">0</span>
</div>
Here's the obligatory fiddle
Your fiddle is really busy and I can't find exactly where it is, but it has to do with your margins and widths. You should set a wrapper <div> to a fixed width then float: right the <div> you want and make sure the <div>s widths add up to the wrappers width, including margin and any padding. See this article for a good explination.
http://www.webdesignerdepot.com/2012/09/when-pages-are-not-paper-the-designers-guide-to-layout-code/
Also it might help to set a min width to prevent stacking of divs when the window is shrinked if you don't want to set a static width.
Here is a quick HTML mark up of what I'm talking about.
<div id="wrapper" style="width: 800px;">
<div id="leftDiv" style="width: 600px; float: left;">
I'm the left Div!
</div>
<div id="rightDiv" style="width: 200px; float: right;">
I'm the right Div!
</div>
</div>
Related
I'm creating a gallery of PDF's using the component.html below. It's nearly pure HTML except for the Angular *ngFor loop. The PDF icons are displayed, each one linking to a specific file. My problem is with the style="width: 100%;", it is meant to show up to four img's before wrapping to next line. But, the side-effect is that the img's scale to a large size. If you look at the screenshots below, the top image was produced using style="width: 25%;", the bottom one using 100%. I like the 25% size, but I want the label's to be below the image, like we see in the 100% size. The PDF image is actually 67px x 64px.
How to fix?
component.html
<div class="row">
<div *ngFor="let doc of docs">
<a href="#/gallery" (click)="showDoc(doc)">
<p style="float: left; font-size: 14pt; text-align: center; width: 25%; padding-left: 10px;">
<img src="{{doc.img}}" style="width: 100%;"><b>{{doc.lbl}}</b>
</p>
</a>
</div>
<p style="clear: both;"></p>
</div>
screenshots
Please use the below code . I have used inline CSS for the example ( you can place it to your css & use it from the there). Here I have used 50px image height you can use as per your requirements
style="max-width: 100%; height:50px"
HTML:
<div class="container">
<div class="row">
<div *ngFor="let doc of docs" class="col-md-4">
<a href="#/gallery" (click)="showDoc(doc)" style="float: left; font-size: 14pt; text-align: center; width: 25%; padding-left: 10px;">
<span>
<img src="https://techterms.com/img/lg/pdf_109.png" style="max-width: 100%; height:50px"><b style="display: block;">{{doc.lbl}}</b>
</span>
</a>
</div>
</div>
I have a problem.
I would like make a pdf, but I can not to make a simple flex and items-center on different height divs.
<div style="margin-top: 20px; align-items: center">
<div style="width: 70%; display: inline-block; text-align: right">Client: </div>
<div style="width: 25%; display: inline-block; font-size: x-large" >Company shorted name</div>
</div>
Okay, your problem is not really related to either Laravel nor DomPdf (Will adjust your tags :-)).
This is however how you get the 2 elements centered; The center is exactly between the 2 child DIVs, so you might want to adjust that with giving them a certain size, istead of auto.
<div style="margin-top: 20px; display: flex; justify-content: center;flex-direction: unset;width: 100%;align-items: center;">
<div style="flex: 1;display: inline-block;text-align: right;">Client: </div>
<div style="flex: 1;display: inline-block;font-size: x-large;">Company shorted name</div>
</div>
As reference you should have a look at this article https://love2dev.com/blog/absolute-centering-css/
How do I fit the image in the cell?
I want to fit the entire image in the yellow part
Below is my code.
<!--Top Part-->
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div style="width: 770px; height:270px; display: table-cell; background-color:#B2BABB;">
<p style="font-family: Allerta Stencil; font-size:40px; color:red; padding-top: 65;
padding-left:120;">SCOPE<br>Industries Berhad<br>
<span style="font-size:25px; color:black; font-family: Allan;">
A simple solution,<br></span>
<span style="font-size:25px; color:black; font-family: Allan; padding-left: 135;">
for a complex problem.</span></p>
</div>
<!-- Slideshow -->
<div style="display: table-cell; background-color:#F7DC6F ">
<img src="123.jpg" style="width:200;">
</div>
<!-- Slideshow End -->
When setting the width in CSS you must specify a unit. So instead of width: 200 you need to use width: 200px. The px stands for pixel.
Alternatively, you can try setting the image width to 100%.
If you have fixed your wrapper(root) element width then try to use width:100% for inside element like- for image tag so that i could adjust as per your devices width.
<img src="123.jpg" style="width:100%;">
You can set this image is background of the div, and use "background-size: cover;"
So I've been trying to make a chatroom, and i want admins to be able to delete messages. I have made an img tag which should be inside and in the right side of the div, but its under and to the right side of the div. How should i do that?
HTML Code (snippet was weird, so try in a regular html file)
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<div style="width:100%;"> Chat startet</div>
<img src="https://www.shareicon.net/data/512x512/2015/12/19/690073_sign_512x512.png" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;" > <!-- The img that is a problem -->
<br>
</div>
</div>
I believe you are looking for something like this:
<div style="display: flex; justify-content: space-between;">
<div>
<span style="color: red"><b>CONSOLE</b></span>
<span style="color: grey;">3/11 11.28</span> <br>
<span>Chat started</span>
</div>
<img src="https://www.shareicon.net/data/512x512/2015/12/19/690073_sign_512x512.png" height="40px" width="40px" style="opacity: 0.7;">
</div>
This code uses css flexbox to create such positioning. I recommend you look into the flexbox more, as it will solve 90% of your positioning issues for you, and its usage is at the same time way less problematic than usage of floats. You could find more about the topic here: https://internetingishard.com/html-and-css/flexbox/
I would also recommend not to mix your markup and styling, and use css classes to apply styling to your elements instead. It will allow you to re-use styles without lots of duplication as your page gets more complex, and also allow you to keep your markup much cleaner and more readable.
you should use something like
display: inline-block
for the elements, you want to be in the same row.
or you can use something like
display: flex /*or inline-flex */
in the parent, div to do so.
if you decide to use flex you can see a nice guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm not sure that I got it right, but I guess you need one of these to solve your problem:
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<div style="width:100%;"> Chat startet
<img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;">
</div>
<br>
</div>
</div>
or
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<span style="float: right;">
<img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;">
</span>
<div style="width:100%;"> Chat startet</div>
<br>
</div>
</div>
If it helps or not, please let me know :)
I have a ng-repeat
<div class="description-block" style="text-align: left; margin: 0px">
<span class="description-text">Targets: </span>
<span ng-repeat="target in obj.targets" class="label label-danger">{{target}}</span>
</div><!-- /.description-block -->
But the elements are going out from div
Here it is:
How can I fix this?
it's something to do with css, how about add display: block; or display: inline-block; on your div style. If it's still overflow then set width to your div.
example:
<div class="description-block" style="text-align: left; margin: 0px; display: block;">
// your spans
</div>
Hope it helps
<div class="description-block" style="text-align: left; margin: 0px; overflow-y:scroll">
<span class="description-text">Targets: </span>
<span ng-repeat="target in obj.targets" class="label label-danger">{{target}}</span>
fix the width of the div and add css property, overflow-y: scroll. that will work fine. and if you do not work scroll bar just set the max-width of div and the content will be in next line.