I have the following HTML-code:
<div style="width: 180px;">
<span>1️</span>
<span style="display: inline-block; vertical-align:top;">
Lorem ipsum dolor sit amet
</span>
</div>
The problem: CSS doesn't treat like a normal linebreak, and therefore the whole text goes in it's own line, instead of "Lorem ipsum do-" being in line with the "1️".
This is what i want it to look like:
<div style="width: 180px;">
<span>1️</span>
<span style="display: inline-block; vertical-align:top;">
Lorem ipsum do-<br>lor sit amet
</span>
</div>
How do I achieve this?
<div style="width: 180px;">
<span>1️</span>
<span style="display: inline-block; vertical-align:top;">
Lorem ipsum do-
</span>
<span style="display: inline-block; vertical-align:top;">
lor sit amet
</span>
</div>
You can try this
I found a solution myself - simply use display: flex; on the parent.
<div style="width: 140px; display: flex;">
<span>1️</span>
<span>
Lorem ipsum dolor sit amet
</span>
</div>
Related
So I have this code for my assignment but I can't figure out how to make the image goes to the side of the text. It keeps going to the right corner. Can someone help me out please? I just started to learn CSS. Thank you in advance.
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
<img src="cy.png" alt="IMG">
Make a table
<table>
<tr>
<td>
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
</td>
<td>
<img src="cy.png" alt="IMG">
</td>
</table>
Could you clarify, are you trying to get it to go to the right side of text?
Typically, the align property of the img tag is what you want, and you usually want it before the thing you are trying to align it with.
I also recommend sharing a jsFiddle so that people can play with the code.
<img src="https://images.pexels.com/photos/13728847/pexels-photo-13728847.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="IMG" align="right">
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><be>
https://jsfiddle.net/f1e7b6d8/
Nice to see you are started journey of css.
There is X ways to solve your problem with the help of css.
Float
Flexbox
Grid
Position
So for a beginner I would like to solve your problem with the help of float.
if you can not understand my code then you can take reference of any website to learn about css float property.
-------------CSS FILE-------------
.content {
float: right;
}
.image {
float: left;
}
.clear {
clear: both;
}
------------- HTML File -------------
<div class="content">
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<button class="but1">Example</button>
<button class="but2">Example</button><br>
</div>
<div class="image">
<img
src="your_image_path"
alt="IMG">
</div>
<div class="clear"></div>
</body>
You have many ways to make this by CSS
you can use Float , FlexBox , Grid, Position
You can keep your HTML as it's but with a simple modification to put your img tag under the text
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<img src="cy.png" alt="IMG">
<button class="but1">Example</button>
<button class="but2">Example</button><br>
In you CSS file you can use
.txt {
float: left;
}
.img {
float: right;
}
button {
clear: both;
}
Hope this fix your issue.
I am wondering if it is possible to left align text below center aligned text, so that both texts start from same position.
In the example figure. The TITLEs are center aligned and the copy below is left aligned.
How can you realise something like this with CSS?
Here is a JSFiddle to start from
https://jsfiddle.net/j5p7v8m9/
<div>
<p style="text-align: center;">TITLE</p>
<p style="text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
Here is the answer. I've updated your JSFiddle. You need to add some wrappers for each divs, then you can centerize the title as follows:
HTML:
<div class="container">
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
CSS:
.container{
display: block;
}
.col{
float: left;
width: 33.33%;
}
.contents{
margin-left: 20px;
margin-right: 20px;
}
.title{
text-align: center;
}
JSFiddle: https://jsfiddle.net/53oLpvqg/
Please try with bootstrap css it my help you for easy css.
<div class="col">
<p class="text-center">Title</p>
<p class="text-left">Test content Content</p>
</div>
Check Fiddle https://jsfiddle.net/0h2nmj3r/
*Look at other answers for directions on align text this is answer will help with getting that column effect
The best way to get three columns like that is to use a type of special display in css called "flex". Flex allows you to easily align elements within the parent html element.
.container{
display:flex;
flex-direction : row;
justify-content: space-around;
}
.text-box{
display: flex;
flex-direction:column;
align-items:flex-start;
width:20%;
}
p{
margin: 0 0 5px 0;
}
<div class="container">
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
So as you can see I have applied flex to both the container and the text-box's. Left align can be used like in these other answers but i opted for align-items:flex-start so any element within the text-box will be aligned to the left.
By setting justify-content:space-around it makes each element within the container have equal space around it so if you were to change the window size the spaces would be relative and change. I would recommend studying more about flex and grid to improve your css skills.
I have a container which is populated dynamically with child elements. The width attribute for individual child elements is retrieved from backend in % adding up to 100%. This is because the desired effect is that the childs preserve size proportions in comparison to one another.
.wrapper {
display: flex;
width: 100%;
}
.item {
overflow: hidden;
height: 20px;
}
<div class="wrapper">
<div class="item" style="width: 30%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 15%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 5%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 40%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 10%">Lorem ipsum dolor sit amet</div>
</div>
The problem is that there can be an arbitrary number of children and the more of them the more squashed they become. Consequently stopping to fit the content.
Therefore I would like them to have a min-width and be able to scroll the container horizontally while still preserving the proportions retrieved from the database.
I tried:
Setting width on the container to a fixed value e.g. 2000px and overflow-x to auto. The width could be calculated somehow on rendering the page. It makes the childs scale nicely to add up to cover the 100% of the width of the container. The issue is that the scrolling doesn't work, because the container is physically 2000px wide and you have to scroll the whole page rather than the container
Setting min-width on childs causes the proportions to be lost
So I need a solution that combines both of them but can't seem to figure it out. I would appreciate any help and ideas.
You can use flex-wrap: wrap on the .wrapper so that when the children cannot fit the width of the parent they will simply go to another row. This way they can easily fit horizontally, but they will stretch vertically instead.
.wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.item {
overflow: hidden;
height: 20px;
}
<div class="wrapper">
<div class="item" style="width: 30%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 15%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 5%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 40%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 10%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 30%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 15%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 5%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 40%">Lorem ipsum dolor sit amet</div>
<div class="item" style="width: 10%">Lorem ipsum dolor sit amet</div>
</div>
I managed to solve the problem thanks to #Michael_B's answer to this question.
I changed my html to:
<div class="wrapper">
<div class="item" style="flex: 0 0 30%">Lorem ipsum dolor sit amet</div>
<div class="item" style="flex: 0 0 15%">Lorem ipsum dolor sit amet</div>
<div class="item" style="flex: 0 0 5%">Lorem ipsum dolor sit amet</div>
<div class="item" style="flex: 0 0 40%">Lorem ipsum dolor sit amet</div>
<div class="item" style="flex: 0 0 10%">Lorem ipsum dolor sit amet</div>
</div>
and CSS to:
.wrapper {
display: flex;
width: 100%;
overflow-x: auto;
justify-content: flex-start;
}
Note that there was an issue with the content overflowing on the left side, so you couldn't scroll to it. This is what justify-content was needed for. I found the solution here.
I have an image and I want to have multiline with <br>. The text needs to be aligned in the middle.
<table id="myTable">
<tr>
<td>
<a>
<div>
<img class="vertical-align-icon-middle" src="/images/friendjoined_icon.png" />
</div>
</a>
<div class="user-details">
<div class="username-div"><span class="text-design">My profile</span></div><br/>
<div class="points-rank">
<span class="secondary-text no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </span></div>
</div>
</td>
<td class="right-icon"><p>hi</p></td>
</tr>
</table>
I have no idea what can I do to keep the text in the middle, because the image is responsive, it's resizable. Need some help, thanks.
What I want:
is something like this
As I've mentioned in my comments, you should avoid using tables for layouts, if you want to have an image and text side by side, I'd use two divs so you'd have something like:
.image-block,
.user-details {
display: table-cell;
vertical-align: middle;
padding: 5px;
}
<div class="image-block">
<img class="vertical-align-icon-middle" src="http://placehold.it/400x200/" alt="" />
</div>
<div class="user-details">
<div class="username-div">
<span class="text-design">My profile</span>
</div>
<div class="points-rank">
<span class="secondary-text no-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </span>
</div>
</div>
I'm want to put an image, a paragraph and then another image in one line in html/css.
I got it to work this way.
<html>
<body>
<span style="float:left; display: inline-block; width: 20%;">
<img src="https://pbs.twimg.com/profile_images/762369348300251136/5Obhonwa.jpg"
width="90" height="110" />
</span>
<span style="float:left;width: 60%;">
<p style="float:left; display:block;">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer arcu mauris, ullamcorper et
ligula vitae, hendrerit sodales tellus. Maecenas quis pulvinar
lacus.</p>
</span>
<span style="float:right; width 20%;">
<img src="https://www.google.ca/doodle4google/images/splashes/featured.png" width="90" height="110">
</span>
</body>
</html>
I know i could do it in an external css sheet or style tags but it's for an assignment so i have to do all three.
Here is an example : https://jsfiddle.net/sp6ykv66/
HTML:
<img src="https://dummyimage.com/100x100/000/fff" alt="">
<p class="inline">Lorem Ipsum</p>
<img src="https://dummyimage.com/100x100/000/fff" alt="">
CSS:
.inline{display: inline-block;}
.parent{
display:flex;
justify-content:center;
align-items:center;
flex-direction:row;
}
.children{
// whatever you want
// your paragraph and imgs need to be children of parent
}
so you paragraph and imgs needs to be in a div class="parent"
so display:flex affects divs children aka paragraph and imgs
Note: Im on phone
You can either use (on the h4 elements, as they are block by default)
display: inline-block;
Or you can float the elements to the left/rght
float: left;
Just don't forget to clear the floats after
clear: left;
or try it
h4{width:80px;float:left}
<h4 class='liketext'><img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>$likes</h4>
<h4 class='liketext'> <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/></h4>