This question already has answers here:
Is there a way to make a child DIV's width wider than the parent DIV using CSS?
(15 answers)
Closed 7 years ago.
I want to make a child div whose width must wider than the parent div. As I read on some examples, It is written that the child div must have a relative position. I tried lots of combination but didn't help me. Please check below CSS and HTML codes and help me. Normally, I prepared it in jsFiddle but it is hard to understand the problem in there.
I gave an id that called thatDivMustHaveTheSameWidthWithContainer for the div that I want to make the same width with the container.
Css :
.site-container {
background-color: #000;
margin: 0 auto;
max-width: 1600px;
min-width: 1180px;
width: 100%;
position: relative;
}
.container {
display: block;
width: 1180px;
margin: 0 auto;
position: relative;
}
.slider {
display: block;
margin-bottom: 40px;
}
.slider .slider-container {
position: relative;
width: 1180px;
height: 208px;
}
.slider .slider-container .slider-content {
position: absolute;
width: 1060px;
left: 60px;
height: 208px;
overflow: hidden;
}
.slider .slider-container .slider-content .slider-content-wrapper {
width: 1080px;
height: 208px;
}
.slider .slider-container .slider-content .slider-content-wrapper .slider-item {
width: 158px;
height: 206px;
border: 1px solid #333;
float: left;
display: block;
margin-right: 20px;
}
.product-item {
position: relative;
overflow: hidden;
width: 158px;
height: 206px;
border: 1px solid #333;
float: left;
display: block;
margin-right: 20px;
}
.product-item img {
width: 158px;
height: 206px;
}
HTML:
<body>
<div class="site-container">
<div style="min-height: 700px;">
<div class="container">
<div class="slider">
<div class="slider-container">
<div class="slider-content">
<div class="slider-content-wrapper">
<a href="#" class="slider-item product-item">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A" alt="">
</a>
<a href="#" class="slider-item product-item">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">
</a>
<a href="#" class="slider-item product-item">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">
</a>
</div>
</div>
</div>
</div>
<div class="slider" style="background-color: red;" id="thatDivMustHaveTheSameWidthWithContainer">
<div class="slider-container">
<div class="slider-content">
<div class="slider-content-wrapper">
<a href="#" class="slider-item product-item">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A" alt="">
</a>
<a href="#" class="slider-item product-item">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">
</a>
<a href="#" class="slider-item product-item">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">
</a>
</div>
</div>
</div>
</div>
<div class="slider">
<div class="slider-container">
<div class="slider-content">
<div class="slider-content-wrapper">
<a href="#" class="slider-item product-item">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">
</a>
<a href="#" class="slider-item product-item">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A" alt="">
</a>
<a href="#" class="slider-item product-item">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRu0ngHBYiMliunAqW5pJ4f-KuiWapDqBJkb3aIpz33a506cpOg0A">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
actually, i can't understand what you really want to do, but i have created a fiddle for you Check This On JsFiddle and i want it helps you ... let me know if it doesn't :)
.parent {
background-color: orange;
margin:50px;
width: 200px;
position: relative;
min-height: 200px;
}
.child {
position: absolute;
top: 20px;
bottom: 20px;
left: -30px;
right:-30px;
background-color: green;
}
<div class="parent">
<div class="child"></div>
</div>
Related
The angle left icon basically disappears when I set its position to absolute, but it remains otherwise.
Here the angle left icon is not visible due its position property. How can it appear on the screen so that I can position it on the top left part of the image, so as to make an image slider.
This is my html code:
<section>
<div class="team">
<div>
<h1 id="teamtext">Our Team and Contributers</h1>
</div>
<div class="content">
<div class="imageslider">
<img src="assets/photo1.jpg">
<img src="assets/photo2.jpg">
<img src="assets/photo3.jpg">
<img src="assets/photo4.jpg">
<img src="assets/photo5.jpg">
</div>
</div>
<div class="slideleft">
<i class="uil uil-angle-left"></i>
</div>
<div class="slideright">
<i class="uil uil-angle-right"></i>
</div>
</div>
</section>
and this is my CSS code:
.content{
height: 400px;
width: 750px;
overflow: hidden;
}
.imageslider{
height: 100%;
width: 100%;
}
.imageslider img{
width: 100%;
height: 100%;
object-fit: cover;
}
.slideleft{
color: red;
font-size: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.slideright{
color: red;
font-size: 100px;
}
I searched similar questions in the internet but they aren't working.
It appears while having position: absolute;. Please see my codesnippet:
<style type="text/css">.content {
height: 400px;
width: 750px;
overflow: hidden;
border: solid;
}
.imageslider {
height: 100%;
width: 100%;
border: solid;
display: flex;
flex-wrap: wrap;
}
.imageslider img {
width: 50%;
height: calc(400px / 3);
object-fit: cover;
}
.slideleft {
color: red;
font-size: 100px;
position: absolute;
top: 15%;
}
.slideright {
color: red;
font-size: 100px;
}
<section>
<div class="team">
<div>
<h1 id="teamtext">Our Team and Contributers</h1>
</div>
<div class="content">
<div class="imageslider">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
<img src="https://s4.uupload.ir/files/1-6-5_ssnb.jpg">
</div>
</div>
<div class="slideleft">
<i class="uil uil-angle-left">slideleft</i>
</div>
<div class="slideright">
<i class="uil uil-angle-right">slideright</i>
</div>
</div>
</section>
I am working on an image gallery and want have the image's container be completely centered on the page, but the images are left aligned.
This is my desired output:
However, when I try to do a text-align: center on the container(id: gallery) I am getting the images displayed like this:
I tried following suit with a previous stack overflow question: CSS: Center block, but align contents to the left
and wrap the images in another div then align it with display: inline-block; and text-align: left; but the images just seem to align left on the entire page:
What can I do to accomplish my desired output?
HTML
<div id="gallery">
<div id="images">
<div class="container">
<a href="images/gallery/image1.jpg" data-lightbox="mygallery">
<img src="images/gallery/image1.jpg">
<div class="overlay">
<img src="images/magnify.png">
</div>
</a>
</div>
<div class="container">
<a href="images/gallery/image2.jpg" data-lightbox="mygallery">
<img src="images/gallery/image2.jpg">
<div class="overlay">
<img src="images/magnify.png">
</div>
</a>
</div>
</div>
</div>
CSS
#gallery{
text-align: center;
}
#images{
display: inline-block;
text-align: left;
}
img{
width: 300px;
cursor: pointer;
}
.overlay {
position: absolute;
right: 0;
left: 0;
cursor: pointer;
visibility: hidden;
color: transparent;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
transition: all ease-in .3s;
}
.overlay > img{
height: 50%;
width: 50%;
top: 50%;
visibility: hidden;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
.overlay:hover > img{
visibility: visible;
}
.container {
position: relative;
display: inline-block;
margin: 5px;
}
.container:hover .overlay {
visibility: visible;
opacity: .6;
background: black;
color: white;
}
How about styling the image wrapper .images like
.images {
width:80%;
margin:0 auto;
text-align:left;
}
this works
body{
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: center;
align-items: center;
}
section{
height:400px;
width:400px;
background:grey;
}
img {
margin:48px;
}
<section>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
<img src="https://telecomputingarchitects.com/media/logo.png" height="24"/>
</section>
Give your #gallery div a max-width, text-align: center, and margin:auto, then put your header in another div inside the #gallery, but outside the #images. Then put text-align: left on your #images div.
See example below:
#gallery {
text-align: center;
max-width: 420px;
margin: auto;
}
img {
width: 100px;
cursor: pointer;
}
.container {
display: inline-block;
}
#images {
text-align: left
}
<div id="gallery">
<div id="header">
<h1>Header</h1>
</div>
<div id="images">
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=d42">
<img src="http://thecatapi.com/api/images/get?id=d42">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=21o">
<img src="http://thecatapi.com/api/images/get?id=21o">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=49e">
<img src="http://thecatapi.com/api/images/get?id=49e">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=13v">
<img src="http://thecatapi.com/api/images/get?id=13v">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=6e6">
<img src="http://thecatapi.com/api/images/get?id=6e6">
</a>
</div>
<div class="container">
<a href="http://thecatapi.com/api/images/get?id=4bf">
<img src="http://thecatapi.com/api/images/get?id=4bf">
</a>
</div>
</div>
</div>
HTML
<h2>HEADER</h2>
<div class="container">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
CSS
h2 {
text-align: center;
}
.container {
float: left;
}
img {
border: medium solid black;
width: 200px;
height: 350px;
margin: 5% 2%;
}
I have a question about floating 2 divs inside of a position relative div. They should float left, but it does not work. I tryed it a few times by rewriting the CSS in developer tools. I hope someone can help me. I use the MDL (Material Design Lite) responsive framework from Google Inc. The result should look like in the screenshot. Thanks in advance for your help.
Final result
.card-wasserlabor {
min-height: 0;
width: 100%;
min-height: 110px;
height: auto;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.015),0 3px 1px -2px rgba(0,0,0,.15),0 1px 5px 0 rgba(0,0,0,.015);
h4 {
font-size: $card-title;
color: $dark-text;
margin-left: 12px;
margin-top: 3px;
}
.img {
background: $grey;
display: inline-block;
height: 100%;
position: absolute;
width: 117px;
img {
height: 100%;
position: absolute;
width: 100%;
}
.circle-check {
background: rgba($black, 0.4);
height: 56px;
width: 56px;
border-radius: 100%;
position: absolute;
left: calc(50% - 30px);
top: calc(50% - 25px);
&:hover {
background: rgba($red, 1);
}
}
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card card-wasserlabor">
<div class="img">
<img src="../assets/cards/card-img-10.png" alt="sera">
<div class="circle-check">
<i class="material-icons">check</i>
</div>
</div>
<div class="text">
<h4>Mittelamerika</h4>
</div>
<div class="info">
<div class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">info</i>
</div>
</div>
</div>
</div>
I couldn't really run your code, there are too many missing variables to be able to work off of that. So I redid the code. I hope this can help. You just need to manage your widths and float everything left:
Take a look at this jsFiddle.
EDIT: The jsFiddle link was incorrect at first. Reclick this link if code relates to something else entirely.
EDIT 2: Fixed padding error in code. And replaced jsfiddle link.
html:
<div class="header-area">
<div style="padding: 20px; ">
Yellow header
</div>
</div>
<div class="container">
<div class="element" style="background-color: green; ">
<img src="http://placehold.it/150x150" alt="">
<div class="description">
This is the description
</div>
</div>
<div class="element" style="background-color: red; ">
<img src="http://placehold.it/150x150" alt="">
<div class="description">
This is the description
</div>
</div>
<div class="element" style="background-color: orange; ">
<img src="http://placehold.it/150x150" alt="">
<div class="description">
<div class="text">
This is the description
</div>
</div>
</div>
</div>
css:
.header-area{
background-color: yellow;
height: 100px;
width: 100%;
}
.container{
height: 100%;
width: 100%;
float: left;
background-color: lightblue;
}
.element{
float: left;
width: 50%;
height: 150px;
}
img{
float: left;
}
.description{
text-align: center;
}
.text{
padding-top: 50px;
}
I've made some modifications in your code, hope it can help you to completely achieve your goal:
To position your text over the img, you need to relative position their parent, and absolute position the text. Then you can move it over the img.
To easily align the img with the other elements, I think is useful to wrap these elements and give them an inline-block display. Then you can adjust them at the position you want.
.card-wasserlabor {
min-height: 0;
width: 100%;
min-height: 110px;
height: auto;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.015),0 3px 1px -2px rgba(0,0,0,.15),0 1px 5px 0 rgba(0,0,0,.015);
}
h4 {
font-size: $card-title;
color: $dark-text;
}
.img {
background: $grey;
display: inline-block;
height: 100%;
position: relative;
width: 117px;
}
.circle-check {
position: absolute;
top: 0;
left: 0;
background: rgba($black, 0.4);
height: 56px;
width: 56px;
border-radius: 100%;
position: absolute;
left: calc(50% - 30px);
top: calc(50% - 25px);
&:hover {
background: rgba($red, 1);
}
}
.info-wrapper{
display: inline-block;
vertical-align: top;
}
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card card-wasserlabor">
<div class="img">
<img src="http://sweetclipart.com/multisite/sweetclipart/files/ff0000%20Color%20Square%20RGB%20Red.png" alt="sera" width="100px">
<div class="circle-check">
<i class="material-icons">check</i>
</div>
</div>
<div class="info-wrapper">
<div class="text">
<h4>Mittelamerika</h4>
</div>
<div class="info">
<div class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">info</i>
</div>
</div>
</div>
</div>
</div>
I seem to be really missing something about how to line three images horizontally in one block across the screen with CSS. I seem to only be able to line them up in one long line down the page (when I really want them to go across the screen in a horizontal line). Where am I doing wrong with my div? Or maybe I am being led astray in CSS? Any ideas? Thank you so much.
.taco_container {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: auto;
margin-right: auto;
}
<div id="taco_container">
<div class="taco">
<a href="tacogame_choose_1.html">
<img src="images/tacoone.png" style="width:304px;height:228px">
</a>
</div>
<div class="taco">
<a href="tacogame_choose_2.html">
<img src="images/tacotwo.png" style="width:304px;height:228px">
</a>
</div>
<div class="taco">
<a href="tacogame_choose_3.html">
<img src="images/tacothree.png">
</a>
</div>
</div>
your solution may be: demo
i added only class :"img_class" and remove inline style sheet
.taco_container {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: auto;
margin-right: auto;
}
.img_class{width:33%;
float:left;
height:auto;
}
<div id="taco_container">
<div class="taco">
<a href="tacogame_choose_1.html">
<img class="img_class" src="images/tacoone.png">
</a>
</div>
<div class="taco">
<a href ="tacogame_choose_2.html">
<img class="img_class" src="images/tacotwo.png" >
</a>
</div>
<div class="taco">
<a href="tacogame_choose_3.html">
<img class="img_class" src="images/tacothree.png">
</a>
</div>
</div>
You have to display items as inline-block and set text-align: center.
.taco_container {
width: 100%;
}
.taco {
width: 33%;
display: inline-block;
text-align: center;
}
Fiddle: http://jsfiddle.net/2xo1gr6w/
Check here an example also with display:inline : http://jsfiddle.net/y1tuLyzg/
#taco_container {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: auto;
margin-right: auto;
padding:0;
}
#taco_container .taco {
display:inline-block;
width:33%;
height:100px;
}
#taco_container .taco img {
max-width:100%;
margin:0;
padding:0;
}
Almost! You just needed to add display:inline-block; to .taco:
.taco {
display:inline-block;
}
EXAMPLE (excuse the kittens they are an example)
Also taco_container has a width of 300px and each image has a width of 304px, so you would need to increase the width of taco_container accordingly to fit with the images.
.taco_container {
width: 300px; <!-- wrapping div is smaller than the divs you trying to put in it-->
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: auto;
margin-right: auto;
}
<div id="taco_container">
<div class="taco">
<a href="tacogame_choose_1.html">
<img src="images/tacoone.png" style="width:304px;height:228px">
</a>
</div>
<div class="taco">
<a href="tacogame_choose_2.html">
<img src="images/tacotwo.png" style="width:304px;height:228px">
</a>
</div>
<div class="taco">
<a href="tacogame_choose_3.html">
<img src="images/tacothree.png">
</a>
</div>
</div>
Your wrapping div or container is 300px yet you are trying to put 3 divs that are 304px wide into it.
.taco_container {
width: 100%;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: auto;
margin-right: auto;
}
.taco { display: inline-block;
width:30%;}
<div id="taco_container">
<div class="taco">
<a href="tacogame_choose_1.html">
<img src="images/tacoone.png" style="height:228px">
</a>
</div>
<div class="taco">
<a href="tacogame_choose_2.html">
<img src="images/tacotwo.png" style="height:228px">
</a>
</div>
<div class="taco">
<a href="tacogame_choose_3.html">
<img src="images/tacothree.png">
</a>
</div>
</div>
Demo: http://codepen.io/malte/pen/kDlbt
I am using an absolute positioned wrapper to center an image in a thumbnail frame. (Only) On mobile safari, the image won't be displayed. if you inspect the .image-pos container you'll see that the height is properly set to its parent's size. applying a fixed px height to it will make the image show up... Does anyone know how to fix that?
It's working on any Desktop browser...
HTML:
<div class="wrapper">
<div class="thumb-grid">
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
<div class="thumb">
<a href="#" class="image">
<div class="image-pos">
<img src="http://images.weserv.nl/?url=static.living.is/gallery/original/016e551de2f53d58e7f4acd68279e6a1.JPG&il&w=600" />
</div>
</a>
<div class="details">
<h5>Image Title</h5>
</div>
</div>
</div>
</div>
CSS:
.wrapper {
width: 600px;
margin: 30px auto 0
}
.thumb-grid {
text-align: justify;
}
.thumb-grid:after {
content: '';
display: inline-block;
width: 100%;
}
.thumb {
position: relative;
display: inline-block;
width: 31.5%;
height: 0;
padding-top: 29%;
margin-bottom: 6%;
}
.image {
height: 73%;
overflow: hidden;
position: absolute;
text-align: center;
top: 0;
width: 100%;
vertical-align: top;
display: block;
border: 1px solid #eee;
}
.image-pos {
height: 100%;
left: 50%;
margin-left: -300px;
position: absolute;
text-align: center;
width: 600px;
}
.image-pos img {
height: 100%;
max-height: 100%;
min-height: 100%;
max-width: none;
width: auto;
display: inline;
border: 0;
}
.details {
height: 27%;
position: absolute;
top: 73%;
}
.details h5 {
margin: 0;
padding-top: 5px;
}
Demo: http://codepen.io/malte/pen/kDlbt