Develop Reference

How to align text to bottom, while floating css shape to side, so that text wraps to shape?

I have some text inside a <p> that is inside a <div>. I have a css image shape that floats to one side. I want the text in the two upper boxes to wrap to the shape but also align to the bottom of the div. The two lower boxes work fine because I do not need to vertically align the text within them. The problem is, the text can vary in length and so can the amount of lines, so I can not use a fixed height. Therefore absolute positioning will not work, plus the text will ignore my floating css image shape.
I have read dozens of questions and answers and all of them seem to use hacks. There is also one question that seems to ask the same as mine, but I can't find it anymore, besides there was only one answer which was javascript based. I tried using flexboxes with align-items:flex-end; but that doesn't work well with my floating shapes. I also tried using a table and vertical-align:bottom; but my text just breaks to another line and doesn't wrap to the shape.
A workaround I came up with is to use padding-top on the text, but not knowing the height of the text means the text does not always position it to the bottom of the div, especially if the length of text changes.
EDIT: I am totally open to any new ideas. This was just the best approach I could come up with. I even started toying around with the idea of using only one shape for all four boxes. But that seems a bigger challenge.
EDIT: I also updated the URL's so you can now run the code snippet.
EDIT: I have decided to go the Javascript route and am working on a solution. I am open to any ideas.
EDIT: What bothers me the most, is that every single idea I come up with requires an army of Javascript. The solution, in my opinion, should NOT require a nightmare. CSS should be able to solve this, but I can't seem to find a way without Javascript.
div, img, p {
margin:0px;
border:0px;
padding:0px;
}
#wrapper {
display:block;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}
.box {
display:block;
position:absolute;
width:50%;
height:50%;
}
.box p { line-height:1.5em; padding:10px; }
/* The image shape is 300px x 300px. * /
/* I use 50vh because I want the shape size to always be half of the window height. */
/* This gives the illusion of one larger shape. */
.shape {
position:relative;
shape-margin:2em;
width:50vh;
height:50vh;
}
/* My workaround solution - #top_left p, #top_right p { padding-top:29vh; } */
#top_left { right:50%; top:0%; }
#bottom_left { right:50%; top:50%; }
#top_right { left:50%; top:0%; }
#bottom_right { left:50%; top:50%; }
#top_left p, #bottom_left p { text-align:right; }
#top_right p, #bottom_right p { text-align:left; }
#top_left .shape { float:right; shape-outside:url('https://i.stack.imgur.com/B1Dzu.png'); }
#bottom_left .shape { float:right; shape-outside:url('https://i.stack.imgur.com/Vxmz0.png'); }
#top_right .shape { float:left; shape-outside:url('https://i.stack.imgur.com/UL8uT.png'); }
#bottom_right .shape { float:left; shape-outside:url('https://i.stack.imgur.com/EGBRz.png'); }
<div id="wrapper">
<div id="top_left" class="box">
<img src="https://i.stack.imgur.com/B1Dzu.png" class="shape" />
<p>Here is some text. Here is some text. Here is some text.</p>
</div>
<div id="top_right" class="box">
<img src="https://i.stack.imgur.com/UL8uT.png" class="shape" />
<p>Here is some text. Here is some text. Here is some text.</p>
</div>
<div id="bottom_left" class="box">
<img src="https://i.stack.imgur.com/Vxmz0.png" class="shape" />
<p>Here is some text. Here is some text. Here is some text.</p>
</div>
<div id="bottom_right" class="box">
<img src="https://i.stack.imgur.com/EGBRz.png" class="shape" />
<p>Here is some text. Here is some text. Here is some text.</p>
</div>
</div>
I have created an image to illustrate. The pink borders are just to show the box boundaries.
shape_top_left.png
shape_top_right.png
shape_bottom_left.png
shape_bottom_right.png

The best you will probably achieve is through using the shape-outside property
Check out here for some documentation.
However, be warned as of 2019 this isn't supported in Internet Explorer or Microsoft Edge
A simple enough codepen example would be this

