I am trying to center an image (the "Coca" of Coca Cola in my fiddle example) that is within an absolute element .itemDisplay which has no fixed width.
I believe the no fixed width is and issue as it seems to stop the image from centering.
There are alot of answers for centering within a absolute element but I can't find any that are for multiple columns rather than just the left 50%, etc answers. .itemDisplay sits within a div called .parentItem that is 32% of the screen with some padding and margins and there are 3 per row.
All 3 column will have it's own image, but I've only done the first one as an example.
When the div containing the coca image is hovered it currently displays a hidden div with cola with the image centered which works correctly, my only issue is centering the coca image.
I have tried all answers and can't seem to get it to work.
Any ideas!?
https://jsfiddle.net/se23vvwu/
Your parent elements need to be relative and have the size of it's children. For that, if you can't have a fixed width, you can use width: fit-content;.
Then I applied left: 0; and right: 0; for the absolute element.
Here is the result (you still need to accomodate the hover state):
#shopShelves {
width : 100%;
padding : 15px;
max-width : 100%;
margin : 0 auto;
}
.parentItem {
height : 200px;
background-color : #e7e7e7;
float : left;
margin-left : 1px;
margin-bottom : 1px;
position: relative;
}
.parentItem a {
position: relative;
width: 100%;
height: 100%;
display: inline-block;
}
.parentItem:hover .hoveredItem {
opacity : 1;
z-index : 1;
}
.parentItem:hover .itemDisplay {
opacity : 0;
}
.I33 {
width : 33.2%;
}
.displayCenter {
position : relative;
width : 33.2%;
background-color : #F00;
}
.parentItem:hover {
opacity : 1;
}
.itemDisplay {
opacity: 1;
transition: opacity 0s 0.2s;
position: absolute;
display: block;
width: fit-content;
left: 0;
right: 0;
margin: 0 auto;
}
.hoveredItem {
opacity : 0;
margin-bottom : 0;
}
.imgcenter {
display : block;
margin : auto;
max-width : 280px;
float : none;
position : relative;
}
width: fit-content; has some compatibility issues with IE. But I'm pretty sure there are workarounds. Some people use display: table;
More browser specific properties:
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
You might have to do a little more research.
Hope this helps!
Related
This question already has answers here:
Cross browser method to fit a child div to its parent's width
(6 answers)
Closed 7 months ago.
I have a parent div that has the max-width: 100% (full screen width) and I want to make the child div to have the same width, but I don't know why it's not working. I tried child div width: 100% and width: inherit but still it has a margin. Is there a solution? The parent div contains a carousel above this child div.
What I want to remove is this margin: the margin
For the child div I already used (you can see in the html below) bootstrap classes for margins, ms-0 and me-0;
The parent div looks good, the margins are fine, has no margin from the browser.
I tried all the solutions offered here
Cross browser method to fit a child div to its parent's width
but it's not working.
.main {
position : relative;
height : auto;
left : 0px;
right : 0px;
background-color : #eceaed;
max-width : 100%;
}
.middle-box {
position : relative;
height : 250px;
max-width : 100%;
border : 1px solid black;
background-color : rgba(96, 75, 254, 0.8);
}
.middle-box::before {
content : "";
background-image : url("../images/mountains2.jpg");
background-size : cover;
position : absolute;
top : 0px;
right : 0px;
bottom : 0px;
left : 0px;
opacity : 0.3;
}
<div class="container main">
<!--here is a div with a carousel-->
<div class="container middle-box ms-0 me-0">
</div>
</div>
Solution:
.main {
padding : 0;
}
.middle-box {
max-width : 100%;
}
.middle-box::before {
max-width : 100%;
}
If by the margin you mean the space outside the parent div (.container.main), then that may be caused by the browser's default styling. Browsers add some default CSS, including a margin on the body element.
If not, you may need to add padding: 0 to .main, or margin: 0 to .middle-box.
I tried tidying up the code a little and put some comments here as well. I hope it helps!
body {
margin: 0;
}
.main {
/* <div> is block-level, so it will span the width of its parent (body) */
/* position: relative is not needed here; only on the child */
/* left: 0 and right: 0 are redundant */
background-color: #eceaed;
}
.middle-box {
/* <div> is block-level, so it will span the width of its parent (.main) */
/* position: relative is not needed here; only on the child */
position: relative;
height: 250px;
border: 1px solid black;
background-color: rgba(96, 75, 254, 0.8);
}
.middle-box:before {
content: "";
background-image: url("../images/mountains2.jpg");
background-size: cover;
position: absolute;
opacity: 0.3;
/* inset: 0 gives the same result as top: 0, left: 0, right: 0, bottom: 0 */
inset: 0;
}
<div class="container main">
<!--here is a div with a carousel-->
<div class="container middle-box ms-0 me-0">
</div>
</div>
Your css for middle-box uses max-width, which allows the content to expand up to a certain maximum, but will shrink the width to fit the content until that maximum is reached. You want width: 100%; like you tried before.
If middle-box still doesn't reach the edges of the parent main element, then use the margin: 0; and padding: 0; as needed.
I recommend using the element selector in Chrome dev tools. You can select or mouse-over the .main and .middle-box elements and Chrome dev tools will display the margin and padding for each element. Then you know where your issue is coming from. Other browsers have similar functionality.
I want an out put similar to this Image..!
following is what i've tried to do.JSfiddle
P.S: I cannot edit the structure of the content.
Since you can't edit the HTML, you can't use floating properly, which would be the perfect solution.
But then you can use absolute positioning:
div {
width: 500px;
min-height: 100px; /* image height */
position: relative;
text-align: justify;
}
img {
width:100px;
position: absolute;
top: 0;
right: 0;
}
p:first-child {
max-width: 400px; /* wrapper width - image width */
}
Demo
I am trying to get a full width background or image behind floated items within a max-width container. The page will be responsive so I can't fix the height of the .item objects nor be sure how many will be shown on each row.
I'd like to have a background or image running full length of the window aligned to a position in the .item div. I can use a very long div or image offset to the left without any issue but the right side makes the browser scroll which I don't want.
.bg {
background: red;
bottom: 0;
height: 30px;
left: -1000px;
position: absolute;
width: 2000px;
z-index: 0;
}
Fiddle here: http://jsfiddle.net/K8uAh/4/
The red banner is my background, see how it runs off to the right.
Ideally I would do this just using CSS, I know if I have to go the JavaScript route it all gets a bit clunky on the window resize.
You can use the .container. If you don't want the container to extend the entire width you need to remove overflow: hidden; and add it to an additional wrapper div.
body {
width: 100%;
margin: 0;
}
.container {
overflow: hidden;
}
Hi I tried on your fiddle and altered the width and the left attribute to have percentage instead of px as if we are dealing with px then it will be hard to make it responsive.
Code:
.bg {
background: red;
bottom: 0;
height: 30px;
position: absolute;
width: 125%;
left:-16%;
z-index: 0;
}
Fiddle: http://jsfiddle.net/K8uAh/1/
You can use a clear-fix div at the end of .item.
body {
width: 100%
}
.container{
background: red; /* Change your color here */
margin: 0 auto;
width: 100%
overflow: hidden;
}
.item{
background: #999;
float: left;
margin: 10px 5%;
position: relative;
width: 40%;
}
Fiddle
First : your fiddle css is incorrect :
body {
width: 100%;
}
} /*<- extra closing braces here is ruining your layout*/
see what i mean
second : to have a full width bg use:
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
container class should be :
.container {
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
margin: 0 auto;
max-width: 300px;
overflow: hidden;
}
working demo
I have a pop up dialog with a list of items in it. I am trying to give the list of items a max-height relative to the overall height of the screen.
After some fiddling with the styles, it seems to me like it doesn't work when pop up dialog have max-height because it creates a cycle in the computation: The popup dialog's height depends on the height on the list of items, and the list of items max-height's depends on the popup dialog's height.
Please see the attached plunkr for an example: when #popup-container has max-height of 66%, the list of items (popup-content) has no max-height.
http://plnkr.co/edit/esdIMjvOgJ8hRM8mSk2t?p=preview
this seems to do the trick:
Entire CSS page:
/* Styles go here */
* {
box-sizing: border-box;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#popup-container {
position:fixed;
max-height: 66%;
border: 1px solid black;
width: 500px;
bottom: 0;
right: 0;
overflow: auto;
}
.popup-footer , .popup-header {
display: block;
background: #ccc;
height: 20px;
position: fixed;
width: 480px;
}
.popup-footer{
position: fixed;
bottom: 0;
}
The footer is a bit hacky though... i'm not sure yet how to work around that one.
I gave the header/footer a width so it doesnt go over the scrollbar :S
I tried to set a background color for an image by using a css pseudo-element:
<div class="my">
<img src="http://cdn.impressivewebs.com/123rf-jan.jpg"/>
</div>
CSS:
img {
height: 100px;
width: 100px;
}
.my:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgb(0,255,255);
}
div {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
The only way I managed to make it work is by setting opacity:0.99; or any other value which is not 1. I tried playing with the z-index with no success. This happens in Chrome as well as in Firefox.
Setting opacity to one or leaving it to be default causes the pseudo element to hide the image.
Here is the fiddle: http://jsfiddle.net/zfYnu/
You need to position the image as well:
img {
position: relative;
height: 100px;
width: 100px;
}
Updated fiddle
Setting opacity to be less than 1 causes the image to create its own stacking context. This causes the image to stack itself on top of the :before pseudo-element which you have positioned. If you leave opacity as the default value of 1, this doesn't happen which causes the :before pseudo-element to stack on top of the image instead.
See the CSS Color level 3 module for information on opacity and section 9.9 of CSS2.1 for details on stacking contexts.