We Keep Coding

Scrolled content ignoring CSS [duplicate]

This question already has answers here:
Why does the outer <div> here not completely surround the inner <div>?
(2 answers)
Closed 2 years ago.
How can I ensure, that in this example:
.wrapper{
width:300px;
overflow:auto;
}
.content{
background: red;
width:100%
}
<div class="wrapper">
<div class="content">
adsfkasdöfjkalsdjkaölsdfasödfjasdölfkajsdklöfajsdkflöasdfajsdfasdöadjf öklasdakdslfjasdölkfjasdlökfjasdkfajdsflköadsaklödsjaslköfjadslköjasdölfjasdklfj
</div>
</div>
when I scroll to the right, the text also still has a red background. It seems that CSS is taking the width of the displayed content to apply the background color, not the whole scrollable content.

In your code, .content takes 100% width of its parent .wrapper, which is 300px. Remove it.
Setting .content to display: inline-block does the trick:
.wrapper {
width: 300px;
overflow: auto;
}
.content {
display: inline-block;
background: red;
}
<div class="wrapper">
<div class="content"> adsfkasdöfjkalsdjkaölsdfasödfjasdölfkajsdklöfajsdkflöasdfajsdfasdöadjf öklasdakdslfjasdölkfjasdlökfjasdkfajdsflköadsaklödsjaslköfjadslköjasdölfjasdklfj
</div>
</div>

Just apply the background to the wrapper instead of the content:
.wrapper {
width: 300px;
overflow: auto;
background: red;
}
.content {
width: 100%
}
<div class="wrapper">
<div class="content">
adsfkasdöfjkalsdjkaölsdfasödfjasdölfkajsdklöfajsdkflöasdfajsdfasdöadjf öklasdakdslfjasdölkfjasdlökfjasdkfajdsflköadsaklödsjaslköfjadslköjasdölfjasdklfj
</div>
</div>

.child element with class selected should be on top of other .child elements, each .child is inside .parent element with absolute position

Given the html and css below, is it possible to have a .child with class selected appear on top of other .child elements? I'd like if you can give an answer that would not change html structure and css position property of .child and .parent.
Also would be great to not toggle anything on parent, it is better to toggle child classes or styles, for parent it is better to set it once.
.parent {
position: absolute;
}
.child {
position: relative;
}
<div>
<div>
<div class="parent">
<div class="child selected"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
</div>
</div>
Greatly appreciate any input, thank you.

If you really want to stick to this HTML structure you could as example hide all elements (children) and show them only when they are selected.
A better solution would be having the selected class on the parent so then you could just simply give the selected parent a higher z-index.
Here you can find a snippet of how you can toggle the display without touching the HTML
// for demo purpuses
var toggleLayer = function() {
var next = $('.child.selected').removeClass('selected').closest('.parent').next();
var element = next.length ? next : $('.parent:first-child');
element.find('.child').addClass('selected')
}
.parent {
position: absolute;
}
.child {
position: relative;
display: none;
}
.selected {
display: block;
}
/* for demo purpuses */
.child {
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
background: red;
}
button {
position: fixed;
top: 120px;
left: 10px;
}
<div>
<div>
<div class="parent">
<div class="child selected">1</div>
</div>
<div class="parent">
<div class="child">2</div>
</div>
<div class="parent">
<div class="child">3</div>
</div>
<div class="parent">
<div class="child">4</div>
</div>
</div>
</div>
<!--- FOR DEMO PURPUSES --->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onClick="toggleLayer()">Toggle layer</button>

have nested div fill up area within parent div

