Develop Reference

How can I allow multiple buttons to take up all the space within a div while having different text?

I have 9 buttons that have text, within a div. They all have css that makes it so that they all take up 1/9 of the space.
div {
border: 1px solid black;
height:200px;
width:200px;
padding:0px;
}
button {
width:calc(100% / 3);
height:calc(100% / 3);
border-radius:0px;
}
<div>
<button>Hello world!</button><button>Hello world!</button><button>Hello world!</button><br><button>Hello world!</button><button>Hello world!</button><button>Hello world!</button><br><button>Hello world!</button><button>Hello world!</button><button>Hello world!</button>
</div>
When they have the same text, they work perfectly fine and give me the desired result as you see above.
div {
border: 1px solid black;
height:200px;
width:200px;
padding:0px;
}
button {
width:calc(100% / 3);
height:calc(100% / 3);
border-radius:0px;
}
<div>
<button>I am a different button!</button><button>Hello world!</button><button>Hello world!</button><br><button>I'm different too!</button><button>Hello world!</button><button>foo bar foo bar</button><br><button>Hello world!</button><button>Hello world!</button><button>So am I!</button>
</div>
When they have different text it gets all messed up. I also tried using flexbox, but it just made the buttons fill the height but wrap incorrectly.
What I want is a way to have 9 buttons in a rectangular div that are always 1/9 of the div's size, no matter what their text is. Another thing I need is that the buttons can scale to the div, in case someone resizes their screen or I need the div to be differently sized. If your solution uses JS/Jquery, that's okay.
I'm not an expert at css. How can I fix this? Is there a better way of doing this? Thank you.

This works using display: flex and flex-wrap: wrap:
div {
border: 1px solid black;
height:200px;
width:200px;
padding:0px;
display: flex;
flex-wrap: wrap;
}
button {
width: 33.333%;
height: 33.333%;
border-radius:0px;
}
<div>
<button>I am a different button!</button><button>Hello world!</button><button>Hello world!</button><br><button>I'm different too!</button><button>Hello world!</button><button>foo bar foo bar</button><br><button>Hello world!</button><button>Hello world!</button><button>So am I!</button>
</div>

First sibling div treated as a background of second dynamic div

HTML Markup,
<div class="bluredBackground"></div>
<div class="content">
Hi This is dynamic content.<br>
If the div height increases then first div height <br>
should be automatically increase.
</div>
I want first div height should automatically increase whenever the second div height increases because of its dynamic content.
As of now, I was able to place one div on top of another,
.content {
width: 70%;
height: auto;
border:1px solid;
position: absolute;
z-index:10;
background-color: white;
}
.bluredBackground {
width:70%;
height:70%;
background-color: red;
z-index:0;
border:1px solid;
position:absolute;
-webkit-filter: blur(2px);
}
How can I solve this problem with CSS?
I was trying this thing > http://jsfiddle.net/hsinghbisht/nLj5dqay/2/
Please help!
Thanks in advance.

This is not a direct answer to question, but what exactly are you planning with the 2nd div (blurred) being on the same height as 1st one?
If you want the fancy red blurred glare behind, then just use box-shadow. Add it to the .content and it will work pretty identical
box-shadow: 0px 0px 4px 0px red;
However, if you definitely need to use the red blurred div, then you cannot solve that with plain CSS. You must use JavaScript and look for class style of one element and copy it to the next one.
Example:
window.onload = () =>
{
const div1 = document.querySelector('.bluredBackground');
const div2 = document.querySelector('.content');
div1.style.height = `${div2.offsetHeight}px`;
}

highlighting characters in text depending on position of page

