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/
Related
I've a slightly odd requirement here. I'm trying to create a HTML + CSS transcript of a seventeenth century book which has a peculiar layout. The pages have a column of text with a generous right-hand margin that contains various floats (many of which are tables of numbers). These floating diagrams line up with the paragraphs of text so that the first line of the float lines up with the last line of the paragraph. (The text makes reference to this fact, so it's important to preserve it.)
Mostly this is easy, as in this example:
<main>
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua —
<span class="float">123<br/>456</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua —
<span class="float">789</span></p>
</main>
main {
max-width: 475px;
padding: 0.5rem;
border: thin solid black;
margin: 0 auto;
}
h1 {
text-align: center;
}
p {
text-align: justify;
text-indent: 1.5em;
padding-right: 0.5rem;
border-right: thin solid black;
margin: 0 calc(3ch + 0.5rem) 0 0;
}
span.float {
float: right;
clear: right;
text-align: right;
text-indent: 0;
font-variant-numeric: tabular-nums;
width: calc(3ch);
margin-right: calc(-3ch - 1rem);
}
This produces something like the following, which is exactly as I want:
The 123 lines up with the end of the first paragraph, the 789 lines up with the end of the second paragraph, and the first float (123, 456) flows alongside the start of the second paragraph.
However, very occasionally, I have a large float and the following paragraph is very short, e.g.
<main>
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua —
<span class="float">123<br/>456<br/>789</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit
sed do eiusmod tempor incididunt — <span class="float">321</span></p>
<p>Lorem ipsum dolor sit amet.</p>
</main>
(CSS as before.) If this happens, the book adds space above the second paragraph, and I want to replicate this so that it looks a bit like the following (which I've mocked up by inserting <p><br/></p> before the second paragraph):
Is there a way of achieving this in HTML and CSS? I'm not adverse to changing the way I mark up the document, however I'm catering for a variety of screen widths and fonts, so I cannot hard-code spacing based on how much I need in my browser. I'm happy with a solution that won't work in ancient browsers.
Update: To help illustrate what I'm after, here is a quick and dirty solution using jQuery, though I would prefer to avoid using Javascript if at all possible and do it in CSS:
$(function() {
$('p').each( function() {
var floats = $(this).find('.float');
var nextp = $(this).next('p:has(.float)');
if (floats.length && nextp.length) {
var f = $(floats[floats.length-1]), n = $(nextp[0]);
if (f.height() > n.height()) {
f.css('float', 'none');
n.css('padding-top', (f.height() - n.height()) + 'px');
f.css('float', 'right');
}
}
});
});
I have a parent div with two other elements, one contains the text content, another may contain a picture. The picture and text might vary in size/length. I want the parent div to grow depending on the content but only up to a certain height. If there is an image I want the image to grow or shrink to make the parent div reach the max height. If there is no image, I want the parent div to shrink to contain the text. The image will be added via JavaScript. I have illustrated what I wanted to do in the following picture.
I was expecting the following code to work but the images seem to expand to be larger than the parent div. I have tried a few other things but I cannot seem to get it to work.
Here is a codepen.
<div id="parent">
<div id="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="image">
<img src="MayOrMayNotContainImg.com">
</div>
</div>
#parent{
max-height:400px;
padding:10px;
border: 2px solid black;
}
#text-body{
padding:10px;
border: 2px solid blue;
}
#image{
padding:10px;
border: 2px solid green;
}
Any help would be highly appreciated, thanks in advance.
In the snippet below, if the image is there, I am assigning its height dynamically using jQuery height by calculating the remaining space inside the #parent. (200 - height). So whatever the content may be, the height of the image will increase or reduce based on that.
$(document).ready(function() {
$('#img-wrapper').attr('src', 'https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg');
let height = $('#text-body').outerHeight();
$('#img-wrapper').height(200 - height - 20);
})
#parent{
max-height:200px;
padding:10px;
border: 2px solid black;
}
#text-body{
padding:10px;
border: 2px solid blue;
}
#image{
padding:10px;
border: 2px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="text-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="image">
<img id='img-wrapper' src="MayOrMayNotContainImg.com">
</div>
</div>
I have found how to make non-rectangular shaped text from here (Unusual shape of a textarea?) and it works like a charm.
I need to limit this to 2 lines so I used overflow: hidden; but the area somehow returns to rectangular shape.
This is my html code.
.descTitle {
height: 20px;
width: 70px;
float: left;
border: none;
}
.descContent {
height: 40px;
line-height: 20px;
/*overflow: hidden; /* This breaks the form*/
}
.descOut {
height: 40px;
width: 100%;
}
<tr>
<td colspan=1>
<div class='descOut'>
<div class='descTitle'>
<label for='txt9'><b>Description: </b></label>
</div>
<div class='descContent' contenteditable='true' style='font-color:black; font-size: 11px; font-family:arial'/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</div>
</td>
</tr>
It works great when I comment out the overflow line but somehow it breaks the form when being used.
Can anyone help me to find out how to limit the contents to 2 lines without breaking unusual shaped text area?
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?
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.