I'm trying to display two columns side by side (the one on the left has 4 items and the one on the right has 3, totalling 7 items altogether) and I have:
#wrap{
width:600px;
margin:0px auto;
column-count: 2;
}
#left_col {
float:left;
width:200px;
}
#right_col{
float: right;
width: 200px;
}
<div id="wrap">
<div id="left_col">
<img src="number1.png"alt="number1" border="0" align="top" height="65" width="75"/>num1
<img src="number2.png"alt="number2" border="0" align="top" height="65" width="75"/>num2
<img src="number3.png"alt="number3" border="0" align="top" height="75" width="65"/>num3
<img src="number4.png"alt="number4" border="0" align="top" height="65" width="75"/>num4
</div>
<div id="right_col">
<img src="num1.png"alt="num1" border="0" align="top" height="65" width="75"/>number1
<img src="num2.png"alt="num2" border="0" align="top" height="65" width="75"/>number2
<img src="num3.png"alt="num3" border="0" align="top" height="65" width="75"/>number3
</div>
</div>
And my problem is that when I run it, the links/images/text in the left_col doesn't seem to be displayed as one item on each row like in the right_col and it's not showing the text together as it seems to be on the line below it.
Add display:block on the a tag:
#wrap{
width: 600px;
margin: 0px auto;
}
#left_col {
float: left;
width: 200px;
}
#right_col{
float: right;
width: 200px;
}
a {
display: block;
}
<div id="wrap">
<div id="left_col">
<img src="http://lorempixel.com/75/65/technics/1" alt="number1" height="65" width="75"/> Number 1
<img src="http://lorempixel.com/75/65/technics/2" alt="number2" height="65" width="75"/> Number 2
<img src="http://lorempixel.com/65/75/technics/3" alt="number3" height="75" width="65"/> Number 3
<img src="http://lorempixel.com/75/65/technics/4" alt="number4" height="65" width="75"/> Number 4
</div>
<div id="right_col">
<img src="http://lorempixel.com/75/65/technics/5" alt="num1" height="65" width="75"/> Number 1
<img src="http://lorempixel.com/75/65/technics/6" alt="num2" height="65" width="75"/> Number 2
<img src="http://lorempixel.com/75/65/technics/7" alt="num3" height="65" width="75"/> Number 3
</div>
</div>
Though, ideally you should do this using lists.
#wrap{
width:600px;
margin:0px auto;
column-count: 2;
}
#left_col {
float:left;
width:200px;
}
#left_col a {
display: block;
}
#right_col{
float: right;
width: 200px;
}
<div id="wrap">
<div id="left_col">
<img src="number1.png"alt="number1" border="0" align="top" height="65" width="75"/>num1
<img src="number2.png"alt="number2" border="0" align="top" height="65" width="75"/>num2
<img src="number3.png"alt="number3" border="0" align="top" height="75" width="65"/>num3
<img src="number4.png"alt="number4" border="0" align="top" height="65" width="75"/>num4
</div>
<div id="right_col">
<img src="num1.png"alt="num1" border="0" align="top" height="65" width="75"/>number1
<img src="num2.png"alt="num2" border="0" align="top" height="65" width="75"/>number2
<img src="num3.png"alt="num3" border="0" align="top" height="65" width="75"/>number3
</div>
</div>
Put 150 px for the width of your columns:
#wrap{
width:600px;
margin:0px auto;
column-count: 2;
}
#left_col {
float:left;
width:150px;
}
#right_col{
float: right;
width: 150px;
}
Related
I am working on a website, and I would like to align 4 circles in the center of the content area. The example can be found at invisionbilling.com/stackoverflow. I have something right now that does the job, but I know there will be issues with different window sizes, different picture sizes, etc. How do I set the height of the div container to automatically wrap around the 4 circles/images? Is there a way to automatically center it using margin-left and margin-right? I tried "auto" for all of these and it wasn't doing the job. Thanks!
HTML
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
CSS
.circles {
display: block !important;
float: left !important;
margin: 10px !important;
}
.wrapper {
height: 175px;
width: 100%;
margin-left: 225px;
}
Try flexbox instead of floating, and try never to use !important:
<!DOCTYPE html>
<html>
<head>
<style>
.circles {
margin: 10px;
}
.wrapper {
height: 175px;
width: 100%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
</body>
</html>
How do I make these photos all go in the center of the webpage? this is my html code
<html>
<body>
<div id="travel_photos">
<img style="display: inline; margin: 0 10px; title="branson" src="branson.jpg" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="cancun" src="cancun.jpg" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="denver" src="denver.png" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="destin" src="destin.png" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="PV" src="PV.png" alt="" width="150" height="50"/>
</body>
</html>
If you're trying to center the images horizontally, try this: https://jsfiddle.net/a5u3q1w5/2/
HTML:
<div id="travel_photos">
<img title="branson" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg"/>
<img title="branson" src="http://www.petmd.com/sites/default/files/petmd-cat-happy-13.jpg"/>
<img title="branson" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg"/>
</div>
CSS:
#travel_photos > img {
width: 300px;
height: 100px;
margin: 0 auto;
display: block;
}
Please try this:
<html>
<body>
<img style="display: block; margin:auto;" title="branson" src="branson.jpg" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="cancun" src="cancun.jpg" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="denver" src="denver.png" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="destin" src="destin.png" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="PV" src="PV.png" alt="" width="150" height="50"/>
</body>
</html>
I am trying to have three images centered in a row and then centered on the page. I've got them all in a row but I cannot get them centered. Any suggestions on getting my group to the middle? I tried 0 auto on the contain class and on the social class. so close!!
My HTML: first thing is div class=contain to wrap the whole thing, but for some reason if I try to include the class contain in HTML it disppears on Stack Overflow so excuse that.
.contain {
max-width: 960px;
text-align: center;
}
.social {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div class="contain">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
What I would recommend is to make use of flexbox container for the elements.
With flexbox, all you need is three different styles in order to centralise elements both horizontally and vertically:
display: flex;
align-items: self;
justify-content: center;
Note that you'll also need to set a height on the container, so that the elements can actually fill the vertical space.
This can be seen in the following, with a border added to showcase the area that the .container element occupies:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
border: 1px solid black;
}
.social {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div class="container">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Hope this helps! :)
html
<div class="content">
<div>
<img src="facebook.png" alt="" width="75" height="75"/>
</div>
<div>
<img src="twitter.png" alt="" width="75" height="75"/>
</div>
<div>
<img src="instagram.png" alt="" width="75" height="75" />
</div>
</div>
css
.content {
text-align:center;
}
Maybe you can edit the css file, remove the float:left; :
.contain {
max-width:960px;
text-align:center;
}
.social {
position:relative;
display: inline-block;
padding: 10px;
}
<div align="center">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png"
alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Using flex is a great solution, but here's a solution that uses what you already have. By removing float: left from your existing code we can get the desired result.
.contain {
max-width: 960px;
text-align: center;
}
.social {
display: inline-block;
padding: 10px;
}
<div class="contain">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Keeping your current code, simply remove the flex: left: (JSFiddle example):
.contain {
max-width: 960px;
text-align: center;
}
.social {
position: relative;
display: inline-block;
padding: 10px;
}
If based on your browser compatibility requirements you can afford to use display: flex; (MDN) then that's the easiest way (jsfiddle example):
.contain {
display: flex;
justify-content: center;
}
.social {
padding: 10px;
}
There's an excellent flexbox tutorial here: flexbox froggy. Floats are pretty strange and I personally find flexes much more intuitive.
I have this code here:
#mg1 {
margin-left: 3%;
}
#mg1:hover {
margin-top: 4%;
}
<div id="section1">
<center>
<div id="bgp">
<center>
<p>THUMBNAILS</p>
</center>
</div>
</center>
<br>
<img src="321321321321.png" width="200" height="150" id="mg1">
<img src="ewqfh.png" width="200" height="150" id="mg2">
<img src="2321321.png" width="200" height="150" id="mg3">
</div>
The hover effect should only affect the image with the id="mg1", but instead it affects all my images; Why is this happening?
#mg1{
margin-left:3%;
position:relative;
}
#mg1:hover{
margin-top:4%;
}
img{
float:left;
}
<div id="section1">
<center><div id="bgp"><center><p>THUMBNAILS</p></center></div></center><br>
<img src="321321321321.png" width="200" height="150" id="mg1">
<img src="ewqfh.png" width="200" height="150" id="mg2">
<img src="2321321.png" width="200" height="150" id="mg3">
</div>
#section1{
position:relative;
}
#mg1,#mg2,#mg3{
position:absolute;
}
#mg1{
margin-left:3%;
}
#mg2{
top:200px;
}
#mg3{
left:200px;
}
#mg1:hover{
margin-top:15%;
transition:2s linear;
}
<div id="section1">
<center><div id="bgp"><center><p>THUMBNAILS</p></center></div></center><br>
<div id="mg1">
<img src="http://www.freeiconspng.com/uploads/green-humming-bird-png-4.png" width="200" height="150" ></div>
<div id="mg2"> <img src="http://www.freeiconspng.com/uploads/guitar-icon-png-18.jpg" width="200" height="150" ></div>
<div id="mg3"> <img src="http://www.imagenspng.com.br/wp-content/uploads/2015/02/super-mario-03.png" width="200" height="150" ></div>
</div>
Apply position:relative and z-index:1 to #mg1. and use top and left properties instead of margins, and instead of percentages, use vh and vw if your parent element is too small.
SNIPPET
#section1 {
height: 600px;
width: 800px;
}
#mg1:hover {
position: relative;
top: 4vh;
left: 3vw;
z-index: 1;
}
<div id="section1">
<center>
<div id="bgp">
<center>
<p>THUMBNAILS</p>
</center>
</div>
</center>
<br>
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" width="200" height="150" id="mg1">
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" width="200" height="150" id="mg2">
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" width="200" height="150" id="mg3">
</div>
<!DOCTYPE html>
<html>
<head>
<style>
#mg1 {
margin-left: 3%;
}
#mg1:hover {
margin-top: 4%;
}
img{
position: relative;
float : left;
}
}
</style>
</head>
<body>
<div id="section1">
<center>
<div id="bgp">
<center>
<p>THUMBNAILS</p>
</center>
</div>
</center>
<br>
<img src="321321321321.png" width="200" height="150" id="mg1">
<img src="ewqfh.png" width="200" height="150" id="mg2">
<img src="2321321.png" width="200" height="150" id="mg3">
</div>
</body>
</html>
Having some trouble trying to put together a page where images are placed properly. Screen shot attached of what I currently have in place now. What I am trying to get to would look like the first row of images (1-5) all the way down the page with every other row opposite, if that makes sense. Images 1-8 are set up correctly but 9-10 are on row 3 rather than on row 2 where I would like them. Image 11 should be left side and 12-15 should be right side. And so on..
Current css –
#grid { float: left; width: 100%; overflow: hidden; }
#grid-inner { float: left; width: 890px; overflow: hidden; }
.item { float: left; margin: 0 0 10px 0; position: relative; }
.item span { display: none; position: absolute; padding: 0 0 0 0; color: #fff; background: transparent url('../images/back-work.png') 0 0 repeat; }
.item span a { color: #fff; display: block; height: 100%; width: 100%; }
.small { width: 210px; height: 125px; }
.large { width: 420px; height: 260px; }
.small span { width: 210px; height: 125px; padding: 0 0 0 0; }
.large span { width: 420px; height: 260px; padding: 0 0 0 0; }
#project { float: left; width: 100%; }
#project-content { float: left; width: 100%; border-top: 1px solid #ccc; margin: 0 0 0 0; padding: 0 0 0 0; }
#project-content-alpha { float: left; width: 200px; }
#project-content-beta { float: left; width: 410px; }
#project-content-gamma { float: right; width: 200px; text-align: right; }
#project-content-alpha span.light { color: #999; }
#project-images { float: left; width: 100%; }
#project-images img { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination { float: left; width: 100%; margin: 0 0 0 0; }
#project-pagination-alpha { float: left; width: 200px; }
#project-pagination-beta { float: right; width: 200px; text-align: right; }
Current markup –
<div id="grid">
<div id="grid-inner">
<div class="item large">
<span>ONE</span>
<img src="" width="420" height="260" alt="ONE" />
</div>
<div class="item small">
<span>TWO</span>
<img src="" width="210" height="125" alt="TWO" />
</div>
<div class="item small">
<span>THREE</span>
<img src="" width="210" height="125" alt="THREE" />
</div>
<div class="item small">
<span>FOUR</span>
<img src="" width="210" height="125" alt="FOUR" />
</div>
<div class="item small">
<span></span>
<img src="" width="210" height="125" alt="FIVE" />
</div>
<div class="item small">
<span></span>
<img src="" width="210" height="125" alt="SIX" />
</div>
<div class="item small">
<span></span>
<img src="" width="210" height="125" alt="SEVEN" />
</div>
<div class="item large">
<span></span>
<img src="" width="420" height="260" alt="EIGHT" />
</div>
Any help or suggestions on this would be appreciated.
Thanks in advance!
CSS floats don't reposition the elements vertically. They only float horizontally.
If you want vertical "floats" (i.e. tiling), you will need to use JavaScript. I recommend the jQuery Masonry Plugin or Vanilla Masonry (jQuery Masonry minus the jQuery).
Check out the interface here. Let me know if you need revisions.
EXACTLY WHAT WAS ASKED FOR - http://jsfiddle.net/rxLTG/
HTML
<div class="wrap">
<div class="row">
<img class="lg" src="" alt="1" />
<img class="sm" src="" alt="2" />
<img class="sm" src="" alt="3" />
<img class="sm" src="" alt="4" />
<img class="sm" src="" alt="5" />
</div>
<div class="row">
<img class="sm" src="" alt="6" />
<img class="sm" src="" alt="7" />
<img class="lg" src="" alt="8" />
<img class="sm" src="" alt="9" />
<img class="sm" src="" alt="10" />
</div>
</div>
CSS
.wrap {width:650px;}
.wrap img {float:left; width:150px; height:100px;}
.wrap img.lg {width:350px; height:200px;}
.row.odd .lg, .row:nth-child(even) .lg {float:right;}
JS
$(function () {
$('.row:odd').addClass('odd');
});
A better way would be like this - http://jsfiddle.net/rxLTG/2/
HTML
<div class="wrap">
<img class="lg" src="" alt="1" />
<img class="sm" src="" alt="2" />
<img class="sm" src="" alt="3" />
<img class="sm" src="" alt="4" />
<img class="sm" src="" alt="5" />
<img class="lg2" src="" alt="6" />
<img class="sm" src="" alt="7" />
<img class="sm" src="" alt="8" />
<img class="sm" src="" alt="9" />
<img class="sm" src="" alt="10" />
<img class="lg" src="" alt="11" />
<img class="sm" src="" alt="12" />
<img class="sm" src="" alt="13" />
<img class="sm" src="" alt="14" />
<img class="sm" src="" alt="15" />
<img class="lg2" src="" alt="16" />
<img class="sm" src="" alt="17" />
<img class="sm" src="" alt="18" />
<img class="sm" src="" alt="19" />
<img class="sm" src="" alt="20" />
</div>
CSS
.wrap {width:500px;}
.wrap img {float:left; width:125px; height:100px;}
.wrap img.lg {width:250px; height:200px;}
.wrap img.lg2 {width:250px; height:200px;float:right;}
Theres no need to define each row inside a div, because they will automatically fit and wrap round.
Also, if you float the large image on each row first (left or right), then the other four will fit into place without any javascript needed.
Every fifth number will then be a large image, (1,6,11,16,21 etc). If you want it to work javascript free, then use this solution. If you want to keep your original numbering system, then use the solution above.
You can just look at it as a grid. More markup, but reusable and responsive too.
For the example, you can handle this grid layout with a single class that takes the half of it's container.
first row :
- 1 column of 1/2 : has 1 large image
- 1 column of 1/2 : has 4 columns (1/2 each, and each containing a small image)
Second row : just reverse the first 1/2 columns
Columns are floated, so the col 4 and 5 will stack under 1 and 2... Your images, have to be at the right aspect ratio too.
And finally, since you're floating elements, clearfix the group.
Hope it helps.
/* Micro clearfix for the wrapper */
.wrap:before,
.wrap:after {
content: '';
display: table
}
.wrap:after {
clear: both;
}
.wrap { width:650px; }
/* no need for size if you put the right images */
img {
width:100%;
height: auto;
vertical-align: middle; /* removes the gap beneth the image */
}
/* you can go further and create some other columns */
.col-1-2 {
float: left;
width: 50%;
}
/* demo purpose only */
img {
width: 100%;
height: 100px;
}
img.lg { height: 200px; }
<div class="wrap">
<!-- one half of the wrapper -->
<div class="col-1-2">
<img class="lg" src="" alt="1" />
</div>
<!-- one half of the wrapper -->
<div class="col-1-2">
<!-- one half of the columns :: 1/4 -->
<div class="col-1-2">
<img class="" src="" alt="2" />
</div>
<div class="col-1-2">
<img class="" src="" alt="3" />
</div>
<div class="col-1-2">
<img class="" src="" alt="4" />
</div>
<div class="col-1-2">
<img class="" src="" alt="5" />
</div>
</div>
<!-- then reverse -->
<div class="col-1-2">
<div class="col-1-2">
<img class="" src="" alt="6" />
</div>
<div class="col-1-2">
<img class="" src="" alt="7" />
</div>
<div class="col-1-2">
<img class="" src="" alt="8" />
</div>
<div class="col-1-2">
<img class="" src="" alt="9" />
</div>
</div>
<div class="col-1-2">
<img class="lg" src="" alt="10" />
</div>
</div>