I have a text on my website that scrolls horizontal through the page. I’m trying to get around 8 characters highlighted in black, while the rest is grey. But those characters are meant to vary as you scroll though, the highlighted bit should remain in place.
In case this doesn’t make any sense, if grey was an x, it should look something like this:
xxxxx xpsum dolox xxx xxxx
xxxx xxsum dolox sxx xxxx
xxx xxxum dolox six xxxx x
xx xxxxm dolox sit xxxx xx
I’m trying to get this done in jQuery, but I can’t get it to work. I also like to say that I’m not at all an expert in webdesign, so I don’t know what I’m doing. Anyway, I’ve tried two different approaches, one is to say “change colour of text when going over an underlying div”. The other approach is to change the colour of the text depending on the scrolling position, but the problem here is that it takes the scrolling position of the whole div, instead of a fixed position on the page. Both don’t work at the moment, examples are here:
jsfiddle 9p29tz2f
jsfiddle 9p29tz2f/1
If anyone has any ideas how to approach this, or needs some more clarification, please let me know. Many thanks!

Clone the text and set it as a child of the overlay box then scroll them together:
$(function(){
var $bodytext = $('#bodytext'),
$clone = $bodytext.clone();
//copy the text and append it to #black:
$clone.attr("id","clone").prependTo("#black");
//scroll #clone with #bodytext:
$bodytext.scroll(function(){
$clone.scrollLeft($bodytext.scrollLeft());
});
});
http://jsfiddle.net/9p29tz2f/2/

I've taken Teemu's solution and modified it a bit: http://jsfiddle.net/9af91wcL/2/
The important bits: The code moves a white DIV (#grey-overlay) on top of the text and makes it transparent. By adding black and white pixels, you get grey. The grey level is determined by the alpha channel (0.7 in the rgba() function).
You need to assign a height or it will look odd. I use 1.5em to make sure it doesn't overlap with the scroll bar of the #bodytext div.
Also make sure that the top/left position of both div's is the same.
In your real code, you can make the horizontal scrollbar disappear and scroll with JavaScript.
HTML
<div id="grey-overlay"></div>
<div id="bodytext">text...</div>
CSS
body {
background: #ffffff;
color: #000000;
font-family: sans-serif;
font-size: 200%;
}
#bodytext {
top: 15%;
width:200px;
height: 2em;
padding: 0;
position:absolute;
overflow-x:scroll;
overflow-y:hidden;
white-space: nowrap;
}
#grey-overlay {
background-color: rgba(255, 255, 255, 0.7);
width:40px;
height: 1.5em;
top:15%;
position:fixed;
z-index: 10;
}

You need to show the same content within #black as in #bodytext, and synchronize its position relative to #bodytext scrolling. This can be achieved by using an extra wrapper around #black. Something like this:
CSS:
#cover {
top: 15%;
height:50%;
width: 120px;
padding: 0;
position:fixed;
overflow-x: hidden;
background-color: #D8D8D8;
}
#black {
color: #000000;
width:100%;
height:100%;
top:0px;
left: 0px;
position:absolute;
white-space: nowrap;
z-index: 10;
}
#bodytext {
top: 15%;
width:100%;
height:85%;
padding: 0;
position:absolute;
overflow-x:scroll;
white-space: nowrap;
color: #D8D8D8;
}
HTML:
<div id="cover">
<div id="black"></div>
</div>
JS:
$(document).ready(function () {
var black = $('#black'),
btext = $('#bodytext');
black.text(btext.text()); // Clone the content
btext.scroll(function () {
var pos = btext.scrollLeft();
black.css('left', -pos + 'px'); // Set the position to match #bodytext
});
});
A live demo at jsFiddle.
Notice, that if you need some left margin, it has also to be "calculated in" to pos.

How to align text in bottom of label

I've got problems to get text in the label to the bottom of the label.
I'm animating a falling text, the label does "seem" to fall as it should, but the text stays on top, it's not following the label downwards. Please check this jsfiddle out, press the button to see the problem. I have tried many different ways without coming up with a working solution.
http://jsfiddle.net/kaze72/jQ6Ua/
.uppgifter
{
vertical-align: text-bottom;
}
Seems not to help!

You can try
.uppgifter
{
display: table-cell;
vertical-align: bottom;
background-color: yellow;
}
jsFiddle
Updated jsFiddle so that .uppgifter's height in animate method matches #spelplan's height.

