Position Image outside of fluid centered div

Position Image outside of fluid centered div - css

I have a problem trying to position an image to the right of a centered div. This code works in Chrome and Safari but not IE8 or Firefox. The Chrome version is what I'm going for, not the IE version as shown in the picture. Thanks!
#page {
width: 90%;
max-width: 1400px;
min-width: 600px;
margin: 0 auto;
overflow: hidden;
background:
white;
}
<div style="width: 90%; max-width: 1400px; min-width: 600px; margin: 0 auto;">
<div style="float: right; position: relative; z-index: 200; bottom: 4px; left: 20px;">
<img src="images/clearance-tab-vert.png">
</div>
</div>
<div id="page">
blah
</div>

see this fiddle: http://jsfiddle.net/QLBjX/2/
#page {
width: 90%;
max-width: 1400px;
min-width: 600px;
margin: 0 auto;
overflow: hidden;
background:
white;
}
<div id="page">
blah
<div style="float:right; background:black; width:100px; height:100px";>
<img src="images/clearance-tab-vert.png" width="100" height="100">
</div>
</div>

Related

Can you explain me the CSS in the below code

Could you please explain me the CSS in this code, I mean how horizontal scrolling output came?
body {
margin: 0;
}
<div style="max-width: 200vw; height: 100vh; overflow-x: scroll">
<div class="parent" style="width: 200vw; height: 100vw">
<div class="child" style="float: left; width: 100vw; height: 100vh">Hi</div>
<div class="child" style="float: right; width: 100vw; height: 100vh">
Hi
</div>
</div>
</div>

As you can see in the below snippet, I have 2 div's.
A parent and a child.
Parent has width 200px, while child has 300px, so obviously the child will overflow. So in order to avoid overflowing, we have provided overflow-x: scroll
.parent {
max-width: 200px;
overflow-x: scroll;
padding: 10px;
border: 1px solid #ddd;
}
.child {
width: 300px;
padding: 10px;
background-color: blue;
}
<div class='parent'>
<div class='child'>
</div>
</div>

CSS - Equal size images

How can I make all the images the same size while having them still be responsive?
Here's the fiddle:
https://jsfiddle.net/2ko9g725/2/
This is all the css:
.ui.text.menu {
background-color: #eee;
margin-top: 0;
}
.ui.message {
padding: 50px 50px;
margin-bottom: 20px !important;
}
.ui.grid.stackable.container {
display: flex;
flex-wrap: wrap;
}

Check this Demo. It may help you
CSS
img.ui.image{
max-width: 100%;
height: auto;
max-height: 100px;
margin: auto;
display: block;
}
.ui.segment {
width: 100%;
}

