I'm trying to use only CSS to adapt a container width to its child element content (the content is dynamic and load from the backend) but then adjusting this width to always a multiple of 8px. Is that possible only using CSS? (No JavaScript)
Thanks!
Edit: I'm trying to use the padding as a way to increase the width of the element and keeping the width:fit-content tag. The thing is, how can I get the current width of the element in CSS to create a formula that increases the padding to a multiple of 8? Can you come up with another solution? Thanks again. Example:
HTML
<div class="banner">This is a banner!</div>
CSS
.banner {
width: fit-content;
padding: calc() /* Not sure what to do here */
border: solid black 1px;
padding: 6px;
text-align: left;
box-sizing: border-box;
}
George if you have a codepen URL to attach it would be really helpful, and a photo of the expected result.
.container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
this would work with reference to its parent container https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content
Related
The following code generates a masonry layout:
<ngx-masonry class="masonry" [options]="myOptions">
<div ngxMasonryItem class="masonryItem" *ngFor="let post of posts;index as idx" (click)="showPostDetail(post)" >
<div class="crop">{{post.description}}</div>
<img [src]="imgConstructor(post.img)">
</div>
</ngx-masonry>
Now the css code:
.masonryItem {
padding: 7px;
margin-top: 5px;
background-color: darkgoldenrod;
border: 0.4px solid black;
width: 20%;
}
.masonryItem img {
object-fit: cover;
max-width: 100%;
min-width: 100%;
}
So five images are displayed in a row since the width of each item is 20%. But now I want to include a margin-property in my css code in the masonryItem class
.masonryItem {
margin: 1rem
}
But then there would be only 4 images in a row and some space on the right on the masonry-grid. So how to bring in the margin-property in my width-calculation such that five images are displayed in each row?
MY SOLUTION:
Add a border property with 1rem:
.masonryItem{
border: 1rem solid white;
}
It looks like margin 1rem if the background-color and border-color is the same. Then the amount of images per row is identically.
If you are using this library: https://github.com/wynfred/ngx-masonry, there is a gutter property that should permit to change the distance between items.
For this kind of display, you should probably use a "display: flex" with a "gap" property for the spaces between element.
I am having a bit of trouble getting my li elements to stay within the parent container. They continue to go off the right side of the page for some reason.
Overflow: Auto seems to fix the problem, but the issue with that is that it cuts off the border and doesn't allow me to scale the li elements properly (I want to have them be about 30% width of the parent container eventually).
Can anyone explain why this is happening or suggest an alternative solution?
Here is my code:
https://repl.it/KZXi/0
https://repl.it/KZXi/2
The problem is the by the default the box-sizing property excludes the padding, that is why your li element contain more than 100% of its parent please read https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
To solve just add..
.answerBox {
border: 2px solid black;
background-color: white;
padding: 40px;
width: 100%;
height: 130px;
box-sizing: border-box;
/*margin-left: 20px;
margin-bottom: 30px;*/
}
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
You can change the box-sizing on your list elements to include padding.
box-sizing:border-box
At the moment your list elements are 100% width + padding-left:40px and padding-right:40px so they overflow the parent container.
Try this CSS to your li:
li.answerBox {
border: 2px solid black;
background-color: white;
padding: 4%; /* <---- */
width: 91%; /* <---- */
height: 70px;
The problem is, when you give padding and border, the content overflows.
I want to style only the content area of a div having a padding to visualize its content boundary like the inner box in the dev-tools is colored by the web browser. I've tried many things but either the css recommendations are not yet implemented like or maybe I use it in the wrong way.
<div class="around">
<div class="div-with-padding outline-content">
stuff ...
</div>
</div>
.around { margin: 50px auto; width: 400px; padding: 0px; }
.div-with-padding { min-height: 200px; padding: 15px; }
I've added an outline to the div just for comparison. The position: relative below is needed because its child's max-height/width only fits to the matched div if its position is relative.
.outline-content {
outline: 1px solid red;
position: relative; /* in the original post I've used bootstrap instead */
}
I've found no way to do this within the original div so I've added a pseudo-element.
First try:
.outline-content::before {
content: '';
position: absolute;
width: max-content; height: max-content;
outline: 1px dotted blue;
}
I don't really understand how max-content works. I've tried also others mdn. Maybe it doesn't work because I've set position: absolute; to don't change the page itself.
Second try:
.outline-content::before {
content: '';
position: absolute;
width: calc(100% - 30px); height: calc(100% - 30px);
outline: 1px dotted blue;
}
The question is how to get parent's padding = 30px if it isn't always the same. I've tried much more but without success.
I know with jQuery this problem becomes easy. If anybody knows an answer using only css … I really like to know it. Please also correct mistakes in my code snippets (width: max-content; and the like).
Thanks!
(this post includes some adaptions to the comments)
The magic css-property is called "background-clip".
HTML
<div class="outer">
outer-content
<div class="inner">
inner-content
</div>
</div>
CSS
.outer {
display:inline-block;
background-color: red;
border: 1px solid black;
padding: 10px;
}
.inner {
width: 100px;
height: 100px;
padding: 10px;
background-clip: content-box;
-moz-background-clip: content-box;
background-color: green;
border: 1px solid black;
}
Example: http://jsfiddle.net/u2vyqdc6/2/
As you can see:
One surrounding div with some content and some padding so you can see better what's going on.
Inside is another div with content, padding and "background-clip: content-box".
"background-clip" works just like "(-moz-)border-box". It tells the browser how to handle the background-specific box-model.
And the best thing?
Browser-support is almost universal at 95%:
http://caniuse.com/#feat=background-img-opts
I have an error with my HTML/CSS that I would like to solve.
I have multiple links setup as divs. Their width is 10%. As so, all 10 Divs fit inside the parent div. I would like the links (10 divs) to have a border to distinguish them apart. If I try to add a border at all, the last div jumps out of the parent div. Is there a way to fix this? I tried using overflow:auto, didn't work. Mostly what Im looking to find is a way to make a border that goes inside the div, if that's possible that is.
body {
background-color: #574B59;
}
.header {
height: 87px;
width: auto;
border: 4px solid black;
margin: 20px;
background-color: white;
text-align:center;
font-size: 20px;
}
.links {
height: 25px;
width: auto;
border: 3px solid black;
margin: auto;
}
.body{
}
.subheader{
}
.linkss {
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
Look at .Linkss
Either reduce the width of each div by the border-width (multiplied by 2) or you can apply a fake border by using the box-shadow property with a blur of 1px.
box-shadow: 0px 0px 1px #000000;
The reason is 10% plus even a 1px border is larger than 10% thus, too large for 10 to fit. An easy solution it to make a border on something inside the div, and make that fill the whole parent. But please post some code so we may provide a more better solution.
Add this to the CSS for the divs:
.linkss {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
Or you can set the width to calc(10% - 2px).
.linkss {
-moz-box-sizing: border-box;
box-sizing: border-box;
/* plus all your other properties here*/
}
One solution is to set a negative margin of 1 pixel on your linkss see example below
.linkss {
margin: 0 -1px 0 -1px;
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
I have done this before but sometimes depending you on your layout or design this may need a little tweaking, let me know if this helped. Happy fridays!
One fix for layout issues like this is to apply the border to an element within the div, in your case, the <a> element.
.column_div{width:10%; float:left;}
.column_div a{display:block; border:2px solid #f00;}
Tested in FireFox.
The other solution would be to reduce your 10% width and apply the border as a percentage width; but trying to get it the same on the top & bottom would then become a headache.
I have the following CSS:
#imageContainer {
width: 100%;
margin: 0px;
margin-bottom: 10px;
}
.divSelectImage {
border: 2px solid red;
width: 25%;
margin: 0px;
margin-bottom: 10px;
float: left;
}
I have four instances of .divSelectImage which is why the width is 25%. I expect to see all four images side by side inside #imageContainer. So essentially, the four images should take up 100% of the #imageContainer which in turn takes up 100% of the screen.
But I don't. Despite checking firebug, at 25% each, the last image goes to the next line. I have to make them to about 24.5% for them to fit, but I don't want the white space at the end.
This occurs in both Firefox and Google Chrome.
Is there some kind of CSS wizardry that I am missing? How can I accomplish this?
I have set up the scenario on JSFiddle: http://jsfiddle.net/J3KXE/
Its because you haven't accounted for the 2px of border on each image, adding 12px in addition to the 100% width of its containing block. You can use the box-sizing property thats new to CSS to constrain the border and padding areas to the elements' content width:
#imageContainer {
width: 100%;
margin: 0px;
margin-bottom: 10px;
}
.divSelectImage {
border: 2px solid red;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 25%;
margin: 0px;
margin-bottom: 10px;
float: left;
}
http://jsfiddle.net/J3KXE/1/
2 solutions :
box-sizing: border-box;
or
flexbox and all this shit (see http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/)
You have a border of 2px which increases the size of the boxes to 25% plus these 2px on each side. If you don't have to support IE7- you can simply use box-sizing: border-box. If you have to take older browser into account you'd have to declare a wrapper div width 25% without any border/margin/padding and add those styles to the child element.