Been looking all over stack for answers and nothing fits my specific scenario:
I have a parent div and within that I have two child divs aligned horizontally next to each other. I want to pretty much fill up all that extra space in the parent div (shown in purple color). I want to take the div in red and pull it up and down to fill the parent so that column background is all red and similarly, the right div fills up and down and the background for that entire fills up to be blue. Below is my div structure
<div class="container">
<div id="parent" class="btn row-height" style="width:100%; margin:0%; margin-top:5%; padding-top:10%; padding-bottom:10%; border-solid:1px; border-radius:10px; background:#d3d3e5; overflow:hidden" type="submit">
<div class="row">
<div class="col-height col-middle col-xs-4 pull-left card" style="background-color:red">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">TEXT</h3>\
</div>
</div>
<div class="col-height col-middle col-xs-8 pull-right card" style="background-color:blue;">
<div class="col-xs-12 text-center">
<h4>TEXT</h4>
<p>TEXT</p>
</div>
</div>
</div>
</div>
</div>
To make it clearer: I want my final thing to look like this:

I think you might be looking for something like this.
.container {
height:500px;
}
.container #parent {
height:100%;
}
.container #parent .row {
height:100%;
position: relative;
}
.container #parent .row #child-left {
height: 100%;
width:30%;
background-color: blue;
float:left;
}
.container #parent .row #child-right {
height: 100%;
width:70%;
background-color: yellow;
float: right;
}
I am not sure what styles .container, #parent and row have, so I included what could possibly be their styles. But the meat of the of the answer/solution here is the last two blocks of the styles. The idea is that both children of the parent must have 100% height of whatever is containing them.
Check demo here: https://jsfiddle.net/an6t1yj3/
In case you can't, this is the output of the fiddle:

You display: table values.
<style>
#parent {background: purple; overflow: hidden;}
.row {display: table; height: 300px; width: 100%}
.row > div {display: table-cell; text-align: center; vertical-align: middle;}
#child-left {background: red; width: 40%;}
#child-right {background: blue; width: 60%;}
</style>
<div class="container">
<div id="parent">
<div class="row">
<div id="child-left" class="pull-left">left<br>left</div>
<div id="child-right" class="pull-right">right<br>right<br>right</div>
</div>
<div>
<div>
https://jsfiddle.net/mj87kucy/

Div expand to size of certain content

