This question already has answers here:
w3c html validation error - Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections
(3 answers)
Closed 6 years ago.
Warning: Article lacks heading. Consider using h2-h6 elements to add
identifying headings to all articles. From line 32, column 5; to line
32, column 46 ↩ ↩
The above warning is generated by https://validator.w3.org/.
Now let me show you the code of those line numbers.
<article class="form-control relativePos">
<ul class="formsectionTab">
<li class="active">1. Services</li>
<li>2. Time</li>
<li>3. Details</li>
<li>4. Payment</li>
<li>5. Done</li>
</ul>
Precisely the Line#32 that code is talking about is this →
<article class="form-control relativePos">
My HTML developer is saying there are only 2 ways to get rid of these warnings →
Either use <div></div> in place of section or article or use h2-h6 elements.
But my problem is I want to build my template on HTML5 tags and the code has no scope of putting up the headings because thats not required. what should I do?
Any alternative HTML5 attributes that can do this w/o enforcing the h2-h6 elements?
The answer is in your question. I will quote you: "I want to build my template on HTML5 tags and the code has no scope of putting up the headings because thats not required."
This is one of the biggest problems in the software industry. It's called Scope Creep.
Basically, if something is not within the scope of requirements, you should avoid dealing with it unless absolutely necessary. Sometimes it's hard to bite the bullet though I know.
Add h1 - h6 elements as much as you want
Wrap those h1 - h6 elements in divs styled the same as your other text
Add classes to the h1 - h6 elements to inherit the div style (which
should be the same as the rest of your text)
Effect?
h1 - h6 that look exactly like the rest of your text instead of looking like heading elements
body {
background: #111;
color: #999;
text-align: justify;
text-justify: inter-word;
max-width: 80%;
margin: 10%
}
.uniform {
display: inherit;
text-align: inherit;
color: inherit;
font-size: inherit;
font-weight: inherit;
}
.mycoolstyle {
color: red;
font-size: 22px;
font-weight: bold;
display: inline;
}
<body>
<div>
<h1>This is a Header 1 with browser defaults</h1>
<div class="mycoolstyle">
<h1 class="uniform">This is a Header 1 with inhertied div style</h1>
</div>
<h2>This is a Header 2 with browser defaults</h2>
<div class="mycoolstyle">
<h2 class="uniform">This is a Header 2 with inhertied div style</h2>
</div>
<h3>This is a Header 3 with browser defaults</h3>
<div class="mycoolstyle">
<h3 class="uniform">This is a Header 3 with inhertied div style</h3>
</div>
<p>This is a paragraph with browser defaults
<br>Lorem ipsum dolor sit amet, in eam simul nostrud definiebas, mea iusto placerat prodesset ei. Eum summo audiam ea. Vitae aperiri at duo. Vis atomorum partiendo id, nam ea noluisse platonem. Nec minimum consequat cu, pri in harum moderatius. Ferri
aperiam forensibus an nam.</p>
<div class="mycoolstyle">
<p class="uniform">This is a paragraph with inhertied div style
<br>Lorem ipsum dolor sit amet, in eam simul nostrud definiebas, mea iusto placerat prodesset ei. Eum summo audiam ea. Vitae aperiri at duo. Vis atomorum partiendo id, nam ea noluisse platonem. Nec minimum consequat cu, pri in harum moderatius. Ferri
aperiam forensibus an nam.</p>
</div>
</div>
</body>
Related
I've been working on designs with very irregularly-shaped divs, such as rhombuses, trapezoids, etc. I want to know what the most responsive way to deal with these types of designs.
My current workaround:
The typical way I implement these designs is by using a combination of clip-path, bloated vertical padding to deal with the clip-path clipping content, and then a negative margin-top on the next fold to cover the white-space created by the clip-path. I declare negative margin-top values with viewport width (ex. -10vw), so the folds adjust based on the width of the browser.
Problems with current workaround:
Negative margins usually cause folds to overlap each other, covering the content of other folds. Multiple #media queries needed for it to look acceptable and yet I still encounter certain sizes where the folds overlap each other.
Here's an image to further describe what I mean by irregularly-shaped divs/folds:
https://imgur.com/a/jCbJZS4
Any help would be appreciated. These sort of designs seem to be trending, so your help will serve me and others for future projects as well. Thank you!
SVGs are a nice way to create section dividers as per your image,(and other complex shapes!) you can target the various shapes inside an svg with css (change fill colour, animations etc), they are widely supported (except for old IE browsers, naturally) and as they are simply vector paths, you can easily stretch, scale and distort, and they're quite small in size.
You might set an svg divider e.g. a wave pattern inside an absolutely positioned div at the bottom of a content section, like below.
section {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
#sect1 {
background-color: #2baf70;
}
#sect2 {
background-color: #f9f9f9;
}
.row {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 45px 45px 115px 45px;
}
.divider {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmOWY5ZjkiPjxwYXRoIGQ9Ik0xMjgwIDMuNEMxMDUwLjU5IDE4IDEwMTkuNCA4NC44OSA3MzQuNDIgODQuODljLTMyMCAwLTMyMC04NC4zLTY0MC04NC4zQzU5LjQuNTkgMjguMiAxLjYgMCAzLjRWMTQwaDEyODB6IiBmaWxsLW9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTAgMjQuMzFjNDMuNDYtNS42OSA5NC41Ni05LjI1IDE1OC40Mi05LjI1IDMyMCAwIDMyMCA4OS4yNCA2NDAgODkuMjQgMjU2LjEzIDAgMzA3LjI4LTU3LjE2IDQ4MS41OC04MFYxNDBIMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMTI4MCA1MS43NmMtMjAxIDEyLjQ5LTI0Mi40MyA1My40LTUxMy41OCA1My40LTMyMCAwLTMyMC01Ny02NDAtNTctNDguODUuMDEtOTAuMjEgMS4zNS0xMjYuNDIgMy42VjE0MGgxMjgweiIvPjwvZz48L3N2Zz4=);
/* this is an inlined svg taken from a project I'm working on, as an example. as I can't really import a .svg file here */
width: 100%;
background-size: 100% 70px;
bottom: 0;
height: 70px;
z-index: 1;
display: block;
background-repeat-y: no-repeat;
position: absolute;
}
<section id="sect1">
<div class="row">
<h2>Mock Content</h2>
<p>Lorem ipsum dolor sit amet, affert omittam urbanitas est te. Eam ne oportere erroribus, quis veri eam cu, usu ex tota verear iudicabit. Vim modus conclusionemque an, verterem explicari sententiae ei duo. Mel cu docendi fierent, sonet dolorum ocurreret
at vis. Voluptua fabellas electram ut has, tation maluisset voluptatibus sea ex.</p>
</div>
<div class="divider"></div>
</section>
<section id="sect2">
<div class="row">
<h2>Mock Content</h2>
<p>Lorem ipsum dolor sit amet, affert omittam urbanitas est te. Eam ne oportere erroribus, quis veri eam cu, usu ex tota verear iudicabit. Vim modus conclusionemque an, verterem explicari sententiae ei duo. Mel cu docendi fierent, sonet dolorum ocurreret
at vis. Voluptua fabellas electram ut has, tation maluisset voluptatibus sea ex.</p>
</div>
</section>
I would like to display poetry, using only HTML and CSS. To my understanding, the semantically correct way to structure poetry in HTML is using <p> tags for verses and <br /> tags for individual lines, like this:
<p>
poetry is very nice <br />
but kind of hard to style <br />
if only you could help me, guise, <br />
I'd give you my best smile.
</p>
When the poem has long enough lines to wrap, the accepted style would be to hanging indent the wrapped line, like this:
This is a very long line that
needs to be wrapped
Ideally the wrapped part would be right aligned, but a fixed dimension hanging indent would work too.
I have seen various solutions to this, but they all involve semantically superfluous HTML, such as using lists or <span> tags for each line. For example:
.verse {
margin-left: 2em;
}
.line {
margin-left: -2em;
}
<p class="verse">
<span class="line">poetry is very nice </span><br>
<span class="line">but kind of hard to style </span><br>
<span class="line">if only you could help me, guise, </span><br>
<span class="line">I'd give you my best smile.</span>
</p>
Is there a way I could accomplish this without cluttered HTML?
Edit (1): I had an error in the example code. Both .verse and .line should have a margin-left property declared, not padding-left and margin-left.
Edit (2): Regarding the possible duplicate, I am aware of the different opinions regarding what is the most correct to mark up poetry in HTML. I have selected what seemed to me to be the most semantically correct, and this question is about the CSS needed to display it correctly.
Edit (3): I corrected the error in the example incorrectly. Here is a screenshot:
To clarify, I would like to achieve the same effect as the above screenshot without the <span> tags, or any other semantically superfluous tags.
Considering you have 2em of padding along with 1.5em of negative margin, you can simply combine these two values by just giving the verses 0.5em of padding. This will allow you to cut out the <span> tags entirely, with the exact same visual output:
.verse {
padding-left: 0.5em;
}
<p class="verse">
poetry is very nice<br />
but kind of hard to style<br />
if only you could help me, guise,<br />
I'd give you my best smile.
</p>
You can use a negative text-indent for the first line of a paragraph and add padding to the whole paragraph, i.e. you need only a the <p> element.
.verse {
text-indent: -20px;
padding-left: 20px;
}
<p class="verse">
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. 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.
</p>
Use like :
div.a {
text-align: justify; /* For Edge */
-moz-text-align-last: right; /* For Firefox prior 58.0 */
text-align-last: right;
}
<div class="a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>
Follow : https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-align-last
The only easy solution I've come up with so far is to do paragraph breaks instead of line breaks and create a .poem class that takes away the spaces between paragraphs (so it acts as a line break rather than paragraph break).
.poem { text-indent: -2em; margin: 0 0 0 2em;}
But then you have to go through and put double paragraphs (double space) between stanzas. It's not a good solution but it's easier than pasting in classes on each line or making a list.
If anyone has a solution with breaks though, that would be awesome. text-align-last: right; has a similar effect, but it's not a traditional poetry format.
I am creating a page for comments, which containers users' comments and a comment input, the comment input is fixed at the bottom.
The problem is it works fine on Desktop, but when I try on my iPad iOS 11 the comment input box scrolls with the page, not fixed at the bottom.
Here is my code: JSFiddle
CSS
.xi-ipad-scroll {
height:500px;
overflow:hidden;
background:green;
}
.xi-comment {
width: 40%;
bottom: 0;
position: fixed;
}
.xi-comment-box {
width: 100%;
font-size: 15pt;
font-weight: 700;
}
.xi-comment-send {
bottom: 15px;
position: fixed;
}
HTML
<div class="xi-ipad-scroll">
<div class="xi-main-title">Bình luận</div>
<div class="xi-comment-list">
<ul>
<li>
<div>Quang Anh Nguyễn</div>
<div>Lorem ipsum dolor sit amet, illum prompta sadipscing cu sit. Ea mei lorem erroribus honestatis, laoreet torquatos eu mel, nam dicant labitur tractatos et. Cu est alia altera consulatu, vim falli detracto reformidans in, novum forensibus eu sit. At etiam erroribus prodesset qui, eam veniam laoreet at. Ea mei natum erant.</div>
</li>
<li>....</li>
</ul>
</div>
<div class="xi-box xi-comment">
<textarea type="text" placeholder="Comment..." class="resizable xi-comment-box" rows="1"></textarea>
</div>
</div><!--iPad-->
I searched on internet and I got solutions like putting -webkit-backface-visibility: hidden; or z-index:100 but none of them works
If I'm understanding what you are trying to do correctly, your "position:fixed" is actually what is causing this. Fixed position will always show on the screen. More info on fixed position. If you want it to be at the bottom of all content you will need to remove the fixed from both -send and -comment.
.xi-comment {
width: 40%;
bottom: 0;
***position: fixed;***
}
.xi-comment-send {
bottom: 15px;
***position: fixed;***
}
This now leads to a new problem, you have set an absolute height and have hidden anything outside of that height. You either need to extend the height, remove the hidden, or move the comment section outside of that div.
I put together a codepen to show this. I think you actually are having the same issue on desktop, I just don't believe you had enough content for you to realize it.
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 have some very simple code which works perfect for what look I'm trying to achieve. I have two divs which are displayed as "boxes" which are contained within an outer div which is the boxContainer. I have the boxes sitting next to each other rather than one on top of the other, and they are aligned perfectly in the middle of the screen. The boxes widths shrink/grow as the browser width gets smaller/larger, and the boxes relocate to be one on top of the other if the browser window gets too small, while remaining centered on the page. Perfect.
The only problem is that the boxes are aligned on the bottom instead of the top. Because the second box has less text within it, it is pushed further down the page to align with the bottom of the first box. I want them to align on the top instead.
I believe this is caused by display:inline-block, but I'm not sure why, and I don't know how to fix it and keep the same features I listed above.
If you could help me out, I'd surely appreciate it!!
#boxContainer {
width:80%;
margin:0 auto;
text-align:center;
}
.box {
display:inline-block;
width:35%;
margin:20px;
border:solid 5px;
border-radius:40px;
}
<div id="boxContainer">
<div class="box">
<h3>BOX 1</h3>
<p>TEXT GOES HERE, blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk</p>
</div>
<div class="box">
<h3>BOX 2</h3>
<p>TEXT GOES HERE, blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk</p>
</div>
</div>
Picture
Thank you!
Since the boxes are already inline-block you can add vertical-align: top to the .box style.
.box {
display: inline-block;
border: solid 1px;
vertical-align: top;
width: 40%;
}
<div id="boxContainer">
<div class="box">
<h3>BOX 1</h3>
<p>Lorem ipsum dolor sit amet, altera interesset pri an. Et aeque interpretaris vel, at quo summo deleniti disputationi. Eu inimicus splendide duo, soleat intellegam ut per. Sint impedit recusabo ex vix, aliquid adipisci consequat no ius. Eu possim consequat eum, sea cu quaeque impedit, est fuisset accusamus definiebas ad.</p>
</div>
<div class="box">
<h3>BOX 2</h3>
<p>Viris eruditi consectetuer ei mea, eu nulla ridens officiis duo. In atomorum forensibus abhorreant quo, id nec aperiam dissentiet.</p>
</div>
</div>
You can use the vertical-align CSS property.
It has effect only on inline, and inline-block elements.
This is a great reference on vertical-align.