.uppgifter
{
padding: 580px 0 1px 230px;
}

You could just animate the padding-top:
$("#the_button").click(function () {
$(".uppgifter").animate({
'padding-top':"500px"
}, 4000, "linear", function() {});
});

try this:
$(document).ready(function() {
$("#the_button").click(function () {
$(".uppgifter").animate({
"height":"100px","padding-top":"500px"},
4000, "linear", function() {});
});
});
or just a suggestion, take a look at this :):
$(document).ready(function() {
$("#the_button").click(function () {
$(".uppgifter").animate({
"top":"500px"}, 4000, "linear", function() {});
});
});
combined with
.uppgifter
{
vertical-align: text-bottom;
position:relative;
background-color: yellow;
}

*
{
font-family: cursive;
}
.panel
{
position:relative;
border: 1px solid;
}
#spelplan
{
height: 600px;
}
.uppgifter
{
position:absolute;
vertical-align: text-bottom;
bottom:0;
background-color: yellow;
}

I simply added two transparent divs set with a 90% height that force the text down as the label height changes.
http://jsfiddle.net/jQ6Ua/15/
#div
{
height:90%;
width:200%
}

To vertically align a text in a container, multiple techniques can be used. However, most of them have additional script calculation at runtime (if the height of the text container is changing) which can mess with the business logic.
A hack can be used in your particular situation.
You can add an image container with empty src inside your text container with 100% height and 0 width set by css.
<label id="uppgift" class="uppgifter" style="display:inline-block;"><img scr=""/>Abc</label>
<label id="uppgift2" class="uppgifter" style="display:inline-block;"><img scr=""/>123</label>
//and css
.uppgifter img{
height:100%;
width:0;
}
Example
This way you would not have to write logic for additional added layers.

How to force wrapper div to keep its optimal width according to its children

I have a problem here in Chrome (maybe in other browsers too).
I have a wrapper div which floats to the left. It contains some child div and these divs float to the left too and they have different widths according to their contents. I defined a max-width property for the wrapper div and as you can see in the fiddle code when the wrapper reaches this max-width, the last child in the wrapper moves to the next line but the wrapper keeps the maximum width and there are a lot of empty space on the right.
I'd assume the wrapper's size should be recalculated and should have a smaller width because it floats.
I'd like it, because in my real code the wrapper has "sexy" css but it looks rude with empty spaces.
Sorry for my English, I hope you'll understand my problem. Has anyone an idea how I can resolve this problem without any JS (or just a little bit of JS)?
Thanks!
http://jsfiddle.net/Xd9PV/1/
<div class="wrapper">
<div class="float float-1">apple</div>
<div class="float float-2">banana</div>
<div class="float float-3">orange</div>
<div class="float float-4">some very delicious strawberries</div>
</div>​
.wrapper {
border: 1px solid red;
float: left;
max-width: 300px;
}
.float {
border: 1px solid blue;
float: left;
}

It’s not possible using CSS. When you set a max-width, it won’t recalculate it’s width after x floats have dropped to other lines because of the overflow.
You can use javascript/jQuery to calculate this for you instead that inserts a break where needed, f.ex:
var width = 0,
maxWidth = 300, w;
$('.wrapper .float').each(function() {
width += ( w = $(this).outerWidth() );
if ( width > maxWidth ) {
$(this).before('<div style="clear:left"></div>');
width = w;
}
});​
Demo: http://jsfiddle.net/2mfbY/

Add a clear:both to the last div element like this:
.float {
border: 1px solid blue;
float: left;
margin-right: 5px;
}
.float:last-child {
clear:both;
}
Works for me.

You can try using ellipsis (But I am not sure whether it seems OK to you or not)
.float {
border: 1px solid blue;
float: left; padding:0 2px;
margin-right: 5px; max-width:90px;
text-overflow:ellipsis ;
white-space:nowrap; overflow:hidden
}
​
DEMO