Check this fiddle. You can put a wrapper div inside your ui segments for your image to sit in, then give that wrapper a height and width then add object-fit: cover to the img element in css with a width and height of 100%.
body {
margin: 0;
display: flex;
}
.segment {
width: 30%;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
.seg-img {
height: 80%;
width: 100%;
}
img {
object-fit: cover;
height: 100%;
width: 100%;
}
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1464061884326-64f6ebd57f83?auto=format&fit=crop&w=1500&q=80">
</div>
<p>TEST</p>
</div>
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1440658172029-9d9e5cdc127c?auto=format&fit=crop&w=1652&q=80">
</div>
<p>TEST</p>
</div>
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1474015833661-686ed67f9485?auto=format&fit=crop&w=1500&q=80">
</div>
<p>TEST</p>
</div>

i have just updated the fiddle with
images stretch on smaller viewports have been fixed
check this fiddle
i have just changed only in the css
img.ui.image{
overflow: hidden;
width: 100%;
max-width: 50%;
height: auto;
max-height: 100px;
margin: auto;
display: block;
}

Center image in DIV and hide the overflowing

This is kind of an unique case. I am trying to achieve the following:
Square images should be 100% 100%. Basically fill out the entire DIV (which is squared)
All images should fill out the entire height of the DIV.
All images should be aligned center
If they overflow the X-axis, they should overflow and hide
https://jsfiddle.net/cxnyLxfn/2/
.image-container {
position: relative;
width: 300px;
height: 300px;
display: inline-block;
margin: 20px;
border: 1px solid black;
float: left;
overflow: hidden;
}
.image-container img {
height: 100%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
I almost achieved this, except for centering the images no matter what. The Google logo should be centered and the rest look fine as they are. How do I achieve my four requirements?

I usually use a flex approach to this:
.image-container {
display: flex;
width: 300px;
height: 300px;
border: 1px solid black;
overflow: hidden;
position: relative;
align-items: center;
justify-content: center;
}
img {
display: block;
height: 100%;
}
<div class="image-container">
<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" />
</div>
<div class="image-container">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg" />
</div>
<div class="image-container">
<img src="http://www.zevendesign.com/wp-content/uploads/2015/04/google-logo-progress-270x480.jpg" />
</div>
<div class="image-container">
<img src="https://cdn.pixabay.com/photo/2015/10/31/12/56/google-1015752_960_720.png" />
</div>

put css for img
img {
height: 100%;
position: absolute;
left: 50%;
transform: translate(-50%,0);
}

Try this:
img {
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%, -50%);
}

Using object fit property...
fiddle
.image-container {
width: 300px;
height: 300px;
display: inline-block;
margin: 20px;
border: 1px solid black;
float: left;
}
img {
object-fit: contain;
height: 100%;
width: 100%;
}
<div class="image-container">
<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" />
</div>
<div class="image-container">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg" />
</div>
<div class="image-container">
<img src="http://www.zevendesign.com/wp-content/uploads/2015/04/google-logo-progress-270x480.jpg" />
</div>
<div class="image-container">
<img src="https://cdn.pixabay.com/photo/2015/10/31/12/56/google-1015752_960_720.png" />
</div>

The tansform:translate() will do the magic. Here is an working example-
.image-container {
position: relative;
width: 300px;
height: 300px;
display: inline-block;
margin: 20px;
border: 1px solid black;
float: left;
overflow: hidden;
}
img {
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="image-container">
<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" />
</div>
<div class="image-container">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg" />
</div>
<div class="image-container">
<img src="http://www.zevendesign.com/wp-content/uploads/2015/04/google-logo-progress-270x480.jpg" />
</div>
<div class="image-container">
<img src="https://cdn.pixabay.com/photo/2015/10/31/12/56/google-1015752_960_720.png" />
</div>

How to make content div WITH background image (inside wrapper) to stretch 100% height, while having sticky footer?

Yeah I know the topic was explained probably million times, but have a look at this. I cant make #content and/or .content-bg go all the way down and show the pattern down to the bottom:
html, body {
height: 100%;
}
body {
min-width: 500px;
margin: 0px;
padding: 0px;
}
#wrapper {
position: relative;
width: 100%;
min-height: 100%;
height: auto !important;
margin: 0px auto -97px;
}
#header {
width: 100%;
height: 100px;
position: relative;
background-color: #ccc;
}
#content {
min-height: 100%;
}
.content-bg {
background: url("http://www.squidfingers.com/_patterns/files/pattern_136.gif") repeat scroll 0% 0% #F9EDE4;
overflow: hidden;
}
#footer {
background-color: #ccc;
height: 97px;
}
<body>
<div id="wrapper">
<div id="header">
header content
</div>
<div id="content">
<div class="content-bg">
content
</div>
</div>
</div>
<div id="footer">
footer content
</div>
</body>
Any ideas?

float divs with clear & fill width

I have a problem, i want to set 3 floated divs and on the bottom I would like to have a footer. So I got these two solutions, but it does not work. Please check out the image:
Here the problem is that the content is not not cleared, so the footer does not change position:
<div class="container">
<div class="left"><div class="content"><div class="right">
<div style="clear:left;"></div>
</div>
<div class="footer"></div>
.container {
height: auto !important;
min-height: 100%;
}
.left {
float: left;
width: 20%;
max-width: 200px;
}
.center {
float: left;
width: 80%;
max-width: 500px;
}
.right {
width: auto;
}
.content {
height: auto !important;
height: 100%;
min-height: 100%;
}
.footer {
height: 202px;
margin: -202px auto 0;
position: relative;
}
If i clear the content, I get the result that the right div goes to the next line:
thanks!

I played around a little bit. I think your html structure wasn't right for the effect you were trying to create.
Here is a new example:
HTML
<div class="container">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
<div style="clear">
<div class="content">
</div>
<div class="footer">
</div>
</div>
CSS
.container {
height: auto !important;
min-height: 100%;
}
.left {
float: left;
width: 20%;
max-width: 200px;
min-height: 100px;
background: red;
}
.center {
float: left;
width: 80%;
max-width: 500px;
min-height: 100px;
background: blue;
}
.right {
width: auto;
min-height: 100px;
background: green;
}
.content {
height: auto !important;
height: 100%;
min-height: 100px;
width: 80%;
max-width: 500px;
margin: 0 auto;
background: yellow;
}
.footer {
height: 202px;
margin: 0 auto;
position: relative;
background: purple;
}
I rearanged everything in this fiddle:
http://jsfiddle.net/LJQCx/2/
I hope this is what you trying to achiev.

Here is the code hope it will help check the fiddle
<div class="page-wrap">
<div class="container">
<div class="left">
<p>I am Left</p>
</div>
<div class="center">
<p>I am Center</p>
</div>
<div class="right">
<p>I am Right</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
<p>I am Footer</p>
</div>
* { margin: 0;}
html, body { height: 100%;}
.page-wrap {min-height: 100%;/* equal to footer height */margin-bottom: -142px; }
.page-wrap:after { content: ""; display: block;}
.footer, .page-wrap:after { /* .push must be the same height as footer */ height: 142px;}
.site-footer {}
.container{ width:100%;}
.left{ float:left; width:25%;}
.center{float:left; width:50%;}
.right{float:left; width:25%;}