SVG img on the same line of text in inline-block container - html

How can i have my SVG image on the same line of my text in an inline-block container ?
In the above example, I want my picture let at the right of my text, on the same line but browser automaticaly break line.
.container{
display: inline-block;
background:orange;
}
<div class=container>
text<img src="https://res.cloudinary.com/aquis/image/upload/v1521481254/site-2018/megaphone-picto.svg">
</div>

Simply specify a width and/or a height to the image:
.container{
display: inline-block;
background:orange;
}
<div class=container>
text<img src="https://res.cloudinary.com/aquis/image/upload/v1521481254/site-2018/megaphone-picto.svg" width="20">
</div>

Remove display: inline-block from your .container class and set the inline-block on your image. Since it is an svg, you will also want to give the svg an explicit height and width.
It's recommended to wrap the img in a span tag, instead of setting it to the img html element, which would set the same small size on all image items on your site. I gave the span the classname of svg-image, but you could name it anything else.
.container{
background:orange;
}
.svg-image {
display: inline-block;
height:20px;
width: 20px;
}
<div class=container>
text<span class="svg-image"><img src="https://res.cloudinary.com/aquis/image/upload/v1521481254/site-2018/megaphone-picto.svg"></span>
</div>

Related

Allow inline-block elements to wrap before stacking

I have two divs next to each other that are displayed using inline-block. As the viewport shrinks, I'd like the text in the leftmost div to wrap before the divs collapse vertically, but I can't seem to make that happen. JSFiddle here.
In the demo, when the viewport shrinks "Should stay in block" is pushed below the title block, whereas I'd like the "Lots of text I want to wrap" to start wrapping to keep the two blocks on the same line.
Use display: table-cell; Instead of display:inline-block will solve your issue.
.title {
display: table-cell;
vertical-align: top;
}
.box {
display: table-cell;
vertical-align: top;
}
<div class="title">
<h1>Hi</h1>
<h2>Lots of text I want to wrap</h2>
</div>
<div class="box">
Should stay in a block
</div>
Check your updated Fiddle Here.
Can't you make them to fill the body or the container giving them a 50% width?
JSfiddle
EDIT: JSfiddle with a wrapper
.title {
display: inline-block;
vertical-align: top;
background-color:red;
width:50%;
}
.box {
display: inline-block;
vertical-align: top;
background-color:blue;
width:50%;
}
<div class="title">
<h1>Hi</h1>
<h2>Lots of text I want to wrap</h2>
</div><div class="box">
Should stay in a block
</div>
Edit: remember to not wrap after the first div, and make sure that there are not spaces </div><div class="box"> so you can use 50% preserving the inline-block

set button width to 100% of parent div without a line break

I have a div called text, and next to it I want a button which should take up the remaining width of the screen so I set the width of the button to 100%, but it takes that as 100% of the screen and appears below the text div. How can I make it so the button is 100% the width of its parent div and not the whole screen so it all appears on the same line, without setting a width for the text div? Here is a demo. Thank you.
css
#text{
float:left;
}
div{
border:1px solid red;
}
button{
width:100%;
}
html
<div id = "text">text</div>
<div>
<button>button</button>
</div>
You should be able to achieve this using display: table-cell css:
Try something like this: DEMO
<div class="container">
<div class="cell" id="text">text</div>
<div class="cell">
<button>button</button>
</div>
</div>
div.container {
width: 100%;
display: table;
}
div.cell {
border:1px solid red;
display: table-cell;
}
button {
width:100%;
}
/* use this style to set width of the #text cell to exactly the width of it's cotnents */
#text {
width:1%;
white-space: nowrap;
}
You can place them in a div together and display them as flex.
http://jsfiddle.net/1amvwzuw/2/
<div class="flex">
<div id="text">text</div>
<button>button</button>
</div>
You need to give your parent container a width. So text could be like, 80% then the div that contains button could be 20%. then button will be 100% of the parent div and both divs will be beside each other.
So div element is a block element. That means it will start on a new line and the next element after it will be on a new line as well. What you can do here is to set display: inline-block to both divs you have.
If you don't need a block element just use an inline one like span
http://jsfiddle.net/1amvwzuw/3/
If your browser-matrix allows it this is the perfekt opportunity to try out flexbox:
html
<div class="wrapper">
<div id="text">text</div>
<div class="button-wrapper"><button>button</button></div>
</div>
css
.wrapper{
display: flex;
}
.button-wrapper{
flex: 1;
}
button {
width: 100%;
}
http://jsfiddle.net/1amvwzuw/5/
if not look at this question to see how to stretch a div using display:table-cell:
Auto-stretching table-cell div css

