I am trying to create a drop down paragraph for my website.
It is similar to a drop down menu but a whole paragraph with centering and a font. I have seen a number of drop down menu's but they don't seem to support large text. The idea would be for a bar say:
===click here to read about====
and when you click it the paragraph will pop out underneath.
The plan is to have a few of them in order. This is to save website space.
So minimizeable paragraphs in HTML
I came upon your post looking for the same.
Here are some that are very nice that I have tried in case others come upon this post also:
'Pure CSS read more toggle': (with a clickable button as per your request): https://codepen.io/Idered/pen/AeBgF
'Readmore.js': http://jedfoster.com/Readmore.js/
And the one I went with:
'jQuery Read More/Less Toggle': https://codepen.io/maxds/pen/jgeoA
Some notes for the Read more/less for beginners (me):
1. The codepen exported zip file contains two sets of closing body and html tags.
2. html code counts as characters when setting how many characters to display in Show less box (index.js). Less by 6. After last text it will add: ...
3. In html inserting a !--comment after: span class="more" breaks it, at least for me.
4. To change link color of Show more/less for example in css:
a.morelink:link {color:#58534d; TEXT-DECORATION: none}
a.morelink:visited {color:#58534d; TEXT-DECORATION: none}
a.morelink:active {color:#f5f5dc; TEXT-DECORATION: none}
a.morelink:hover {color:#f5f5dc; TEXT-DECORATION: none}
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> ' + moretext + '</span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
.morecontent span {
display: none;
}
.morelink {
display: block;
}
<html>
<head>
<title>jQuery Read More/Less Toggle Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<span class="more">
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 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<br><br>
<div class="more">
Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac habitasse platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
I recently was looking to do the same thing and discovered the magic word within a Weebly add-on: Accordion. There is a tutorial on this at W3 as well. I haven't tried it yet, but it may save others the trouble of finding workarounds, as you all seem to have. I didn't have the patience so I went looking for "drop-down faq" menu, which was what they had in Weebly (but you have to pay after you use a few lines, and then it's not as easy to style as you like), and was led to/reminded it was called "accordion." Hope it helps some of you! https://www.w3schools.com/howto/howto_js_accordion.asp
It works similar to other drop-down menus just with a paragraph inside. I made a jsfiddle about it: https://jsfiddle.net/nypo1qeu/
You can find the code here too:
<div class="Dropdown">
<button id="DropDown-Button">Hover me</button>
<div class="Dropdown-Menu">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
.Dropdown {
position: absolute;
display: block;
}
#Dropdown-Button {
position: relative;
display: block;
}
.Dropdown-Menu {
display: none;
background-color: green;
margin-top: 10px;
position: relative;
}
.Dropdown:hover .Dropdown-Menu{
display: block;
}
Let me explain the code for you:
I created a div container which is responsible for the trigger of the menu. If you hover over it, it shows you the paragraph.
The Button is just the graphical companion to the <div> trigger.
The second <div> container is responsible for the code which is kept in it. At default, it has the display: none property, but if you hover over the button, it gets the display: block property and you can see it.
Simple huh?
I hope I could help you. If you need more help, just ask. :)
thank you all for your help. What I managed to was use the code and tutorial from this link to help http://www.htmldog.com/techniques/dropdowns/
I was able to edit and chop and change. It was annoying because upper case transform was on so I got rid of it and you can play with making the drop downs absolute and copying and pasting the CSS but renaming it main_nav2 or something that way they don't overlap each other with the drop downs.
That way you can hover over it and the text will appear and you can make the drop down box a different colour. Its drop down now but I want it clickable
css:
#main_nav ul {
background: #f84445;
max-width: ;
float: left;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav li {
float: left;
position: relative;
width: 450px;
list-style: none;
-webkit-transition: .5s;
transition: .5s;
inline-box-align:last
}
#main_nav > ul > li > a, h1 {
text-transform: ;
}
#main_nav a {
display: block;
text-decoration: none;
padding: 5px 15px;
color: #000;
}
#main_nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
#main_nav ul ul ul {
left: 100%;
top: 0;
}
#main_nav li:hover, #main_nav li:hover li {
background: #ddd;
}
#main_nav li li:hover, #main_nav li li:hover li {
background: #bbb;
}
#main_nav li li li:hover {
background: #999;
}
#main_nav li:hover > ul {
visibility: visible;
opacity: 1;
}
and html
<div ="left">
<tr>
<td><p> </p>
<nav id="main_nav"></nav>
<section id="main_content"></section>
<nav id="main_nav">
<p> </p>
<p> </p><p> </p>
<p><br>
</p>
<div align="center"><em>1</em>
<ul>
<li> </li>
</ul>
</div>
<ul>
<li>
<p align="center"><a href=""><br />
1 one/won.</a></p>
<p align="center"><a href=""><br />
</a></p>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<div align="center"><em>2</em>
<ul>
<li> </li>
</ul>
</div>
<ul>
<li>
<p align="center"><a href="">
2. Two, too or to</a></p>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<div align="center"><em>3</em>
<ul>
<li> </li>
</ul>
</div>
<ul>
<li>
<p align="center"><a href=""><br />
3, three or free</p></a>
</li>
</ul>
</li>
</ul>
here is a brilliant and efficient solution from Paul Obrien for a clickable dropdown paragraph. Only feature missing is to change the label text after a click. Anybody know how to make that magic happen?
https://codepen.io/paulobrien/pen/tpmAi
label {
display:block;
margin:20px 0 0;
border-bottom:1px solid green;
}
label:hover { text-decoration:underline }
input {
position:absolute;
left:-999em
}
.hide {
width:50%;
border:1px solid #000;
background:red;
max-height:99em;
opacity:1;
height:auto;
overflow:hidden;
transition:opacity 1.5s linear, max-height 1.5s linear;
}
.hide p {
padding:10px;
margin:0
}
input[type=checkbox]:checked + div {
opacity:0;
max-height:0;
border:none;
}
.follow{border-top:1px solid blue;margin:0}
html:
<div>
<label for="item-1">Toggle Div</label>
<input type="checkbox" name="one" id="item-1">
<div class="hide">
<p>Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
<p>Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!</p>
</div>
<p class="follow">Following content</p>
Related
This question already has answers here:
Li item on two lines. Second line has no margin
(8 answers)
How to keep indent for second line in ordered lists via CSS?
(14 answers)
Closed 5 months ago.
Here is a inner section of a page :
The word office is falling right under the fontawesome icon and I want it to align with the text above it.
Code snippet:
.tabcontent {
float: left;
padding: 100px 30px;
border: none;
width: 33%;
border-left: none;
height: 580px;
background: #fff;
box-shadow: 0 -6px white, 0 6px white, -5px -9px 8px 4px #88888878, 5px -9px 8px 4px #88888878;
}
#ctab2 p,
#ctab4 p {
display: inline;
color: #000;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="ctab2" class="tabcontent">
<h3>Place of Service</h3>
<h5>Application Submission</h5>
<i class="fa fa-map-pin"></i>
<p>  Sharjah Ports Website</p>
<i class="fa fa-clock-o"></i>
<p>24 x 7</p><br><br>
<h5>Processing & Approval</h5>
<tr>
<td>
<i class="fa fa-map-pin"></i></td>
<td>
<p> &demo123 game Security & jikoi Dept. Office</p>
</td>
</tr><br>
<i class="fa fa-clock-o"></i>
<p>Monday – Thursday, 07:30 – 15:30</p><br><br>
</div>
you can use flexbox and put two elements in row, center the elements vertical
.container {
display:flex;
align-items: center;
}
.icon {
width: 24px;
height: 24px;
margin: 4px;
background-color: #cccccc;
}
.container-text {
margin: 0
}
css above and html
<div class="container">
<div class="icon"></div>
<p class="container-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
Replace the icon with your icon.
Don't use tr and td elements without table element, use some other elements like div or section
Don't use   in your p element, use margin or padding in css of the p element instead
there are different solutions. one of them is using the display flex.
but anyway good work. i would have stayed away from the float though. it may cause alot of issues for display.
also and should just be used inside
.tabcontent {
float: left;
padding: 100px 30px;
border:none;
width: 33%;
border-left: none;
height: 580px;
background: #fff;
box-shadow:0 -6px white,
0 6px white, -5px -9px 8px 4px #88888878, 5px -9px 8px 4px #88888878;
}
#ctab2 p,#ctab4 p
{display: inline;
color: #000;
}
.custom-wrapper { display: flex;flex-direction:row;}
.custom-wrapper > .fa {display:inline-block;}
.custom-wrapper > p {margin:0'}
<div id="ctab2" class="tabcontent">
<h3>Place of Service</h3>
<h5>Application Submission</h5>
<i class="fa fa-map-pin"></i>
<p>  Sharjah Ports Website</p>
<i class="fa fa-clock-o"></i>
<p>24 x 7</p><br><br>
<h5>Processing & Approval</h5>
<div class="custom-wrapper">
<i class="fa fa-map-pin"></i>
<p> &demo123 game Security & jikoi Dept. Office</p>
</div>
<br>
<i class="fa fa-clock-o"></i>
<p>Monday – Thursday, 07:30 – 15:30</p><br><br>
</div>
I'm not sure if this has been asked to death already. But I can't find a way to grow content upwards.
You know how content behaves normally, extends downward, pushing content after down as the content above extends. Is there a way you can do this, but upwards?
Right now the code is ordered like this:
H1 - Title: needs to adjust if it breaks into two lines
p - Tags: needs to adjust height if it breaks to two lines and move the H1 up
p - Text: same as tags but move both tags and title upwards
p - Number: doesn't grow much, but needs to stick to the corner
p - Button: Never grows and needs to stick to the corner
edit 1: better image, yellow arrows show which ways content need to be able to grow, red shows space between each section.
edit 2: clarified question.
edit 3: edited image to signify that all elements stick to bottom and NOT top.
edit 4: added what I'm trying to avoid to image.
You can use Flexbox to achieve this. Make sure the height of the container is correct and then you can align all the elements to the bottom with flexbox. As the content grows, the container will fill upwards.
Here's another good resource on flexbox: CSS Tricks
--
Specifically in this example, if you set the container to be display: flex; with a flex-direction: column; then it will allow you to align the child elements vertically instead of horizontally like you do with floats.
Setting justify-content to flex-end is what aligns everything to the bottom. That's where the magic happens.
HTML
<body>
<div class="container">
<h1 class="title">TITLE</h1>
<p class="tags">Tags, Things, Stuff, More Stuff</p>
<p class="text">Non via nia sex praemissae spectentur contingere respondeam.
Has scriptis usu corporis physicae. Existentia lor perspicuum sub mutationum
agnoscerem vis advertatur. Multo in entis ad rebus tactu oculi ad. Ii in
innatis viderer me hominem at ipsemet. Vitro errem im is anima famam se istas.
Mea credendas ero persuasum sanguinem vox. Sequeretur uti aut frequenter vul
commendare describere. Ex superare aeternum ob connivet ac earumque co.
Physicae fenestra obturabo ii is se.</p>
<div class="bottom">
<p>Number</p>
<p>Button</p>
</div>
</div>
</body>
CSS
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.text, .bottom {
width: 100%;
}
.container {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
width: 100%;
height: 100%;
}
.bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
}
You have to position the elements at the bottom of the page. Here is my solution:
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
html,
body {
width: 100%;
height: 100%;
}
body {
box-sizing: border-box;
padding: 2rem;
font: 1.6rem/1.4 Roboto, monospace;
}
#number,
#button {
position: absolute;
bottom: 2rem;
background-color: #4caf50;
color: #eee;
padding: 1rem;
}
#number {
left: 2rem;
}
#button {
right: 2rem;
}
#topWrapper {
position: absolute;
bottom: 7.24rem;
width: calc(100% - 4rem);
max-height: calc(100vh - 9.24rem);
overflow: auto;
}
#text,
#tags,
h1 {
background-color: #f44336;
color: #eee;
padding: 1rem;
}
#tags,
#title {
margin-bottom: 1rem;
}
#tags {
background-color: #2196F3;
}
#title {
background-color: #FF9800;
}
<div id="topWrapper">
<h1 id="title">Title</h1>
<p id="tags">Tag, Tag, Tag, Tag, Tag</p>
<p id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<p id="number">100,000</p>
<p id="button">Button</p>
You can also view it in this fiddle. Moreover, see how it behaves if the title is longer or if the tag list is longer. If the content becomes to much, a vertical scrollbar is added.
I have a text container with paragraphs and headings. At the bottom of the page I want to float an image to the right of the page, while the text wraps around the image. The bottom of the image should be flush with the bottom of the last paragraph.
The page width is variable (responsive), but the image dimensions are fixed. Is it possible to accomplish this in HTML and CSS (CSS3 is fine)? If not, can it be done with a minimal amount of Javascript?
Here's a schematic example of what I want to accomplish:
The HTML currently looks something like this, but it can be changed if necessary. I don't particularly care where in the document the image is located. Using background images instead would be fine too.
<section>
<h2>...</h2>
<p>... ...</p>
<p>... ...</p>
...
<img src="...">
</section>
When I set float: right on the image, it floats to the right but I cannot get it to align to the bottom of the page. Suggestions?
Edit: the closest I got is this... :-)
Create a spacer element with float: right and height equal to the height of the content minus the height of the image. Then use float: right and clear: right on the image:
<div class="spacer"></div>
<img class="bottomRight" src="" />
<div class="content"></div>
.spacer {
height: calc(100% - 200px);
width: 0px;
float: right;
}
.bottomRight {
height: 200px;
float: right;
clear: right;
}
http://cssdesk.com/bLNWs
My demo uses fixed dimensions in the container element. Since that is rarely a realistic case, it probably makes more sense to use JavaScript to size the spacer. Call this function, passing a reference to the spacer element when the document is ready and during the window.onresize event.
function sizeSpacer(spacer) {
spacer.style.height = 0;
var container = spacer.parentNode;
var img = spacer.nextElementSibling || spacer.nextSibling;
var lastContentNode = container.children[container.children.length - 1];
var h = Math.max(0, container.clientHeight - img.clientHeight);
spacer.style.height = h + "px";
while (h > 0 && img.getBoundingClientRect().bottom > lastContentNode.getBoundingClientRect().bottom) {
spacer.style.height = --h + "px";
}
if (lastContentNode.getBoundingClientRect().bottom > img.getBoundingClientRect().bottom) {
spacer.style.height = ++h + "px";
}
}
This function works (see the demo), and can be reworked for jQuery or your library of choice. It's not meant to be plug-in quality code, but serves to illustrate the concept.
jsfiddle.net/gilly3/xLr7eacp
Edit: I created a jQuery plugin version (github | jsFiddle demo) that supports floating bottom left or bottom right. It also supports specifying which element to align the bottom with.
By the way, I didn't bother trying to support IE7.
I think the future way how to tackle this problem will be with CSS Exclusions.
CSS Exclusions extend the notion of content wrapping previously
limited to floats. ... Elements layout their inline content in their content area and wrap around the exclusion areas in their associated wrapping context (--excerpts from the spec)
This msdn article also explains exclusions
...web authors can now wrap text so that it completely surrounds
elements, thereby avoiding the traditional limitations of floats.
Instead of limiting elements to floating either to the left or right
relative to their position in the document flow, CSS Exclusions can be
positioned at a specified distance from the top, bottom, left, or
right sides of a containing block, while remaining part of the
document flow.
Ironically, to date this only works in IE10 (look for wrap-flow:both here)
Check out this fiddle in IE10+
This is what the code looks like:
<div class="container">
<div class="exclusion">
Exclusion positioned at bottom right hand side of text.
</div>
<div class="dummy_text">
<p>text here</p>
</div>
</div>
CSS
.container {
font-size: small;
background: aqua;
position: relative;
}
.exclusion {
-ms-wrap-flow: both;
-ms-wrap-margin: 10px;
z-index: 1;
position:absolute;
right:0;
bottom:0; /* try fiddling with this. For some reason bottom: -10px (or the like) works better here */
width: 150px;
height: 100px;
background: url(http://placehold.it/150x100) no-repeat;
}
So as you can see - even though the exclusion is positioned absolutely - it still acts like a float - in this case: float bottom right.
Regarding browser support:
Check out this site which shows which properties are supported by the browsers (to date: only IE10+ supports wrap-flow:both )
PS: Latest updates concerning CSS exclusions (and other simlar modules like CSS regions and CSS Shapes) can be found at the Adobe Web Platform Team Blog
Possible CSS Solution: (only tested in chrome)
It looks like this might work using CSS3's flex box properties and a combination of background-image properties. I was able to get it pretty close using only CSS. (It works but needs a little tweaking) Also, this may not be ideal cause I did have to change the markup a little bit to make this work. But its probably worth a shot if you are looking for a pure CSS solution.
Here is a Demo -> http://jsfiddle.net/ADSH2/
New Markup: (not to much different)
<section >
<h2>Some Heading:</h2>
<p>...</p>
<p class="last">
<span class="image"></span>
</p>
</section>
CSS:
.last {
display:inline-flex;
flex-direction:row;
}
.image {
padding:5px 0 0 5px;
width:100%;
background-image:url("http://dribbble.s3.amazonaws.com/users/200359/screenshots/758731/stackoverflow_logo.png");
background-size:100%;
background-repeat:no-repeat;
background-position:bottom right;
}
Resources:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://dev.w3.org/csswg/css-flexbox-1/
I have worked on a jQuery-based solution — probably not as elegant as the one posted by gilly3 though ;) and it's also slower and a bit bloated...
My trick is to append two <div>s to the section, which is floated to the left and hidden width a width of 0. One of the div, a designated ghost element that will have the same dimension as the image, will be positioned below another div that is the designated height spacer. The script uses a while loop to establish if the ghost element has reached the bottom of the parent section element. If this has not happened, it will increment the height of the height spacer by 1, until the condition is satisfied.
The markup I have used is as follow. I'm using the HTML5 attribute data-bottom-image to identify sections that you have the image to be floated to the bottom. Of course it is dispensable, depending on how you want to select for the correct section element.
<section id="c1" data-bottom-image>
<h2>...</h2>
<p>...</p>
<img src="http://placehold.it/250x100" />
</section>
And the jQuery script:
$(function () {
$("section > img:last-child").each(function () {
// Offset image based on the bottom and right padding of parent
var $par = $(this).parent();
$(this).css({
bottom: $par.css('padding-bottom'),
right: $par.css('padding-right')
});
});
// Function: adjust height of height-spacer, pixel by pixel
function adjustHeightSpacer($par, $hs, $is) {
// Stretch height spacer
$hs.height(0);
$hs.css({
height: $par.find("img").position().top - parseInt($par.css('padding-top'))
});
// Adjust height spacer
while($par.height() - $is.height() > $is.position().top - parseInt($par.css('padding-top'))) {
$hs.height("+=1");
}
while($par.height() - $is.height() < $is.position().top - parseInt($par.css('padding-top'))) {
$hs.height("-=1");
}
};
$("section[data-bottom-image]").each(function() {
// Append two spacers:
$(this).prepend('<div class="ghost height-spacer" /><div class="ghost image-spacer" />')
var $hs = $(this).find(".height-spacer"),
$is = $(this).find(".image-spacer");
// Adjust image spacer dimension
$is.css({
height: $(this).find("img").height(),
width: $(this).find("img").width()
});
// Adjust height spacer
adjustHeightSpacer($(this), $hs, $is);
});
$(window).resize($.debounce(250,function() {
$("section[data-bottom-image]").each(function() {
// Adjust height spacer
adjustHeightSpacer($(this), $(this).find(".height-spacer"), $(this).find(".image-spacer"));
});
}));
});
And here is the working Fiddle: http://jsfiddle.net/teddyrised/xmkAP/5/
I guess it's solved. It works!
With a little bit of JavaScript and CSS I did it like this:
http://jsfiddle.net/stichoza/aSScx/
One simple floatify() function.
Responsive.
Window resizing won't break it.
Any image width/height.
Put as many text you want.
Idea inspired by: http://www.csstextwrap.com/
CSS only Solution.
Using media queries one can accomplish this layout.
HTML
<section>
<h2>...</h2>
<p>... ...</p>
<p>... ...</p>
<img src="..." class="show-medium">
...
<img src="..." class="show-small">
</section>
CSS
html, body {
height: 100%;
width: 100%;
}
img {
display: none;
float: right;
clear: right;
}
#media (max-width: Xpx), (max-height: Xpx) {
/* show img for small screens */
.show-small { display:block; }
}
#media (min-width: Xpx) and (max-width: Xpx) and (min-height:Xpx) and (max-height: Xpx) {
/* show img for medium screens */
.show-medium { display:block; }
}
#media (min-width: Xpx) and (min-height: Xpx) {
/* show img as body background for large screens */
body {
background: url("http://placehold.it/200x300") no-repeat fixed right bottom transparent;
}
}
It plays well at different screen resolutions. See demo.
One has to play/adjust the CSS media queries as well as the position of the images within the markup in order to make it work.
CSS media queries is supported in Firefox 3.5+, Opera 7+, Safari 3+, Chrome and IE9+. For older IE versions one can use this fix: http://code.google.com/p/css3-mediaqueries-js/
A responsive solution for 2020, inspired by #gilly3's solution, and until CSS Exclusions arrive.
Flexbox on containing element to avoid needing fixed-height container whilst still ensuring 100% height works
:before element instead of spacer div
Viewport unit instead of fixed value to size image (and 'spacer') proportionately
To max-width image on wider screens, introduce breakpoint with fixed width to both image and spacer
Subtract any vertical margin needed within calc()
.container {
display: flex;
}
img {
float: right;
clear: right;
margin: 20px 0 0 20px;
height: 30vw;
#media (min-width: 1200px) {
height: 400px;
}
}
.container-inner:before {
content: "";
float: right;
height: calc(100% - 30vw - 20px);
#media (min-width: 1200px) {
height: calc(100% - 400px - 20px);
}
}
<div class="container">
<div class="container-inner">
<img src="https://picsum.photos/200" />
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ab, doloremque quasi, obcaecati aspernatur nam possimus harum architecto odit molestiae pariatur aliquid necessitatibus, corrupti mollitia provident quis quam eligendi qui.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ab, doloremque quasi, obcaecati aspernatur nam possimus harum architecto odit molestiae pariatur aliquid necessitatibus, corrupti mollitia provident quis quam eligendi qui.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ab, doloremque quasi, obcaecati aspernatur nam possimus harum architecto odit molestiae pariatur aliquid necessitatibus, corrupti mollitia provident quis quam eligendi qui.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ab, doloremque quasi, obcaecati aspernatur nam possimus harum architecto odit molestiae pariatur aliquid necessitatibus, corrupti mollitia provident quis quam eligendi qui.</p>
</div>
</div>
A CSS only and responsive solution that works without complex code. Resize the browser and see the magic in play:
.wrapper {
display: flex;
border: 1px solid;
}
.box {
text-align: justify;
font-size: 20px;
}
.float {
float: right;
height: 100%;
margin-left: 15px;
display: flex;
align-items: flex-end;
shape-outside: inset(calc(100% - 100px) 0 0);
}
<div class="wrapper">
<div class="box">
<div class="float"><img src="https://picsum.photos/id/1/100/100"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna
ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent
ac erat ut eros venenatis pulvinar. Pellentesque eu dapibus dui. Ut semper sed enim ut vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas
hendrerit vulputate et, lobortis non nulla. Aenean dui libero, dictum vel nibh eget, tristique egestas enim.
</div>
</div>
More details: https://css-tricks.com/float-an-element-to-the-bottom-corner/
PS: I am the author of the above article
use this :
<section class="post">
<h2>...</h2>
<p>... ...</p>
<p>... ...</p>
...
<img src="...">
</section>
<style>
.post img {float:right;margin-top:80%}
</style>
change 80% to get best result.
Good Luck.
Here's a lightweight solution with a bit of jQuery:
http://jsfiddle.net/isherwood/6BvC2/
<section class="flagpole">
<div class="pole"></div>
<img class="flag" src="..." />
<p>Paragraphs...</p>
</section>
.pole, .flag {
float: right;
clear: right;
}
.pole {
width: 0.1px
}
function setFlag() {
$('section.flagpole').each(function () {
var poleHeight = $(this).height() - $(this).find('.flag').height();
$(this).find('.pole').height(poleHeight);
});
}
setFlag();
$(window).on('resize', function () {
setFlag();
});
To dispel any concerns about plagiarism, this solution is based on another similar answer I provided a while back.
Not quite there yet - but you might get where I'm going. Maybe someone else will complete this (if possible).
div.wrapper {
width: 300px;
transform: rotate(-90deg);
writing-mode: vertical-lr;
}
p.text {
margin-top: 1em;
writing-mode: vertical-lr;
}
img {
float: right;
transform: rotate(90deg);
height: 100px;
width: 100px;
}
<div class="wrapper">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAYAAACqNX6+AAAAAXNSR0IArs4c6QAABCZJREFUeF7t3D9I80AUAPBXcFBwEQcRwcGl4KhLQTvXWQQHdRasWDroIEitxVVBRFCc/DO4ddRZhU5CwcWldCiVDiqFgkUEP9593HE5kjZNk/vTJouNudxd3u/eXYI2kWKx+AcAMDw8DENDQ/gx3CRH4Pv7GxqNBmk1Uq1W/wYHB6FWq5FfjI2NwcjIiOQu9WdzX19flrg3m83/IOPj4yQiYoEQJpiB4hTn9/d3KwhtPoSRC0FbcwQJYfwFcTvA24KEMN3BuIVwnSFidzptoLvLMfdsr3FynSEhjLvB4RXCc4aEMPYw3UL4BtLva4xfEL6D9BuM3xCBgfQ6TFAQgYP0GkzQENJATIeRBSEdxDQY2RDKQHSHUQWhHEQ3GNUQ2oCohtEFQjsQ2TC6QWgLEjSMrhDag/gNozuEMSDdwpgCYRxIpzCmQRgL0g7GVAjjQUSY399f8quBgQGj/43J818MaUBU/6QZEYIolnCamsIpSzKM24C7LSe5+22bM2bK8hpgr+e1jVxABbQH8SugftUTkAOrVluQoAIYVL1+QWkHIitgstrpFEobEFUBUtWuE5RyEF0Coks/lIHoEgBxpKrul3QQ1Rfsdk5X1U9pIKou0C2AUznZ/Q4cRPYFdQugGiYwEB0h8Juu6XQa1tbWYG5ujsX+9vYWVldXyf7NzQ2srKywY29vb7C8vAzFYhHW19chk8lAvV4nx52+HEvbOT8/Z/UcHBzA3t4e2RfrPD4+Zt9+9h1ERwgMAh+kp6cnBoLB2dragpOTExIs+jkajbJz4vE4LC4uEkz8jGCtrvPj4wM2Nzdhf38fsB5+o/2wqxPL+QaiKwQ/ImOxGJTLZTJSaYZgdjw+PgIdpblcDqampkjQeSwM7PPzM1xfX7OyWLfddeN5iHF6egqjo6MWkHZ1dg2iMwSNRKVSIR/xpQgYaB4EAXCj0wm/jwC4j2gYWH7/7OyM7NNj9/f3JIOOjo4gEolAPp+3wNG+tKoT2/AMYgKEuEDjVGIHQjMCy2OAS6USARIzQhz5FG9jY4PVOz09DZeXl7Czs8OaTyQSFlQ+y8Q6OwYxEYJGxm8QWt/DwwPwizZCIWoqlQJ8Q8bV1RV8fn6SjHl5ebFMe55BTIZoB+JlyqJrA2YUjng6dYlZiXErFApweHhIQH5+fhynQVdTVi9AtALhpygsJy7q/OJsN4XhXRlu8/PzbB0SUTALdnd3YXt7m9wE4JR2cXHB1iV+CuurV2vYTVleb3v529eFhQW2hszMzFhuj2m5iYkJAoYBx8V/dnaWPPtks1l2K21729tLGeFmUacLudsHQ5x2cMOg4kZvlzF7kskk3N3dweTkJDlOHwzxgZJ/+MNBsLS0BK+vr+ShE4/Rl/+wDAlfzyTyydkXE4C8nil8gZmc4LdqhX+B2T8GuESS5P5SHQAAAABJRU5ErkJggg==" />
<p class="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
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 am trying to create a page that shows a label and the corresponding text (might be multi-line), but I do not get the lines from the label and the text in the same line.
HTML Code:
<label for='name'>Name:</label>
<div class='input' id='name'> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
<label>Date:</label>
<div class='input' id='date'> 10.10.2012 </div>
<label>Sum:</label>
<div class='input' id='sum'>ABC </div>
CSS:
label {
width:150px
float: left;
}
.input{
margin-left:150px
}
Here is the JSFiddle Link
Semicolon ; is missing after width:150px
Correct it. It works
DEMO
Missing ";" after 150px and clear:both after div
label {
width:150px;
float: left;
display: block;
border: 1px solid red;
}
.input{
margin-left:150px;
}
br {
display: block;
clear: both;
}
http://jsfiddle.net/DGolub/msvVc/1/
You lost in your style ; after width:150px
Try this: JS Bin
label {
width:150px;
float: left;
}
Try this:
.input{
display:inline
}
Put display:block; in .input:
.input{
margin-left:150px;
display: block;
}