I'm trying to center three div boxes within one large one. A grid is going to be 3 wide and auto height.
.t-box920g {
width: 960px;
height: auto;
background: #121212;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
position: relative;
overflow: auto;
border: 1px dotted #363636;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.i-box {
width: 279px;
height: 209px;
background: #ffffff;
margin-right: auto;
margin-left: auto;
float: left;
display: inline;
text-align: justify;
}
.i-pbox {
width: 276px;
height: 206px;
background: #121212;
border: solid 2px #ffffff;
margin-left: auto;
margin-right: auto;
text-align: justify;
}
#i-imageconstrain {
width: auto;
height: auto;
max-width: 276px;
max-height: 206px;
min-width: 276px;
min-height: 206px;
overflow-x: hidden;
overflow-y: hidden;
}
<div class="t-box920g">
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample1.jpg">
<img id="i-imageconstrain" src="images/gallery/sample1.jpg" border="0" />
</a>
</div>
</div>
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample2.jpg">
<img id="i-imageconstrain" src="images/gallery/sample2.jpg" border="0" />
</a>
</div>
</div>
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample3.jpg">
<img id="i-imageconstrain" src="images/gallery/sample3.jpg" border="0" />
</a>
</div>
</div>
</div>
Everything works as planned EXCEPT for the content of t-box920g being left justified. I've tried a lot of combos and none have worked so far. Got a suggestion? I'll let you know if I tried already.
Tried text-align, align-content, align-items, margin: auto in combinations for all css.
I expect it to be center justified with nice even spacing. Actually is all left.
Use flexbox.
You can read more about how to use it here and here if you like to learn through games.
This question was asked and answered on Stack Owerflow already more than once, for instance here.
.t-box920g {
display: flex;
justify-content: space-between;
align-items: center;
}
.t-box920g .i-box {
background-color: blue;
width: 32%;
}
<div class="t-box920g">
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample1.jpg">
<img id="i-imageconstrain" src="images/gallery/sample1.jpg" border="0" />
</a>
</div>
</div>
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample2.jpg">
<img id="i-imageconstrain" src="images/gallery/sample2.jpg" border="0" />
</a>
</div>
</div>
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample3.jpg">
<img id="i-imageconstrain" src="images/gallery/sample3.jpg" border="0" />
</a>
</div>
</div>
</div>
Related
When in a landscape mode, I need to separate/make a gap (around 10-20px) between the two columns without using a border or anything like that. I tried everything and it still doesn't work, what am i missing? I tried putting margins, but it doesn't help, what's the best way to solve this?
#media screen and (min-width: 567px) {
.container {
display: flex;
flex-flow: row wrap;
}
.container li {
flex-basis: 50%;
max-width: 50%;
}
}
.item {
display: flex;
align-items: center;
padding-top: 5px;
}
.title {
font-weight: 500;
font-size: 22px;
padding-bottom: 18px;
}
.item-image {
flex-basis: 85px;
min-width: 85px;
padding-bottom: 30px;
}
.item .item-image img {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
width: 100%;
}
.item .item-info {
border-bottom: 1px solid rgb(207, 206, 206);
padding-bottom: 20px;
flex-basis: 100%;
margin-left: 15px;
}
<ul class="container">
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
</ul>
Just add something like gap: 5px to your container with flex layout
Thanks to #AbsoluteBeginner this feature is supported not everywhere. See here: https://caniuse.com/flexbox-gap
Add margin-right to the element if you want to stick to flexbox.
Otherwise - try out css grid, super easy with grid-gap to add the gap you need.
https://www.w3schools.com/css/css_grid.asp
You can add this CSS rule:
ul.container > *:nth-child(odd) .item-info {
margin-right: 50px;
}
It adds a right marging to every odd .item-info (or more precisely: to every .item-info inside every odd direct child element of the .container element)
#media screen and (min-width: 567px) {
.container {
display: flex;
flex-flow: row wrap;
}
.container li {
flex-basis: 50%;
max-width: 50%;
}
}
.item {
display: flex;
align-items: center;
padding-top: 5px;
}
.title {
font-weight: 500;
font-size: 22px;
padding-bottom: 18px;
}
.item-image {
flex-basis: 85px;
min-width: 85px;
padding-bottom: 30px;
}
.item .item-image img {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
width: 100%;
}
.item .item-info {
border-bottom: 1px solid rgb(207, 206, 206);
padding-bottom: 20px;
flex-basis: 100%;
margin-left: 15px;
}
ul.container > *:nth-child(odd) .item-info {
margin-right: 50px;
}
<ul class="container">
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
</ul>
I am trying to center stack of divs 3 per row if browser window is biger than 1024 and if it is less than 1024 to show 2 divs in row but keep showing all 6 of them.
Currently i am having a problem to migrate what i have already found out as it doesn't really fit to the div.
Here is my previous example of how it was supposed to look but i did not tried to pack it into divs.
h3 {
word-break: break-word; /* non standard for webkit */
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.img{
width:640px;
height:100%;
}
.image {
position: relative;
width: auto; /* for IE 6 */
max-height: 640px;
}
h2{
background-color: rgba(0, 0, 0, 0.5);
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-top: 10px;
position: absolute;
bottom:-15px;
left: 0;
width: 600px;
color:white;
}
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">A Movie in the Park: Kung Fu Panda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">A Movie in the Park: Kung Fu Panda saasffdafadfadfda</h2>
</div>
<div class="image">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incomprehensibilities ffafefeafea fefeefes gregrgregregerge</h2>
</div>
Here is what i tried to do with divs but it doesn't work the same way so i couldn't implement those properties.
body{
background-color:darkgrey;
}
.row{
left: 50%;
}
#media (min-width: 1024px) { .col-3::after{width:37.5%} }
.col-3 {width: 25%; float: left; border: 1px solid white;
margin-right: 20px;height:auto; margin-bottom: 20px;
}
img {
max-width: 100%;
max-height: 100%;
}
h2{
background-color: rgba(0, 0, 0, 0.5);
word-break: break-word; /* non standard for webkit */
font-size: 2vw;
max-width: 100%;
max-height: 100%;
color:white;
}
<body>
<div class="row">
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
<div class="col-3">
<img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
<h2 lang="en">Incompres ffafefeafea fefeefes gregrgreg regerge</h2>
</div>
</div>
</body>
Using floats and media queries you can achieve this result. I used flexbox to center a wrapper that contains all 6 divs so everything remains centered despite div width or viewport dimensions. Next you can float all inner divs left and use nth-child to target only the ones you want to clear which will determine your column number. Use a media-query to target a viewport wider than 1025pxand simply change your nth-child pseudoclass accordingly.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
html {
font-family: sans-serif;
}
body {
display: flex;
align-items: center;
}
.wrapper {
overflow: hidden;
margin: auto;
padding: 0.75rem;
background-color: #eee;
}
div > div {
padding: 0.75rem 1.5rem;
margin: 0.5rem;
background-color: #ccc;
float:left;
}
div:nth-child( 4n ){
clear: left;
}
.note {
width: 100%;
padding: 1rem;
background-color: #000;
color: #eee;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
#media( max-width: 1025px ){
div:nth-child( 2n + 3 ){
clear: left;
}
div:nth-child( 4n ){
clear: none;
}
.note {
background-color: rgba( 0, 0, 0, 0.6 );
}
}
<div class="note">Resize viewport to change layout</div>
<div class="wrapper">
<div>div1</div> <div>div2</div> <div>div3</div>
<div>div4</div> <div>div5</div> <div>div6</div>
</div>
I am trying to align three images in a header div. I need one image on the left - once centered - and an image on the right. I have the image on the left and the centered image in place. However, I cannot get the image I need on the right to display on the right of the centered image. If I float:left the centered image it messes up my centered image in various browsers. The image I want on the right displays on the left of the centered image. How do I get it on the right side of the centered image? Thank you very much.
Here is my code:
HTML:
<div class="header">
<div class="headerLeft">
<img src="salogo_lg.jpg"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerLeft-->
<div class="headerCenter">
<img src="logo85.jpg"
width="485"
height="93"
alt="Salvation Army" />
</div> <!-- closing tag of headerCenter -->
<div class="headerRight">
<img src="salogo_lg.jpg"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerRight -->
</div> <!-- closing tag of header -->
CSS:
.header{
width: 100%;
height: 115px;
background-color: #0B0B3B;
margin-bottom: -15px;
}
.headerLeft{
float: left;
width: 105px;
height: 115px;
}
.headerCenter{
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 485px;
height: 93px;
}
.headerRight{
float: left;
text-align: right;
margin-left: 15px;
width: 105px;
height: 115px;
}
Quick answer :
*
{
box-sizing: border-box;
}
header
{
background: grey;
color: white;
padding: 1em;
position: relative;
height: 5em;
width: 100;
}
img
{
display: block;
height: 3em;
margin: auto;
}
img.right
{
position: absolute;
right: 1em;
top: 1em;
}
img.left
{
left: 1em;
position: absolute;
top: 1em;
}
<header>
<img src="http://25.media.tumblr.com/tumblr_m9gus8QYjY1rw0ggfo3_r5_400.gif" alt="" class="left" />
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRBzTbPH8FRYR0HRqTmXnwSO4GgLbFO6rpALpwynKRr4SM_nTCywQQO6qvDcg" alt="" class="center" />
<img src="https://c2.staticflickr.com/4/3016/3071708735_ddaf5d361b.jpg" alt="" class="right" />
</header>
To avoid using position: absolute;, I'd recommend using calc to help out, and wrapping the .headerCenter in .headerCenterWrapper as I have below.
CSS:
.headerLeft {
width: 105px;
height: 115px;
display: inline-block;
}
.headerCenterWrapper {
width: calc(100% - 220px); /* Using a number slightly more than the sum of the side images' widths (210 px) to be safe */
height: 115px;
display: inline-block;
text-align: center;
}
.headerCenter {
width: 50px;
height: 115px;
display: inline-block;
}
.headerRight {
width: 105px;
height: 115px;
display: inline-block;
}
And the HTML:
<header class="header">
<img src="" alt="" class="headerLeft"/>
<div class="headerCenterWrapper">
<img src="" alt="" class="headerCenter" />
</div>
<img src="" alt="" class="headerRight" />
</header>
css
.headerLeft{
float: left;
width: 33.33%;
height: 115px;
}
.headerCenter{
margin-left: auto;
margin-right: auto;
width: 33.33%;
height: 115px;
float:left;
text-align:center;
}
.headerRight{
float: right;
width: 33.33%;
height: 115px;
text-align:right;
}
html
<div class="header">
<div class="headerLeft">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerLeft-->
<div class="headerCenter">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army" />
</div> <!-- closing tag of headerCenter -->
<div class="headerRight">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerRight -->
</div>
I am trying to make part of my responsive page look like: http://s17.postimg.org/k4bh7qxnj/Screen_Shot_2014_07_26_at_8_08_02_PM.png
I have tried a few things and I got the result found at this jsfiddle: http://jsfiddle.net/TachionFiddle/4HkTS/3/
This is my code:
<div id="my-wrapper" style="
max-width: 941px;
display: inline-block;
width: auto;
height: auto;">
<div class="left-stuff" style="
display:inline-block;
width: 18%;">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png" style="width: auto;
height: auto; max-width:50%;">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png" style="width: auto;
height: auto; max-width: 50%;">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png" style="width: auto;
height: auto; max-width: 50%;">
</div>
<div class="right-stuff" style="display:inline-block;max-width: 75%">
<img src="http://s17.postimg.org/gns7jkwkf/webbanner2.png" style="width: auto; height: auto;
max-width:100%;">
</div>
</div>
Here's the general idea:
<div class="wrapper">
<div class="col-10">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png">
</div>
<div class="col-90">
<img src="http://s17.postimg.org/gns7jkwkf/webbanner2.png">
</div>
</div>
.wrapper {
width: 100%;
}
.col-10 {
width: 10%;
float: left;
vertical-align: top;
}
.col-10 img {
display: block;
max-width: 100%;
width: 100%;
}
.col-90 {
width: 90%;
float: left;
}
.col-90 img {
max-width: 100%;
width: 100%;
}
DEMO
I would suggest putting the three blocks into one image and making the heights line up in photoshop, will make your life a lot easier.
I am trying to implement a slider for my gallery.
Right now,the css has an issue where the overflow-x doesnt work properly.
(I want a horizontal slider and no vertical scroll)
Here's the fiddle:
Please do take a look.
.testimg{
height: 100%;
width: 100%;
}
#testDiv{
width: 400px;
overflow: auto;
float: left;
overflow-y:hidden;
border:1px solid black;
}
.testimgdiv{
width: 120px;
height: 100px;
float: left;
}
Once you've floated the elements, you've taken them out the document flow and it won't be calculated in the parent's width. You have to use a combination of display: inline-block on the items instead of float, and then use white-space: nowrap on the parent.
#testDiv{
width: 400px;
overflow-x: auto;
border:1px solid black;
white-space: nowrap;
font-size: 0;
}
.testimgdiv{
width: 120px;
height: 100px;
display: inline-block;
}
Fiddle
Note: I'm using font-size: 0 to make the items appear right next to each other.
UPDATE
As this post is quite old, it's probably worth noting that this can be done with less code using flexbox (depending on the browser support level required):
#testDiv {
width: 400px;
display: flex;
overflow-x: auto;
}
.testimgdiv {
width: 120px;
height: 100px;
flex: 0 0 auto;
}
<div id="testDiv">
<div class='testimgdiv'>
<img class="testimg" src="https://picsum.photos/100/100/" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="https://picsum.photos/100/100/" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="https://picsum.photos/100/100/" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="https://picsum.photos/100/100/" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="https://picsum.photos/100/100/" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="https://picsum.photos/100/100/" />
</div>
</div>
#testDiv {
border: 1px solid #FF0000;
float: left;
height: auto;
overflow-x: auto;
width: 400px;
}