Inline-blocks not in one like exactly

I have 3 divs on my page, that css: display: inline-block.
.utilitiesContent div
{
display: inline-block;
width:33%;
}
Here is fiddle (don't pay attention that it has cyrillic letters). As you can see it is like stairs, not exactly in one line. How can I make it to has the same height level?
.utilitiesContent div
{
display: inline-block;
width:33%;
vertical-align: top;
}
you are looking for vertical-align property, I used top , you can play around and see what you like best.
updated fiddle here
I strongly recommend using width: 32%; 33% is just cutting it pretty close , and can jump down to the next row in certain cases
.utilitiesContent div
{
display: inline-block;
width:32.5%;
}
<div class="utilitiesContent">
<div>div 1</div>
<div>div 2</div>
<div>div 2</div>
</div>
DEMO just decrease width to 0.5% FROM 33% to 32.5%
.utilitiesContent div
{
display: inline-block;
width:32.5%;
}
Inline block will by default put space between the elements based on the font size. If you reduce the font size to zero you can remove the spacing.
.utilitiesContent div
{
display: inline-block;
width:33.33%;
font-size:0;
vertical-align: top;
}
Then just set the font size to the elements inside the inline-block element.
See my fiddle: http://jsfiddle.net/4ear5n8n/6/

Change DIV height to fit image

I'm trying to make a DIV that's pretty much a box with a border that has a left-aligned image and text that's to the right of the image. Here's how I have it set up:
<div style="padding:1%; border-style:solid; border-size:1px; width:100%;">
<img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" />
Here is some text.
</div>
The problem is that, if the image is taller than the text, the surrounding DIV (and therefore the border) sizes itself to become the height it needs to be to fit in all the text, but the image overflows out of the DIV.
How can I make the DIV change its height to fit whichever is taller (the image or the text) so that both fit within the border?
Thanks.
Add display: inline-block" to your div.
<div style="padding:1%; border-style:solid; border-size:1px; width:100%;display: inline-block">
<img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" />
Here is some text.
</div>
add one property to div
overflow: hidden;
absolutely it will work .
Add some element with clear: both; to "reserve" space for floated elements:
<div style="padding:1%; border-style:solid; border-size:1px; width:100%;">
<img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" />
Here is some text.
<div style="clear: both;"></div>
</div>
I would use clearfix, you can learn more about it here
Plus, careful, there is no border-size attribute, what you were trying to do was border-width.
Just my opinion here, it is best practices not using inline styles.
This way you have a clean solution.
So please see snippet below:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both
}
div {
padding: 1%;
border: 1px solid #000;
width: 100%;
}
div > img {
float: left;
max-width: 30%;
max-height: 200px;
}
<div class="clearfix">
<img src="http://i.imgur.com/FwgZFNn.jpg" />Here is some text.
</div>
Just before the end of the div i.e before </div>, you need to clear the float. The error is due to float style of the image. To clear the float just add this
<span style="clear:both;"></span>
Just before the </div> tag.

How to display <p> in same line with image

DEMO LINK
I want to have <p> text displayed in line with the image so everything will look centered and in-line correctly.
Also when screen is shorter and text takes 2+lines (responsive), I'd like this to remain the same as well so the text doesn't jumo below the image.
How can I achieve that?
Replace <p> with <span>. Then do:
.tip span {
margin-left:10px;
}
img {
vertical-align: middle;
}
Notice that you don't need display: inline-block on your span.
DEMO REVISED
changed
.tip p {
display:inline;
margin-left:10px;
}
and added:
.tip img {
float:left;
}
inline-block to inline so that it acts in line within the parent div. float:left; to keep the image on the left side of the parent div.
Try this...This code below works!
<img src="" alt="" style="width:32px;height:32px;float:left;">
<p style="margin:0px;height:32px;max-idth:100%;float:left;overflow:auto;">TEST</p>
change the 32px to one size that suits you
the style float:left; does the thing you want here