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.
Related
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 this code
<div>
<div style="float:left">
<h2>header</h2>
</div>
<span style="float:right; vertical-align: bottom">
text2
</span>
<div class="clear:both"></div>
</div>
I am not able to vertically align the text2 to the bottom of the parent div.
How to do it?
That's rather strange HTML code, but here's a solution that doesn't change the HTML:
(P.S.: You asked that the span should align with the bottom of the parent DIV, not wth the h1. If you want the latter, you have to give them both the same margin-bottom and padding-bottom.)
div:first-of-type {
position: relative;
overflow: hidden;
}
span {
display: block;
position: absolute;
right: 0;
bottom: 0;
}
<div>
<div style="float:left">
<h2>header</h2>
</div>
<span style="float:right; vertical-align: bottom">
text2
</span>
<div class="clear:both"></div>
</div>
Probably you will have to consider changing the elements you are using since h2 and span dont have the same default user agent style. h2 will appear bolder/ bigger than span and span appear lighter. That is why you see it not to be aligned
try this
`<div style="float:left">
<h2>header</h2>
</div>
<div style="float:right; vertical-align: bottom">
<h2> text2</h2>
</div>
<div class="clear:both"></div>`
I'm trying to align two divs horizontally inside my HTML: the first one contains an image and the second a text, and this is the used code:
<div style="float: left; width: 55px;">
<img src="../img/look.svg" alt="">
</div>
<div style="display: inline-block;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
I tried many methods, but I've been unable to get the text line in the same level as the image vertical axis, and the text inside the second div gets displayed very far from the image vertically.
So, is there any possibility to fix that?
The problem is with the float. The vertical-align: middle; line-height: 1; will fix the issue:
div {
display: inline-block;
vertical-align: top;
line-height: 1;
}
div:first-child {
width: 55px;
}
<div>
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div style="display: inline-block; vertical-align: middle; line-height: 1;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Preview
Top Alignment:
Middle Alignment:
The vertical-align decides the vertical alignment. If you want the image and text to be on the same line, use vertical-align: top.
A few things first:
don't use inline styles
don't mix float with inline-block
Option 1: using flebox
section {
display: flex;
gap: 10px;
}
<section>
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</section>
Option #2 using inline-block
div {
display:inline-block;
vertical-align:top;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Option #3 using float
div {
float: left;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
flexbox to the rescue.
I added your divs inside another one, which will align its items. In my CSS my image has 100px so I changed the width to 100px. Change yours accordingly.
.halign {
display:flex;
align-items: center;
}
<div class="halign">
<div style="width: 100px;">
<img src="http://lorempixel.com/100/100/" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</div>
Try to seprate the CSS and HTML and do not mix display:inline-block with float:left. Also use clear:both after both div
<style>
.fisrstDiv {
float: left;
display:block;
}
.secondDiv {
float: left;
display:block;
}
.clear {
clear: both;
}
</style>
HTML
<div class="fisrstDiv">
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div class="secondDiv">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
<div class="clear"></div>
I am using the following code for text-align:
<strong>Status:</strong> <span style="color: #01DF3A;">Updated</span>
<span align="right" style="text-align: right;"><strong>TeamSpeak:</strong> ts.abendigo.org</span>
The first text Status: Updated should be on the left but the second part of the text TeamSpeak: ts.abendigo.org should be on the right side but using even both the deprecated align="right" with style="text-align: right;" seems to have no effect with span. They work fine with other tags like div but I want to keep both text on the same line.
<span> is an inline element. From the screenshot below you can see that its width is 188.859px and that's the size of the text in it.
You must wrap the inline elements in a block element. I'd suggest this:
.status {
float: left;
}
.teamspeak {
float: right;
}
<div class="status">
<strong>Status:</strong><span style="color: #01DF3A;">Updated</span>
</div>
<div class="teamspeak">
<strong>TeamSpeak:</strong> ts.abendigo.org</span>
</div>
NB: this answer explains how block level vs inline elements work.
The text-align property only works on block elements. <span> is inline. You should use a <div> or <p>.
<strong>Status:</strong> <span style="color: #01DF3A;">Updated</span>
<div style="text-align: right;">
<span><strong>TeamSpeak:</strong> ts.abendigo.org</span>
</div>
NB: You can set span to be a block element, but unless your HTML is fixed (generated by some other application) and you cannot change it, don't do that. Better keep to what is standard and use div or p.
span { display: block; }
To get a working solution you should use float: right; on the span. I don't see why you would need to use a float:left; on the other text.
HTML
<div class="container"> <strong>Status:</strong>
<span class="left">Updated</span>
<span class="right">
<strong>TeamSpeak:</strong> ts.abendigo.org</span>
</div>
CSS
.left {
text-align:left;
color: #01DF3A
}
.right {
float:right;
}
You can use this
<div>
<strong>Status: </strong><span style="color: #01DF3A;">Updated</span>
<span style="float:right">TeamSpeak: ts.abendigo.org</span>
</div>
The easiest way is to use blocks or a table where is text-align property works on:
<strong>Status:</strong> <span style="color: #01DF3A;display:inline-block;width:45%">Updated</span><span align="right" style="text-align: right;display:inline-block;width:45%"><strong>TeamSpeak:</strong> ts.abendigo.org</span>
<table width="100%">
<tr>
<td><strong>Status:</strong> <span style="color: #01DF3A">Updated</span></td>
<td style="text-align:right"><span align="right" style="text-align:right"><strong>TeamSpeak:</strong> ts.abendigo.org</span></td>
</tr>
</table>
Try the fiddle:
JSFiddle
Try the below link
.status{
float:left
}
.team{
float:right;
}
Fiddle - Link
html:
<div class="status">
<strong>Status:</strong><span style="color: #01DF3A;"> Updated</span>
</div>
<div class="teamspeak">
<strong>TeamSpeak:</strong> ts.abendigo.org</span>
</div>
Css:
.status {
float: left;
}
.teamspeak {
float: right;
}
Demo
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>