I have 5 images and I want them to float left and stay on one line without images being moved to the next line, I also want a border right of 100% I have successfully done this with display: flex, however flex does't work properly in IE 11
Here is my HTML
<div class="col-md-12 award-logos">
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
</div>
And the CSS
.award-logos { border: 1px solid #ccc; }
.award-logos .wrapper {padding: 10px 30px;margin:5px 0;text-align:center;border-right:1px dotted #000; float: left;}
.wrapper img {max-height:150px; padding;}
https://jsfiddle.net/5sw538t7/
I'm trying to make a simple homepage with clickable images as buttons, no problem, I can do that.
But I'm stuck at this part:
I have these 4 images in dividers with on hover shadow.
Now these images are vertical under each other.
I want them horizontal next to each other.
EDIT: Got it, now I need it to center it horizontal and vertical.
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgBox
{
width: 300px;
height: 600px;
display: inline-block
}
.imgBox:hover
{
display: inline-block
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; }
</style>
</head>
<body background="back.jpg">
<center>
<div align="left">
<div class="imgBox">
<a target="_blank" href="IntensityBanner.png">
<img src="IntensityBanner.png" alt="Trolltunga Norway" width="300" height="600">
</a>
</div>
<div class="imgBox">
<a target="_blank" href="EarningsBanner.png">
<img src="EarningsBanner.png" alt="Forest" width="300" height="600">
</a>
</div>
<div class="imgBox">
<a target="_blank" href="img_lights.jpg">
<img src="DesignBanner.png" alt="Northern Lights" width="300" height="600">
</a>
</div>
<div class="imgBox">
<a target="_blank" href="img_mountains.jpg">
<img src="SpaarGamesBanner.png" alt="Mountains" width="300" height="600">
</a>
</div>
</center>
</div>
</body>
</html>
Live demo: http://twanofzo.nl/test/
First, make sure you close that first imgBox div (line 12) or it'll give you trouble.
Next, to make them display horizontally, you should just be able to either add display: inline-block or float: left to your css for .imgBox
I am trying to render the images, it comes out perfectly in Firefox and Chrome, but is having issues in Safari(v 7.0.3). In Safari, image shifts to bottom right, while I want the image to be at the bottom center.
This is my css
.circular {
/*margin: 10px 30px 0px 30px;*/
display: block;
margin: 0 auto;
position: relative;
bottom:-400px;
left:93%;
transform:translateX(-50%);
}
HTML :
<section class="module parallax parallax-1">
<div class="container">
<div class="circular" vertical-align:middle; text-align:center><img src="images/index/yoyo.png" width=120px height=120px></div>
<div class="social_tags" vertical-align:middle; >
<img src="images/index/github.png" width=40px height=40px>
<img src="images/index/facebook.png" width=40px height=40px>
<a href="mailto:yoyo#gmail.com?Subject=Hello" ><img src="images/index/gmail.png" width=40px height=40px></a>
<img src="images/index/linkedin.png" width=40px height=40px>
</div>
</div>
</section>
You have several issues with your html.
I fixed them in this fiddle and it works the same in chrome as in safari: https://jsfiddle.net/msq0eqch/3/
This is the corrected html code:
(You had your style without style="" etc.)
<section class="module parallax parallax-1">
<div class="container">
<div class="circular" style="vertical-align:middle; text-align:center"><img src="images/index/yoyo.png" width="120px" height="120px"></div>
<div class="social_tags" style="vertical-align:middle;" >
<img src="images/index/github.png" width="40px" height="40px">
<img src="images/index/facebook.png" width="40px" height="40px">
<img src="images/index/linkedin.png" width="40px" height="40px">
</div>
</div>
</section>
Also add -webkit-transform:translateX(-50%); to your css.
This question already has answers here:
Box-shadow trimmed in CSS columns in Chrome
(11 answers)
Closed 7 years ago.
I am using CSS Column count to create a grid. However, I cannot fix a slight issue regarding the box shadow I am using.
It seems that the top row of each column has the top clipped off. This doesn't effect the border, but only box shadow.
heres a fiddle: http://jsfiddle.net/DTcHh/3947/
If you look closely you can see that the top row items have no shadow, and it looks like it has been clipped to the bottom of the column? Scroll to the bottom of the container and you will see the top part of the shadow there.
Any ideas how to fix?
Some back up css:
#builds {
width: 96%;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 2%;
}
.cols {
-moz-column-count:3;
-webkit-column-count:3;
column-count: 3;
}
.item {
height: auto;
width: 99%;
margin-left: 1%;
-webkit-column-break-inside: avoid;
-o-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
border: 4px solid #000;
box-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 1px 2px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}
<div id="builds" class="cols">
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
</div>
</div>
</div>
Padding to the top of the columns container does not work. And if I give the items class a margin of 10, it works on the first element but not the others.
At first I thought I'm not seeing well since I wear glasses, But I think the problem is that you have two box-shadows with both y-offsets are positive. If you want to have a shadow on top of the element, the y-offset should be negative:
box-shadow: 0 -1px 3px rgba(0, 0, 0, 1), 0 1px 2px rgba(0, 0, 0, 1);
Is this what you expect: http://jsfiddle.net/pnrv7byy/2/ ?
I have been looking at this problem myself for quite some time before I noticed box-shadow was the source of inconsistent balancing in Webkit between same size boxes in my layout.
I believe the problem is this: Webkit (and Blink) have a bug with box-shadow and column where box-shadow affects layout calculation and messes up the column flow.
Currently it appears that Safari 9 and Blink 46 Versions (perhaps earlier versions) have fixed part of column flow issues in terms of the overall column heights calculation. However unlike IE, Edge and Firefox, Safari 9 and Chrome still count the box-shadow as an extra gap. And Chrome in particular cuts off the box-shadow, also apparently ignoring break-inside...
Here is my alternative to Nadeemmnn's solution:
http://jsfiddle.net/hexalys/DTcHh/14980/
The difference is I avoid an extra inside div wrapper for the box-shadow. Instead, I use a margin-bottom roughly equal to the box-shadow dimension +0.5px in this case. And I use margin-top for the top margin with inline-block(s) instead of blocks. Which is what i'd recommend inside columns.
It's hackish, but it seems to work ok for me so far.
PS: I'll go ahead and report those browser bugs if not already filed.
Here are my two solutions
Solution1:
HTML
<div id="builds" class="cols">
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Bassboy,539.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Bassboy,539.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Bassboy,539.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Bassboy,539.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
</div>
</div>
</div>
Demo
here we have removed the box-shadow for item and added for thumbnail i.e from bootstrap
Solution2
Demo2
I am trying to display several <div> tags (with <img /> tags inside them in a grid like fashion, where they are side by side until the end of the parent element, at which point the next <div> would wrap.
I have the code:
<div style="text-align:center; height: auto; ">
<div style="display: table; margin: auto">
<div style="width: 200px; height: 250px; float: left;">
<img src="image1.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image2.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image3.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image4.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image5.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image6.jpg" height="200" width="200" />
</div>
<div style="width: 200px; height: 250px; float: left;">
<img src="image7.jpg" height="200" width="200" />
</div>
</div>
</div>
And the output is almost there. The <div> elements are wrapping as expected, but they do not center as expected.
My question is: what do I need to do to get this 'grid' of <div> elements to be centered, yet still displayed in a grid-like format?
I've seen a few other SO question pertaining to this, but none of them solve my issue - or rather they describe slightly different issues.
Floating the divs keeps them from centering... Instead, make your wrapper div text-align: center, and the divs inside as display: inline-block. No need for display:table
Like this: http://jsfiddle.net/ceL79/
See demo: http://jsfiddle.net/3C6kt/
HTML
<div class="center_wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS
.center_wrap {
width:500px;
text-align:center;
}
.box {
width:100px; height:100px;
background:#999;
display:inline-block;
}
You can insert images inside div's then...