I'm trying to figure out why there is extra space added to the right of the thumbnail images. I put a red border around the area to make it easier to see the extra white space. how would I remove it?
Any advice would be greatly appreciated.
jQuery(document).ready(function() {
$('.thumb').click(function() {
$('.main-image img').attr('src', $(this).children('img').attr('src'));
});
});
.pics {
overflow: hidden;
width: 60%;
box-sizing: border-box;
padding-left: 6em;
display:flex;
justify-content:center;
}
.main-image {
width: 100%;
}
.main-image img {
width: 100%
}
.thumb {
position:relative;
width:30%;
height:auto;
margin:1em;
border: 1px solid blue;
}
.selection-image {
display:flex;
flex-direction:column;
border:1px solid red;
}
.selection-image img {
width:100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pics">
<div class="main-image">
<img src="https://images.unsplash.com/photo-1502901047037-d0184a3efead?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e5e38bba3f79d4f86a648d7e9961ca09">
</div>
<div class="selection-image">
<div class="thumb">
<img src="https://images.unsplash.com/photo-1502901047037-d0184a3efead?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e5e38bba3f79d4f86a648d7e9961ca09">
</div>
<div class="thumb">
<img src="https://images.unsplash.com/photo-1511644547841-f467df8071a4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=151cc232aa6e73bab1aa03d23b276046">
</div>
<div class="thumb">
<img src="https://images.unsplash.com/photo-1477868433719-7c5f2731b310?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=5d54dfa7ff8cdf7d4214d468d7c7443b">
</div>
</div>
</div>
You are setting width of the pictures in thumb class to 30% and not centering the images. Set width of thumb class to auto and you can remove margin/padding if you want no white space.
.thumb {
position:relative;
width:auto;
height:auto;
margin:1em;
border: 1px solid blue;
}
Maybe simply move the width:30% to the container instead. Also make the image block to avoid the whitespace under them:
jQuery(document).ready(function() {
$('.thumb').click(function() {
$('.main-image img').attr('src', $(this).children('img').attr('src'));
});
});
.pics {
overflow: hidden;
width: 60%;
box-sizing: border-box;
padding-left: 6em;
display: flex;
justify-content: center;
}
.main-image {
width: 100%;
}
.main-image img {
width: 100%;
}
.thumb {
position: relative;
height: auto;
margin: 1em;
border: 1px solid blue;
}
.thumb img {
display: block;
}
.selection-image {
display: flex;
width: 30%;
flex-direction: column;
border: 1px solid red;
}
.selection-image img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pics">
<div class="main-image">
<img src="https://images.unsplash.com/photo-1502901047037-d0184a3efead?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e5e38bba3f79d4f86a648d7e9961ca09">
</div>
<div class="selection-image">
<div class="thumb">
<img src="https://images.unsplash.com/photo-1502901047037-d0184a3efead?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e5e38bba3f79d4f86a648d7e9961ca09">
</div>
<div class="thumb">
<img src="https://images.unsplash.com/photo-1511644547841-f467df8071a4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=151cc232aa6e73bab1aa03d23b276046">
</div>
<div class="thumb">
<img src="https://images.unsplash.com/photo-1477868433719-7c5f2731b310?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=5d54dfa7ff8cdf7d4214d468d7c7443b">
</div>
</div>
</div>
Related
#myDiv {
display: inline-block;
border:1px solid red;
width:200px;
}
#myImg {
max-height:100%;
max-width:100%;
}
#anotherDiv {
display:inline-block;
border:1px solid blue;
height:100px;
width:50px;
}
<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv">
</div>
</div>
I want to fit the image height to its container div.
Using height:100%; works only when the container have a fixed height.
Simply add display:flex to container to get the stretch alignment by default:
#myDiv {
display: inline-flex;
border:1px solid red;
width:200px;
}
#anotherDiv {
display:inline-block;
border:1px solid blue;
height:100px;
width:50px;
}
<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv">
</div>
</div>
A different result with display:grid:
#myDiv {
display: inline-grid;
grid-auto-flow:column; /* column flow */
justify-content: flex-start; /* align everything to left */
border:1px solid red;
width:200px;
}
#myImg {
height:100%; /* image 100% height of the div */
}
#anotherDiv {
display:inline-block;
border:1px solid blue;
height:100px;
width:50px;
}
<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv">
</div>
</div>
<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv" style="height:50px">
</div>
</div>
Here the another way without using flex: I will recommend that display:flex; will be the good and easy one.
#myDiv {
display: inline-block;
border: 1px solid red;
width: 200px;
position: relative;
padding-left: 22px;
}
#myImg {
position: absolute;
left: 0;
height: 100%;
}
#anotherDiv {
display: inline-block;
border: 1px solid blue;
height: 100px;
width: 50px;
}
<div id="myDiv">
<img src="https://i.imgur.com/rw9ypWD.png" id="myImg" />
<div id="anotherDiv"></div>
</div>
I am attempting to place an iframe and img inline in a div. The code that I have posted puts the img below the iframe. I have tried to position and float the elements but nothing seems to work. I have also checked out other posts on SO, but nothing seems to work. I am willing to start from scratch if required.
I would be grateful if someone could point out my error and show me the corrections to make to get this to work. I have looked at other posts but nothing seems to be working.
Thank you.
#media (min-width: 1200px) {
.container {
max-width: 1080px;
}
}
.hero-unit {
background-color: #000000;
border: 1px solid #252525;
margin-bottom: 30px;
}
.hero-unit img {
display: inline-block;
}
.fp-block {
padding: 5px !important;
padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/
.inner {
float: left;
width: 49%;
margin: 0;
}
.holder {
height: 0px;
width: 100%;
}
<div class="container">
<div class="hero-unit fp-block">
<div id="ut-wrap">
<div class="inner">
<div class="holder">
<iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
</div>
</div>
The problem
The issue is that .inner has a width of 49% which is pushing the image onto a new line. This can be seen if you add a background color and height to .inner.
#media (min-width: 1200px) {
.container {
max-width: 1080px;
}
}
.hero-unit {
background-color: #000000;
border: 1px solid #252525;
margin-bottom: 30px;
}
.hero-unit img {
display: inline-block;
}
.fp-block {
padding: 5px !important;
padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/
.inner {
float: left;
width: 49%;
margin: 0;
background-color: red;
height: 100px;
}
.holder {
height: 0px;
width: 100%;
}
iframe {
opacity: 0.5;
}
<div class="container">
<div class="hero-unit fp-block">
<div id="ut-wrap">
<div class="inner">
<div class="holder">
<iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
</div>
</div>
How to fix
Option 1
Add whitespace: nowrap; to .holder to stop the image from being able to wrap onto the next line
#media (min-width: 1200px) {
.container {
max-width: 1080px;
}
}
.hero-unit {
background-color: #000000;
border: 1px solid #252525;
margin-bottom: 30px;
}
.hero-unit img {
display: inline-block;
}
.fp-block {
padding: 5px !important;
padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/
.inner {
float: left;
width: 49%;
margin: 0;
}
.holder {
height: 0px;
width: 100%;
white-space: nowrap;
}
<div class="container">
<div class="hero-unit fp-block">
<div id="ut-wrap">
<div class="inner">
<div class="holder">
<iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
</div>
</div>
Option 2
Set a larger width on .inner.
#media (min-width: 1200px) {
.container {
max-width: 1080px;
}
}
.hero-unit {
background-color: #000000;
border: 1px solid #252525;
margin-bottom: 30px;
}
.hero-unit img {
display: inline-block;
}
.fp-block {
padding: 5px !important;
padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/
.inner {
float: left;
width: 100%;
margin: 0;
}
.holder {
height: 0px;
width: 100%;
}
<div class="container">
<div class="hero-unit fp-block">
<div id="ut-wrap">
<div class="inner">
<div class="holder">
<iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
</div>
</div>
I've got the following setup http://jsfiddle.net/47x60k4w/529/.
HTML
<div class="header">
header
</div>
<div class="inner_block">
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
</div>
<div class="footer">
footer
</div>
The inner_block should overlap the header class and the footer should be placed right behind the inner_block.
In my solution I just don't get the footer behind the inner_block without doing not responsible stuff like calling a margin-top with x.xem on it. I just found some links with z-index stuff which didn't worked for me because the inner_block lost his passed height and width from the nested block.
The result should look like this beautiful mockup.
Do you have any ideas?
Thanks in advance.
So I made the following changes to your code:
Remove the position: absolute for the inner-block.
As you are floating the contents of the inner-block you have clear the floats so that the parent container will not lose height.
.inner_block:after {
content: '';
display: block;
clear: both;
}
Whenever using floats, remember to clear it.
Added position: relative to the inner_block to position it over the header and footer.
Added display: block to the img so that you can remove the small space below it characteristic on inline elements (the default display).
Also tinkered a bit with the margins and widths to achieve the layout.
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block {
position: relative;
/*width: 100%;*/
border: solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top: -2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
background-color: white;
}
.inner_block:after {
content: '';
display: block;
clear: both;
}
.column {
max-width: 30%;
float: left;
margin-right: 2.5%;
}
.column:first-child{
margin-left: 2.5%;
}
.column:last-child{
margin-left: 0;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
Hope this gives you a head-start. Check it out and let me know your feedback on this. Thanks!
Alternate Solution:
So here is a solution using a flexbox which is easier to set up:
First remove the floating container and the clearfix.
Now Wrap the inner_block with another div
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
Using display: flex allows the images to take the available space along the row and justify-content: center aligns it along the center. Check this out!
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block_wrapper">
<div class=" inner_block ">
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg " />
</div>
</div>
</div>
<div class="footer ">
test
</div>
You can even try something as below, your codes were fine just set your .footer margin-top equal to the height of .header and .inner_block using css calc() function.
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
background-color:red;
width:100%;
height:50px;
margin-top:calc(100% - 82%);
}
.inner_block{
position: absolute;
width:90%;
border:solid 1px black;
padding: 5px;
background-color:white;
margin:-2.5% calc(100% - 97%);
}
.column {
width:30%;
float:left;
margin:0 1.6%;
}
.column img {
max-width:100%;
height:auto;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
is this what you were looking for ?
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
clear:both;
background-color:red;
width:100%;
height:50px;
}
.inner_block{
position: absolute;
width:100%;
border:solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top:-2.5%;
background-color:white;
}
http://jsfiddle.net/8y4e8L08/
.header {
height: 200px;
width:800px;
background-color:#000;
margin:20px;
}
.header {
margin-bottom: -25px;
}
.inner_block {
width: 35%;
height: 150px;
margin: auto 200px;
background-color:#FFF;
border:1px solid #000;
margin-top: -45px;
}
.column{
max-width:20%;
float:left;
border: 2px soid #999;
margin:25px;
}
.column img{
max-width:100%;
height:auto;
}
.footer {
height: 100px;
margin-top: -25px;
margin:20px;
background-color:#F00;
width:800px;
}
.content {
position: relative;
z-index: 1;
}
<div class="header"></div>
<div class="inner_block">
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
</div>
<div class="footer">
</div>
Well just using the z-index won't always work. You also need to specify the 'position' property as well so as to define the z-index wrt some position of the frame.
Z-index is a property which defines the 'depth' or 'height' of an element. If your <header> has z-index of '100' and; <div> element defined inside the header, usually it would be shown above it but once you define the z-index:50; since 50<100, <div> element would be hidden behind it.
Example of z-index
1) http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
2) https://css-tricks.com/almanac/properties/z/z-index/
Hope it helps.
need some help. How to fix bug with .half-img2{ margin-top: 10px; }
http://prntscr.com/94uqok
These 2 imgs height must be equal to main-img
http://plnkr.co/edit/Dvj5HfG6hJqvYPxr0ljJ?p=preview
Html:
<style type="text/css">
.test{
display: flex;
}
.test>div{
flex: 1;
}
.test .main-img{
flex-grow: 2;
}
img{
width: 100%;
}
.half-img{
margin-left: 10px;
}
.half-img2{
margin-top: 10px;
}
</style>
<div class="test">
<div class="main-img">
<img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
</div>
<div class="half-img">
<div class="half-img1">
<img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
</div>
<div class="half-img2">
<img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
</div>
</div>
</div>
I'll ignore the images sizes as these are not really relevant to the div layout issue.
A judicious use of margins and flex-column div layout seems to be required.
Layout would be something like this.
* {
box-sizing: border-box;
}
.test {
display: flex;
width: 80%;
margin: 1em auto;
border:1px solid green;
}
img {
display: block;
}
.test div {
}
.main-img {
flex:2;
margin-right: 10px;
background: lightblue;
}
.half-img {
display: flex;
flex-direction: column;
height: 250px;
}
.half-img {
flex:1;
display: flex;
flex-direction: column;
}
.half-img div {
flex:1;
background: lightblue;
}
.half-img1 {
margin-bottom: 5px;
}
.half-img2 {
margin-top: 5px;
}
<div class="test">
<div class="main-img">
</div>
<div class="half-img">
<div class="half-img1">
</div>
<div class="half-img2">
</div>
</div>
</div>
Help me please, I can't understand result of my simply code:
<div id="wrapper-top">
<div class="wrapper">
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">text</div>
<div class="block-3-1">text</div>
<div class="block-3-2">text</div>
<div class="block-3-3">text</div>
</div>
</div>
</div>
and css file:
#wrapper-top
{
width: 100%;
background-color: gray;
}
.wrapper
{
margin: 0 150px 0 150px;
}
#logo
{
width: 100%;
height: 50px;
}
#menu
{
width: 100%;
height: 50px;
background-color: navajowhite;
}
#content
{
width: 100%;
background-color: white;
}
.block-1-1
{
width: 100%;
text-align:center;
background-color: pink;
}
.block-3-1
{
float:left;
width:33%;
text-align:center;
background-color: violet;
}
.block-3-2
{
float:left;
width:34%;
text-align:center;
background-color: blueviolet;
}
.block-3-3
{
float:left;
width:33%;
text-align:center;
background-color: yellowgreen;
}
Why divs .block-3-1, .block-3-2 and .block-3-3 seem to be outside of div .wrapper.
I don't expected that because I want this blocks inside .wrapper.
http://jsfiddle.net/4yvLv853/1/
You need to contain the floated items in the #content div
One method (there are others as detailed here) is to use overflow:hidden
#content
{
width: 100%;
background-color: white;
overflow: hidden;
}
JSfiddle Demo
use clearfix
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
#wrapper-top
{
width: 100%;
background-color: gray;
border: solid blue 1px;
}
.wrapper
{
margin: 0 150px 0 150px;
border: solid brown 1px;
}
#logo
{
width: 100%;
background-color: white;
}
#menu
{
width: 100%;
background-color: navajowhite;
}
#content
{
width: 100%;
background-color: white;
}
.block-1-1
{
width: 100%;
text-align:center;
background-color: pink;
}
.block-3-1
{
float:left;
width:33%;
text-align:center;
background-color: violet;
}
.block-3-2
{
float:left;
width:34%;
text-align:center;
background-color: blueviolet;
}
.block-3-3
{
float:left;
width:33%;
text-align:center;
background-color: yellowgreen;
}
<div id="wrapper-top">
<div class="wrapper clearfix">
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">block-1-1</div>
<div class="block-3-1">block-3-1</div>
<div class="block-3-2">block-3-2</div>
<div class="block-3-3">block-3-3</div>
</div>
</div>
</div>
Try
<div id="wrapper-top">
<div class="wrapper" style="height: 400px"> //You can add this in CSS if you want.
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">text</div>
<div class="block-3-1">text</div>
<div class="block-3-2">text</div>
<div class="block-3-3">text</div>
</div>
</div>
</div>
I think the wrapper height is too small.
Alternatively, if you want the .wrapper div to stay the height it is, try changing the #content to
#content {
overflow-y: scroll;
overflow-x: hidden; //this gets rid of the pesky bottom scrollbar
}