Well here is my Javascript solution. It requires a lengthy script so I will just get to the core of the solution.
The Workaround
With my CSS image shape floating to the right I can still get wrapping text, even though I want my text to align to the bottom. Since no working spec I have seen allows me to vertically align my text to the bottom and get it to wrap to a CSS shape, I need to create the illusion with padding-top. I solved the dilemma of not knowing my text height by running a series of checks through a loop in Javascript. Just check the initial height of the text, then add a single increment of padding-top, then compare with the parent container's height. Repeat this process until the text height reaches or exceeds the parent containers height. The important thing here is that each time you add an increment of padding-top, you change the height of the text. The more padding you add, and the closer the text gets to the CSS shape, the more the text wraps and flows differently. This is why we need to check the height on each increment. Since my text has a font size in EM units, I would have a hard time knowing it's computed height doing guesswork. Add in client zooming and it's a math nightmare! Rather we just check with single increments and no math needed, hooray!
My Javascript
This is just a core example, not the full script, but you should get the idea.
var counter = 0 ;
function checkHeight()
{
var container = document.getElementById("top_left") ;
var text = document.getElementById("top_left_text") ;
var container_height = container.offsetHeight ;
counter++ ;
text.style.paddingTop = counter + "vh" ;
var text_height = text.offsetHeight ;
if ( text_height < container_height ) { checkHeight() ; }
}
Another Future Solution
Using CSS Exclusions.
With CSS Exclusions you can have an element that does not float but, behaves like a floating element, so that content wraps around the element in much the way that floating elements do. Unfortunately, there is almost no support for this technology at the moment. That said, I would strongly encourage anyone interested to join the discussion and get more buzz going for the draft to maybe become a real spec. CSS Exclusions open up some really cool possibilities that, in my opinion, bring HTML out of the stone age in terms of document flow.
In the case of my problem here, I would simply be able to absolutely position my CSS image shape and get my layout without the need of Javascript. My text would be vertically aligned to the bottom because there would be no floats to say otherwise.
For those who want to know more about CSS shapes, read this excellent article.

Changing the class of a div

<!doctype html>
<html>
<head>
<style>
#sample{
width:100px;
height:100px;
background-color:red;
}
.green {
background-color:green;
}
</style>
</head>
<body>
<div id="sample" ></div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
window.setTimeout(function(){
$('#sample').addClass("green");
}, 2000);
</script>
<html>
I want to change the background color of the div with id="sample" from red to green in 2 seconds.I added the javasript to add a class with a green background to the div after 2 seconds.But the added class fails to replace the background color of the div element.So is there any solution which can be applied here to change the background color in two seconds.Also i know it is possible,if we add an another class to toggle between the background colors.An another solution will be appreciated.

It's fails because the weight of ID more than the weight of CLASS:
id = 100
class, pseudo-class = 10
element, pseudo-element = 1
You can use id with class:
<body>
<div id="sample" class="red"></div>
</body>
And then toggle from red to green. No need to use !important.
Moreover, if you want to change it with animation, you can use jQuery animate backgroundColor

<!doctype html>
<html>
<head>
<style>
#sample{
width:100px;
height:100px;
/*Remove this from here*/
/*background-color:red;*/
}
.green{
background-color:green;
}
.red{
/*Create a class for red alone*/
background-color:red;
}
</style>
</head>
<body>
<div id="sample" class="red" ></div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
window.setTimeout(function(){
// Calling removeClass with no parameters will remove all of the items's classes.
$('#sample').removeClass();
// Now add the class of green
$('#sample').addClass("green");
}, 2000);
</script>
<html>

