I have a page, a confirmation page.
On the left side <label>, in the middle padding, and on the right <span>
The text in the span, when too long, wraps underneath the label, instead of under the width of the label, like an inline-block.
<label>Label1:</label>
<span class="class">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span>
<label>Label2:</label>
<span class="class"> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </span>
CSS
label, span {
width: 45%
}
label {
float: left;
}
How can I make it such that the CSS is 45% and on multiple lines?
If you change the spans and the labels to inline-block, they will behave exactly as you want.
label, span {
width: 45%;
display:inline-block;
vertical-align:top;
}
See this update to j08691's fiddle.
But your question seems to indicate that you don't want that, is that right?
Related
I searched but I couldn't figure out this !!
as you know img tag is an inline-block as default but when I want to wrap text around it, I can't.
I know that inline-block elements behave like inline elements to take the screen, I mean they take the screen just the content dimensions, but my question is why img element doesn't let text wrapped around it?
I mean why do we need to use float?
<html lang="fa-IR">
<head>
<meta charset="utf-8">
<title>Html toturial</title>
</head>
<body>
<img src="download.png"/>
hello<br>
hello<br>
hello<br>
</body>
</html>
**NOTE: ** download.png file is on my local PC.
but I can show you the result!
IMAGE OF MY CODE
Inline and inline-block elements render on the same line (imagine lines of text in the book for example). And since img is inline-block element, it renders on the same line as the text next to it. So what you see in your example are three lines. First one contains image and text, the other two only contain text.
However two things happen here:
Inline-block also has height (by definition), which makes the first line higher.
All the elements in the line are (by default) vertically aligned to the bottom. That is why the text in the first line is aligned with lower border of the image.
In case you add float to the image, the concept of line is broken, which lets the subsequent content floating around.
When you wrap the text in <span> elements it works as you described because <span>s are inline elements.
<img> is a replaced element; it has a display value of inline by default, but its default dimensions are defined by the embedded image's intrinsic values, like it were inline-block. You can set properties like border/border-radius, padding/margin, width, height, etc. on an image.
MDN
<html lang="fa-IR">
<head>
<meta charset="utf-8">
<title>Html toturial</title>
</head>
<body>
<img src="download.png"/>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
inline-block elements have some properties of block elements and some properties of inline elements … and neither of them have the property of "content wraps around them".
An image is rendered a lot like a single character. A large character.
So you might compare these two paragraphs:
img { display: inline-block; }
span { display: inline-block; font-size: 50px; }
<p>A <img src="http://placekitten.com/50/50"> that Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
<p>A <span>k</span>itten that Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
The inline block box generated by the image is a lot like the inline box generated by a letter of the same size.
Wrapping of text around images in HTML / CSS is achieved with the float property;
img { float: left; }
p.foo::first-letter { float: left; font-size: 50px; }
<p><img src="http://placekitten.com/50/50"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
<p class="foo">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
This question already has an answer here:
Media query in responsive email template
(1 answer)
Closed 3 years ago.
I'm setting up an email which contains in the body a picture and some text. On normal computer screens the image is to the left and the the associated text to the right (using inline-block).
This looks like so:
(https://www.flickr.com/photos/183424995#N08/48518551371/in/dateposted-public/)
When the screen size is changed ie. for an i-phone, I'm aiming to get the text to move underneath the image and rather than just having a width of half the screen (as it's inline-block), to take up the whole width of the screen underneath.
What I'm trying to get:
https://www.flickr.com/photos/183424995#N08/48518549646/in/dateposted-public/
What is actually happening:
https://www.flickr.com/photos/183424995#N08/48518724692/in/dateposted-public/
I've created a "main" div containing the image div, and a div containing the text, both inline-block. The "main" div has a width set to 100% and the text div has a min and a max div so it can move from next to the image to under the image depending on screen width.
I've tried rejigging the max width of the text div to be wider, but then the text never remains to the side of the image. And I'm trying to avoid floating anything.
I can't use bootstrap or flexbox as it's an email so am limited to fairly basic CSS.
The JSFiddle is https://jsfiddle.net/cfn76vqz/ to show what kind of responsiveness I have so far. And the general HTML structure is as below.
<div id="main">
<div id="left">
<div >
<img src="https://via.placeholder.com/300x200/0000FF/FFFFF" />
</div>
</div>
<div id="right">
<div >
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>
</div>
</div>
TLDR: I'm stumped on how to make the text div essentially be 100% of the width if underneath the image but also 50% if there's space to have it to the side of the image. As far as I understand it's always going to be limited to 50% as it's part of an inline-block section.
Because you set width with this why it's not fully of width
max-width: 50%;
So... How we can do
We need to use FLEX display
like this
#main {
/*---HERE---*/
display: flex;
flex-wrap: wrap;
/*----------*/
background: yellow;
width: 100%;
}
#left {
background: orange;
}
#right {
/*---HERE---*/
flex-basis: 0;
flex-grow: 1;
min-width: 50%;
/*----------*/
background: green;
vertical-align: top;
}
<!-- YOUR OLD CODE -->
<div id="main">
<div id="left">
<div>
<img src="https://via.placeholder.com/300x200/0000FF/FFFFF" />
</div>
</div>
<div id="right">
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>
</div>
</div>
if you want to learn about flex ...more here
you can use viewport units like width: 100vw and height: 100vh for make it responsive depending upon height and width of display.click here
This question already has answers here:
Floating elements within a div, floats outside of div. Why?
(11 answers)
Closed 6 years ago.
I have lists of data need to display like this
.mycontent-bottom {
border-bottom: 1px solid #ccc;
}
#float-right{
float: right;
}
<div class="mycontent-bottom">
Title
<span id="float-right">50000</span>
</div>
<div class="mycontent-bottom">
lorem ipsum yang lazim digunakan adalah: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
<span id="float-right">50000</span>
</div>
The problem is the second one, if the text is too long, it will push the number outside the bottom border. Any ideas how to hide long text so the number will stay at right and dont get push outside the border ?
You could try this:
https://jsfiddle.net/Lboxddh9/5/
.mycontent-bottom {
border-bottom: 1px solid #ccc;
display: inline-block;
width: 100%;
}
#float-right{
float: right;
}
Also, you should not use identical ids for multiple elements in a one page.
That's why, this would be correct, while your original markup is invalid.
<div class="mycontent-bottom">
Title
<span class="float-right">...</span>
</div>
<div class="mycontent-bottom">
...
<span class="float-right">...</span>
</div>
Updated fiddle with class instead of multiple ids:
https://jsfiddle.net/Lboxddh9/7/
I want the byline to appear just below the image.
I am trying to use the right, left, etc properties in relation to the relative property, but the span moves left of the image.
What is the mistake in my code?
<section id="manchanabele">
<img id="club" alt="club" src="images/club.jpg">
<p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. nisi ut aliquip ex ea commodo consequat.
<span id="byline">by: Lorem Ipsum</span>
</p>
</section>
section#manchanabele {
background: #C8C8C8;
}
#club {
float: right;
width: 75px;
height: 75px;
}
p#lorem {
background: #A0A0A0;
}
span#byline {
position: relative;
float: right;
}
You are structuring your DOM in a wrong way, you should wrap the elements you want to float in a single container. I will provide you the code which will result you in something like below
Here, in the code below, I will explain you related to the image above, the black border container is .wrap, the one which is having green border is the paragraph, which is p, the red on is the container which you are floating to the right which is .right_float and the nested elements inside red element is your img and span respectively.
For example
<div class="wrap">
<p>Hello</p>
<div class="right_float">
<img src="#" />
<span>Hello</span>
</div>
</div>
.wrap {
overflow: hidden; /* Clears float */
}
.wrap p {
float: left;
width: /*Some fixed width*/
}
.wrap .right_float {
float: right;
width: /* Some fixed width */
}
.wrap .right_float span {
display: block;
}
Note, if you don't care about the older versions, especially IE, I would recommend you to use a self clearing parent class
.clear:after {
clear: both;
display: table;
content: "";
}
Now, you can call the above class on your parent element holding floated elements, and you don't have to use overflow: hidden;
You could keep the byline aligned with the image by wrapping the elements in a container such as a DIV.
HTML:
<section id="manchanabele">
<div id="align">
<img id="club" alt="club" src="images/club.jpg">
<span id="byline">by: Lorem Ipsum</span>
</div>
<p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. nisi ut aliquip ex ea commodo consequat.
</p>
</section>
CSS:
section#manchanabele {
background: #C8C8C8;
}
#align {
float:right;
width:75px;
}
#club {
width: 75px;
height: 75px;
}
p#lorem {
background: #A0A0A0;
}
N.B. You may want to consider using classes rather the IDs if you need to use this layout several times for similar content.
Use this markup:
<article>
<div class="clearfix">
<img src="http://lorempixel.com/70/70" alt="a random image" class="thumb" >
<p>The quick brown fox jumps over all the messy markup and writes a new one.</p>
</div>
<footer>By The Fox</footer>
</article>
Fiddle: http://jsfiddle.net/C5GkH/1/
or if you need the image and the byline always one below the other keeping a blank sidebar on the right follow the advice of #Mr. Alien
Try to clear:both; after the image.
Like so
<section id="manchanabele">
<img id="club" alt="club" src="images/club.jpg">
<div style="clear:both;></div>
<p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. nisi ut aliquip ex ea commodo consequat.
<span id="byline">by: Lorem Ipsum</span>
</p>
</section>
Also avoid floating inline elements. Better if you wrapped that image with a div and then floated the div.
I have two block elements. The first is floated to the left. I'd expect the right element to be a block as well and retain its square shape. Instead, text within it is wrapping under the element which is floating to the left.
.comment-date {
float: left;
}
<div class="comment-date">07/08 23:08</div>
<div class="comment-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
</div>
The lorem ipsum text wraps under the date. I'd expect it to retain a block shape, floating to the right of the date. How can I achieve that?
Here is a fiddle:
http://jsfiddle.net/CS2Hs/
An alternative to the other solutions here would be to simply add a margin-left to .comment-body. It would also be helpful to apply a set width to .comment-date
.comment-date {
float: left;
font-weight: bold;
width: 90px;
}
.comment-body {
margin-left: 90px;
}
This will ensure that the text in .comment-body does not appear underneath the date.
Here is a demo:
--- jsFiddle DEMO ---
The body block is not in the float model. Simply set a float: left for .comment-body too. Also, you could use some widths. See: http://jsfiddle.net/CS2Hs/3/
I will try to understand your problem. As I understand, you want the .comment-body to be on the right and the .comment-date to be on the left but on the same line.
If I am right, maybe this will works:
.comment-date {
display: inline-block;
float: left;
width: 15%;
font-weight: bold;
}
.comment-body {
display: inline-block;
float: right;
width: 85%;
}
I made a JSFiddle just for you ;)
jsfiddle appears to be down at the moment so sorry if this doesn't work/isn't what you wanted but have you tried adding "overflow:hidden" to "comment-body"? This creates a new layout context which stops the text from wrapping underneath. I find this amazingly useful! Hope that helps!