I have a bunch of divs that have a content div inside of them. In the content div are 3 elements, an h1, a p and a span, all left-aligned. What I want to happen is the following:
The content div should be vertically and horizontally centered
The content div should be exactly as wide as the text in the h1 or the text in the span (whichever is longer), if above the max-width these should wrap
The p should be 75% as wide as the content div but not have an impact on the content div's size (effectively being 75% as wide as the h1 or span, whichever is longer)
However I'm running into the following problems:
Problem 1: Having a long p element causes the content div to expand to its max-width no matter the size of the h1 or span. I've tried using absolute positioning to fix this but it disrupts the vertical centering of the div
Problem 2: Having a long h1 element leaves a gap where the word breaks over 2 lines making the content div not appear centered
See the code snippet below to clarify what I'm after and what's going wrong, the borders are just to help visualise what's happening.
Has anyone got an idea of how this is possible? I would like to stick to CSS as these need to be responsive, although if there is a simple JS/jQuery solution it would be considered.
EDIT: To clarify the visual effect I am after here's a run-down of why the examples are good or bad. I've also added the ability to remove borders to demonstrate what I mean by something being visually centred:
1) Good: Content div fits to width of h1, looks centered without the borders as equal space to left and right of h1
2) Good: Content div fits to width of span as it's longer than the h1, looks centered without the borders as equal space to left and right of span
Problem 1:
3) Bad: p is expanding the width of the content div, looks shifted to the left without borders as more space on right than left. If the p did not expand the div and stayed at 75% of the width this would not happen
4) Improvement on 3 but still bad: Potential fix found in various SO questions showing absolute positioning stops the p expanding the content div, but now that it is not part of the flow it messes up the vertical centering
Problem 2:
5) Bad: The problem here is the h1 element, because it is now longer than the max-width it splits into 2 lines. But the extra space between the end of the first line and the max-width of the div is kept so when removing borders it doesn't look centered because there is more space to the right than the left of the h1
6) Fixes 5 but not a solution: Manually breaking the line (using a <br>) achieves the look I need, because the h1 isn't expanded to the max-width so looks centered without the borders. This isn't feasible in the real application though because the divs can vary in width
Alternative JSFiddle Link
function toggleBorders() {
$('h1, p, span').toggleClass('bordered');
$('.content').toggleClass('content-bordered');
}
.box-holder {
display: flex;
flex-flow: row wrap;
}
.box {
flex: 0 0 380px;
display: flex;
align-items: center;
justify-content: center;
height: 350px;
border: 1px solid blue;
}
.content {
max-width: 80%;
position: relative;
}
.content-bordered {
border: 1px solid red;
}
.bordered {
border: 1px solid green;
}
p {
width: 75%;
}
.abs {
position: absolute;
}
button {
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="toggleBorders()">Toggle Borders</button>
<div class="box-holder">
<div class="box">
<div class="content">
<h1>1. Example Title</h1>
<p>Good Example</p>
<span>Example link to the article</span>
</div>
</div>
<div class="box">
<div class="content">
<h1>2. Title</h1>
<p>Min Width Good Example</p>
<span>Example link to the article</span>
</div>
</div>
<div class="box">
<div class="content">
<h1>3. Example Title</h1>
<p>But when the description gets too long then it expands the content div</p>
<span>Example link to the article</span>
</div>
</div>
<div class="box">
<div class="content">
<h1>4. Example Title</h1>
<p class="abs">Setting absolute position avoids expansion but messes up the vertical layout</p>
<span class="abs">Example link to the article</span>
</div>
</div>
<div class="box">
<div class="content">
<h1>5. Also Long Titles Leave White Space</h1>
<p>This doesn't look centered, see 6</p>
<span>Example link to the article</span>
</div>
</div>
<div class="box">
<div class="content">
<h1>6. Also Long Titles<br>Leave White Space</h1>
<p>Manually breaking lines fixes this</p>
<span>Example link to the article</span>
</div>
</div>
</div>

So the answer to both of these questions, it seems, is that you cannot do this without javascript. The reason being that the CSS box model just does not work in this way.
In order to solve just the first problem you need to use absolute positioning like I tried but then use javascript to create a space for the element using a margin on the h1, something like this:
$(document).ready(function() {
function alignDescriptions() {
var pmargin = 10 * 2;
$('.abs').each(function() {
var pheight = $(this).height();
$(this).css('bottom', pmargin);
$(this).siblings('h1').css('margin-bottom', pheight + pmargin);
});
}
});
That solves the vertical centering issue when using absolute so problem 1 is fixed.
To solve the second problem, the following answer provides one solution: https://stackoverflow.com/a/33246364/7542390
I believe simply using this but also using the width of the span as a minimum would probably solve both problems as I would be literally forcing the width to the correct size so having a 75% width p element wouldn't be a problem.
It's a shame that this kind of functionality isn't in the CSS spec.
EDIT: As suspected, an adaption of the second option actually removes the need for absolute positioning of the p element. Here's the jQuery code that worked for my actual case:
$('h1').each(function() {
// references to elements
var hElem = $(this);
var pElem = hElem.siblings('p');
var sElem = hElem.siblings('span');
// store starting values
var sWidth = sElem.width();
var hHeight = hElem.height();
var hWidth = hElem.width();
// reduce width until less than span width
// or until height of h1 changes
for (var testWidth = hWidth - 1; testWidth > 0; testWidth--) {
if (testWidth <= sWidth) {
testWidth = sWidth - 1;
break;
}
hElem.width(testWidth);
if (hElem.height() !== hHeight) break;
}
// set h1 width
hElem.width(++testWidth);
// if h1 still overflows (long word) use that instead
if (hElem[0].scrollWidth > hElem.width()) {
testWidth = hElem[0].scrollWidth;
hElem.width(testWidth);
}
// set p element to 75% width
pElem.width(testWidth * 0.75);
});

Your question is very interesting.I have solved your div expansion of the description by setting the max-width as the same as your min-width. Then it cannot expand.
I can't figure out the problem with the white space and title. It looks centred to me.
Here is what I got:
.box-holder {
display: flex;
flex-flow: row wrap;
}
.box {
flex: 1 0 350px;
display: flex;
align-items: center;
justify-content: center;
height: 350px;
border: 1px solid blue;
}
.content {
min-width: 50%;
max-width: 50%;
border: 1px solid red;
}
h1,
p,
span {
border: 1px solid green;
}
p {
width: 75%;
}
.abs {
position: absolute;
}
<div class="box-holder">
<div class="box">
<div class="content">
<h1>1. Example Title</h1>
<p>Good Example</p>
<span>Link</span>
</div>
</div>
<div class="box">
<div class="content">
<h1>2. Title</h1>
<p>Min Width Good Example</p>
<span>Link</span>
</div>
</div>
<div class="box">
<div class="content">
<h1>3. Example Title</h1>
<p>When the description gets too long then it DOESN'T expand the content div</p>
<span>Link</span>
</div>
</div>
<div class="box">
<div class="content">
<h1>4. Example Title Size</h1>
<p class="abs">Setting absolute position avoids expansion but messes up the vertical layout</p>
<span class="abs">Link</span>
</div>
</div>
<div class="box">
<div class="content">
<h1>5. Also Long Titles Leave White Space</h1>
<p>This does look centered</p>
<span>Link</span>
</div>
</div>
</div>
I hope it helps and this is what you're looking for.
EDIT
Solving 5 with text-align: justify;
.box-holder {
display: flex;
flex-flow: row wrap;
}
.box {
flex: 1 0 350px;
display: flex;
align-items: center;
justify-content: center;
height: 350px;
border: 1px solid blue;
}
.content {
min-width: 50%;
max-width: 50%;
border: 1px solid red;
}
h1,
p,
span {
border: 1px solid green;
}
p {
width: 75%;
}
.abs {
position: absolute;
}
/*NEW CSS:*/
h1 {
text-align: justify;
}
<div class="box-holder">
<div class="box">
<div class="content">
<h1>1. Example Title</h1>
<p>Good Example</p>
<span>Link</span>
</div>
</div>
<div class="box">
<div class="content">
<h1>2. Title</h1>
<p>Min Width Good Example</p>
<span>Link</span>
</div>
</div>
<div class="box">
<div class="content">
<h1>3. Example Title</h1>
<p>When the description gets too long then it DOESN'T expand the content div</p>
<span>Link</span>
</div>
</div>
<div class="box">
<div class="content">
<h1>4. Example Title Size</h1>
<p class="abs">Setting absolute position avoids expansion but messes up the vertical layout</p>
<span class="abs">Link</span>
</div>
</div>
<div class="box">
<div class="content">
<h1>5. Also Long Don't Titles Leave White Space</h1>
<p>This does look centered</p>
<span>Link</span>
</div>
</div>
</div>

How do I center a div in another div?

<div id="container">
<div id="div1">
<div id="div2"></div>
</div>
</div>
I want div 2 to be in the center of div1 no matter what, no matther how much the div2 width changes. Atm the div2 only get centered of the containers width.
How can I do this? Is JS the last way to go?

CSS flexbox does this with the justify-content and align-items attributes.
Style a class named something like bullseye as:
.bullseye {
display: flex;
justify-content: center;
align-items: center;
}
Then add the class to your div1 element:
<div id=container>
<div id=div1 class=bullseye>
<div id=div2>
This box is centered<br>
horizontally and vertically.
</div>
</div>
</div>
Fiddle with it:
https://jsfiddle.net/1rd6tcra/
Documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

You give the outer div a width and the inner one you give margin 0 auto.
#container{
width: 100px;
}
#div1{
margin: 0 auto;
}

check this code below
<div id="container">
<div id="div1" style="width:100%;border:1px solid #F00;">
<div id="div2" style="width:60%;border:1px solid #F0F;">
here is my div2
</div>
</div>
</div>
make sure that your inner div has a certain width and it doesn't matter whatever the width of parent.
the css code is below
#div2{
margin:auto;
}
you can check this fiddle

The modern way to do this is:
#div1 {
position: relative:
}
#div2 {
position: relative;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}