Cause
The problem is that an id-style is more important (has more 'weight') than a class style, so #sample has higher precedence than .green and the div remains red. There are many rules that dictate which CSS rules have precedence over others. Make sure to read about CSS rule Precedence, so whichever solution you choose, you know why you chose it and what are the consequences.
Fix
There are many ways to fix this, but they all boil down to making sure that the green rule overrules (is equally or more important than) the default red rule.
Solution (Best): Style on classes, not on IDs.
Add a class to the div that indicates what kind of box it is:
<div id="sample" class="samplecontainer"></div>
Now, in the CSS you can easily apply a default style to such elements, and overrule them too:
.samplecontainer {
background-color: red;
}
.samplecontainer.valid,
/* Or just */
.valid
{
background-color: green;
}
Now the CSS doesn't rely on specific elements, but on element definitions. You can say that containers are by default red, and are made green when they become 'valid' (whatever that may mean in this example). This way, you don't rely on ids in the CSS, which prevents very bulky CSS and the undesirable overrule you bumped into.
Note I renamed 'green' to 'valid' to make it more semantic. What if you want to change the border too, or make them blue instead of green? Then you would still need to dig into the JavaScript code, and also change the class names in CSS and possibly fixed style names in HTML and PHP. Or you can just leave the class name 'green' for the blue element, which is very confusing too. So a name describing the type or state (like valid, active, or whatever suits you best) is easier to read and to maintain.
Solution (Sub-optimal): Add Id to the green rule too
Try do change the css like this, so indicate that an element that has id 'sample' and class 'valid' should be green. I think this is quick fix and less optimal compared to the previous one, and your CSS may become bulky if you have many elements that can become green.
#sample.valid{
background-color: green;
}
Solution (Poor): Adding inline style though JavaScript
Instead of adding a class through JavaScript, you can also add inline style. Inline styles (the style attribute), has higher precedence, so adding style="background-color: green" will overrule the color defined in CSS.
$('#sample').css('background-color', 'green');
I wouldn't much prefer this method, since you would have to dig in your JavaScript to change the styling, end it will get really clunkcy when you want to change other properties as well. Each of the solutions above are preferable over this one.
Solution (Poor and risky): Add !important
From CSSTricks: When Using !important is The Right Choice
The unfortunate typical use case goes like this:
WHY IS MY FRAGGLE ROCKING CSS NOT WORKING INTERROBANG
(use !important rule)
OK, now it's working
Then the next guy comes along and tries to
make new changes. He tries to alter some existing CSS rules, but now
his changes aren't behaving how they should....
There are some cases when !important might be the right choice, but it should never be the quick fix for a problem like this, because in the end you'll and up with a CSS that is very hard to maintain, and various !importants will bite each other. Only use it when you have really thought it through.

Change CSS to
.green{
background-color:green !important;
}
DEMO

Please try this one and remove #simple style css
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
window.setTimeout(function(){
$('#sample').css({'background-color':'green'});
}, 2000);
</script>

in the JavaScript you can use just like that
you may find demo
var a;
function function_name() {
a = 1;
setInterval(new_function, 1000);
}
function new_function() {
if (a === 1) {
color = "requred_color";
a = 2;
} else {
color = "another_color";
a = 1;
}
document.body.style.background = color;
}

.green{
background-color:green !important;
}

change your green class like following
.green{
background-color:green !important;
}
Or try
$('#sample').css({background-color:"green"});

scrollTop Broken: Body Height 100%, Overflow Auto

http://jsfiddle.net/o7z1pnfx/
I am working on a website with the following layout:
<html>
<head></head>
<body>
<div id="left"></div>
<div id="main"></div>
</body>
</html>
And the following CSS:
* {
box-sizing:border-box;
}
html,
body {
height:100%;
margin:0;
padding:0;
}
html {
overflow:hidden;
}
body {
overflow:auto;
}
#left,
#main {
min-height:100%;
float:left;
}
The rest of the CSS isn't really important, but rest assured that I have the floats cleared, etc. The layout looks exactly as I want it to.
The purpose of the provided CSS is to make it so that #left and #main will be at minimum the height of the window, but if either grows larger, the page will grow larger with it. This is working as intended.
The issue is that I need to use the Y scroll position in my JavaScript at some point, but the combination of height:100% and overflow:auto on body are causing body's scrollTop property to always be 0.
If anybody has a JavaScript alternative or a small CSS change to fix this, that would be great. I would prefer to avoid larger CSS changes, but they still may be helpful.
Thanks!

Tested on Firefox and it was not an issue. I believe it is a mistake with Chrome, and am reporting it as such. Don't know a workaround, doubt one exists.
Edit: sigh, also seems to be an issue in Safari.

Sorry for my late solution but I just encouter an issue just like you. The point is html tag doesnt like any overflow rule in it. Just remove any overflow from html and put in body and it work

Using just min-height won't break the scroll functions. (only tested in Chrome). 100vh seems to work fine too.
body, html {
min-height: 100%;
}
or
body, html {
min-height: 100vh;
}

Looks to me like you can get around this bug by using 100vh on the elements you want to always be the height of the window.
See the modified jsfiddle.
Viewport units arn't perfectly suported but it looks like this will work in most modern browsers.

Actually #scwcompton, your answer lead me on the right track for a fine workaround. What happens is actually that webkit browsers don't repaint the page for some reason.
Forcing the repaint fixed the issue for me. I added the following code right before I animate the body element :
MLB.BODY = $("#body");
MLB.BODY.css("display", "none");
MLB.BODY.height(); // no need to store this anywhere, the reference is enough
MLB.BODY.css("display", '');
MLB.BODY.scrollTop(99999);

Customizing where a div wraps to

Is it possible to have two divs wrap as if their one line?
<div class="multiLine">
<div class="topLine"></div>
<div class="bottomLine"><div>
</div>
so if top line was all "A"'s and the bottom line was all "B"'s we would see it wrap like
AAAAAAAAA
BBBBBBBBB
AAAAAAAAA
BBBBBBBBB
I'm trying to accomplish this with JavaScript, jQuery, and css3.

This could actually be done just by using CSS and playing with the div positions and the line heights.
For example:
.multiLine {
position:relative;
width:100px;
eight:100px;
}
.topLine {
position:absolute;
word-break:break-all;
line-height:40px;
top:20px;
}
.bottomLine {
position:absolute;
word-break:break-all;
line-height:40px;
}
This would work although it may not be an optimal solution for what you want. It depends on the context and what you want to achieve with this effect.
EDIT: You can see an example of how it would look like here: http://jsfiddle.net/78f94/

You cannot do it with html/css alone. But with Javascript you can find viewport width, truncate the string and add it as content to new inner divs. This could get very complicated when you resize as width changes!
Here is more info on getting viewport width: Get the browser viewport dimensions with JavaScript

How to move div upward while scrolling downward

I am creating a small html file for myself just to try some new things. so far, I have a header, a background, and a center area for content. it is in the center and the position is set as fixed.
I want to make it so when someone scrolls down, the center area will move up. So there wont be large white-space at the top. Also, when they scroll up, so the center is near the top, it wont go over the header.
I"m sure this can be done with JavaScript. But, I'm not too sure how.
I'm sorry if this is unclear.

I recommend using jquery to accomplish this.
You can bind an event listener to the scroll event, the handler is passed an event object with all the information you need to achieve your desired result (scrolltop, pageX, pageY, etc....)
Once you have captured the scroll event, you can tell where the user scrolled to (how far down), and position your div accordingly.
http://api.jquery.com/scroll/

This could be achieved using javascript or Jquery (Jquery being the easiest of the two).
1.) Use arbitrary pixels to define when the div should move.
function scrolling() {
if ($(body).scrollTop() > 120px)
{
....perform div transition...
}
}
OR
2.) Use the position of the target div to define when the div should move.
function scrolling() {
if ($(body).scrollTop() > $("#TargetDiv").offset().top;)
{
....perform div transition...
}
}
If you use the second solution, be sure that you call Jquery and this script after the DOM is loaded i.e. after </body>. Otherwise it won't be able to define the #TargetDiv.

This can be done without use of jquery or javascript, if you are looking to do what I think you are.
http://jsfiddle.net/wN8c8/
by setting your content to a fixed size and setting the content to overflow:auto;
likewise, you could also set your page background-attachment to fixed, and create the illusion that the text is 'appearing' without the page moving. You can certainly go more in-depth with it using scripting, but it really depends on your intention.
z-index will also allow you to build your page in layers, so that you can determine what shows and what is hidden behind other page elements.
body {
background-color:yellow;
}
#header{
position:fixed;
width: 100%;
height:20px;
background-color:red;
z-index:2;
}
#content{
position:fixed;
width:80%;
height:60%;
background-color:#ddd;
overflow:auto;
margin:0px 10%;
z-index:1;
}
<div id="header"></div>
<div id="content">
This is some content.<br/>
This is some content.<br/>
This is some content.<br/>
</div>