I am building a website: http://akce.region-tour.cz/ahoj-vsichni/
If you scroll down, you will see 4 boxes (pictures with a link above). Every image is on a different row now. What I want to do is to style It, so there are two rows and each row has two boxes (see picture)
THIS IS HOW I WANT IT
<div style="width: 400px;">Krkonoše<img class="alignleft size-full wp-image-131" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/krkonose.jpg" alt="Krkonoše" width="400" height="150" /></div>
<div style="width: 400px;">Lužické hory<img class="size-full wp-image-132 alignleft" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/luzicke-hory.jpg" alt="Lužické hory" width="400" height="150" /></div>
<div style="width: 400px;">Krkonoše<img class="alignleft size-full wp-image-133" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/orlicke-hory.jpg" alt="orlické hory" width="400" height="150" /></div>
<div style="width: 400px;">Jizerské hory<img class="alignleft size-full wp-image-130" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/jizerky.jpg" alt="Jizerské hory" width="400" height="150" /></div>
you would make two rows, and each row has a right and left div
.row {
float:left;
width:100%;
margin:1em 0;
}
.row .left {
width:48%;
float:left;
}
.row .right {
width:48%;
float:right;
}
<div class="row">
<div class="left">img here</div>
<div class="right">img here</div>
</div>
<div class="row">
<div class="left">img here</div>
<div class="right">img here</div>
</div>
my above example is clean html and css and fully responsive.
There are numerous solutions and #HollerTrain provides a clean one. Here is a different solution using CSS3 flexbox which I find to be an excellent construct for providing flexible layouts.
CSS
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 850px;
}
.flex-container div {
width: 400px;
height: 160px;
margin: 10px;
}
HTML
<div class="flex-container">
<div style="width: 400px;">Krkonoše<img class="alignleft size-full wp-image-131" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/krkonose.jpg" alt="Krkonoše" width="400" height="150" /></div>
<div style="width: 400px;">Lužické hory<img class="size-full wp-image-132 alignleft" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/luzicke-hory.jpg" alt="Lužické hory" width="400" height="150" /></div>
<div style="width: 400px;">Krkonoše<img class="alignleft size-full wp-image-133" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/orlicke-hory.jpg" alt="orlické hory" width="400" height="150" /></div>
<div style="width: 400px;">Jizerské hory<img class="alignleft size-full wp-image-130" src="http://akce.region-tour.cz/wp-content/uploads/2017/08/jizerky.jpg" alt="Jizerské hory" width="400" height="150" /></div>
</div>
Fiddle
<html>
<head>
<style>
.row{
width:100%;
float:left;
margin:0 auto;
}
.colum1{
width:48%;
float:left;
margin:0 auto;
}
.colum2{
width:48%;
float:right;
margin:0 auto;
}
.colum3{
width:48%;
float:left;
margin:0 auto;
}
.colum4{
width:48%;
float:right;
margin:0 auto;
}
</style>
</head>
<body>
<div class="row">
<div class="colum1">
content here..
</div>
<div class="colum2">
content here..
</div>
<div class="colum3">
content here..
</div>
<div class="colum4">
content here..
</div>
</div><!-- ./row -->
</body>
</html>
Related
I know there are a lot of questions like this, and I have tried many of the methods suggested by those who have answered those questions, however, nothing works. I am beginning to think that my methods are not wrong, but that something else in my code is interfering? Such as my main div
If anyone could help me out I would really appreciate it. Currently, my images are just stacked on top of each other (vertically) on the left edge of the container...
This is the HTML:
<div class="main">
<!-- a bunch of <p> tags here I won't include -->
<div class="img123">
<img height="200" width="200" src="images/image1.jpg" alt="some text" class="images"/>
</div>
<div class="img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
<div class="img123">
<img height="200" width="200" src="images/image3.jpg" alt="some text" class="images"/>
</div>
</div>
This is the CSS solution I was trying to use for my images and the .main div
.image123 {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
#images{
text-align:center;
}
.main {
background-color: #FFFFFF;
margin: 5em auto;
padding: 25px;
border-radius: 1.5em;
width: 930px;
display: absolute;
}
My favourite way is to set up 2 classes site-wide:
.row {
display: flex;
flex-direction: row;
}
.col {
flex-direction: column;
}
This way you can align stuff easily using these two classes. Row should always be the parent container. Here is how you would handle the html:
<div class="row">
<div class="col img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
<div class="col img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
<div class="col img123">
<img height="200" width="200" src="images/image2.jpg" alt="some text" class="images"/>
</div>
</div>
If you want it evenly spaced use:
.col {
flex: 1;
}
Stackblitz example: https://stackblitz.com/edit/js-nddsvq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flexbox</title>
<style>
.main{
width:100%;
height:100%;
background-color:yellow;
display:flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="main">
<div class="image"> <!--1 image-->
<img src="https://images.pexels.com/photos/1864189/pexels-photo-1864189.jpeg" width="200" height="200">
</div>
<div class="image"> <!--2 image-->
<img src="https://images.pexels.com/photos/1878095/pexels-photo-1878095.jpeg" width="200" height="200">
</div>
<div class="image"><!--3 image-->
<img src="https://images.pexels.com/photos/572487/pexels-photo-572487.jpeg" width="200" height="200" >
</div>
</div>
</body>
</html>
I would like to figure out how to get a series of images to be vertically aligned on the page so people can scroll left to right and view them. I have tried 'vertical-align: middle'as well as adjusting the top % to no avail, here's the current set-up
.page {
position: absolute;
width: 2400px;
vertical-align: middle;
}
.column {
float: left;
width: 400px;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>
You may use the table-layout , so you get a single line and can use vertical-align:middle from the parent container .
here is an example without float and okay for browsers as old as FF 1 or IE8 . today, grid and flex can do a similar job in that case. Play snippet in full page to check out vertical-align behavior
body {
margin: 0;
padding: 0;
}
.page {
overflow-x: auto;
overflow-y: hidden;
height: 100vh;
box-sizing: border-box;
}
.row {
display: table;
height: 100%;
}
.column {
padding: 5px;
display: table-cell;
vertical-align: middle;
}
.column img {
width: 400px;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>
with flex it could be :
body {
margin: 0;
padding: 0;
}
.row {
display: flex;
align-items:center;
min-height:100vh;
box-sizing:border-box;
}
.column {
padding: 5px;
min-width: 400px;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>
I have the following code :
#pageMainContent {
margin-top: 20px;
margin-left: 40px;
width: 800px;
font-size: 16px;
line-height: 130%;
text-align: justify;
}
.pageMainContentLeft {
float: left;
width: 100px;
}
.pageMainContentRight {
width: 600px;
float: right;
margin-right: 90px;
text-align: justify;
}
.pageMainContentRight a{
color:#000000;
and code :
<div id="pageMainContent">
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px"><img alt="" src="image1.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />
<div style="clear:both"></div>
<div class="pageMainContentLeft" style="width:100px; height:160px; padding-top:40px"><img alt="" src="image2.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />
<div style="clear:both"></div><br />
<div class="pageMainContentLeft" style="width:100px; height:150px; padding-top:30px"><img alt="" src="image3.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%; text-align:justify;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />
<div style="clear:both"></div>
<div class="pageMainContentLeft" style="width:100px; height:160px; padding-top:34px"><img alt="" src="image4.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%; margin-top:-20px"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>Text </span></p>More Text.</div><br />
</div>
Inside the div pageMainContent I want to display 4 pictures with text underneath (in the shape of a box). What is the correct layout in each of the four divs ?
(its left picture then text underneath then horiztonal to that picture its right picture with text underneath - drop a few spaces and repeat for 2 more boxes)
P-----------------------P
T-----------------------T
P-----------------------P
T-----------------------T
P - Picture
T - Text
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
<img alt="" src="image1.png" />
<div style="width:100px;"><p>Text Here</p></div>
</div>
Also do something similar for the right div. I however recommend you restructure your code to make things easier for you.
<div class="sectionContainer">
<div class="entry" >
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
<img alt="" src="img/inspire/1.jpg" />
</div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;">
<p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span>
</p>More Text.
</div>
</div>
<div class="entry">
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
<img alt="" src="img/inspire/1.jpg" />
</div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;">
<p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span>
</p>More Text.
</div>
</div>
</div>
If you divide you code into sections, you will have more control of the code.
In my code, divs with sectionContainer class will display as rows because you will not define any floating for it in you css. So by definition, div elements are block elements and they will show as blocks, that is one on top of another.
For class entry, define a float to the left in your css and they will all be aligned from the left.
Make sure the width of .sectionContainer class is wide enough to accommodate two .entry items.
The main issue you had was that you mixed up which things should be left content and right content. I made a very basic method of making a box. You can format it as you wish
<div class="pageMainContentLeft">
<img alt="image1" src="image1.png" />
</div>
<div class="pageMainContentRight">
<img alt="Image2" src="image2.png" />
</div>
<div style="clear:both"></div><br />
<div class="pageMainContentLeft"><p>text</div>
<div class="pageMainContentRight"><p>text</p></div>
<div style="clear:both"></div><br />
<div class="pageMainContentLeft">
<img alt="image3" src="image3.png" />
</div>
<div class="pageMainContentRight">
<img alt="Image4" src="image4.png" />
</div>
<div style="clear:both"></div><br />
<div class="pageMainContentLeft"><p>text</div>
<div class="pageMainContentRight"><p>text</p></div>
<style>
#pageMainContent {
margin-top: 20px;
margin-left: 40px;
width: 800px;
font-size: 16px;
line-height: 130%;
text-align: justify;
}
.pageMainContentLeft {
float: left;
width: 200px;
}
.pageMainContentRight {
width: 200px;
float: right;
}
</style>
So I have that html code with images+title:
<div class="container">
<div class="box"><img src="image1.jpg" class="thumb"><p>Title 1</p></div>
<div class="box"><img src="image2.jpg" class="thumb"><p>Title 2</p></div>
<div class="box"><img src="image3.jpg" class="thumb"><p>Title 3</p></div>
<div class="box"><img src="image4.jpg" class="thumb"><p>Title 4</p></div>
...
<div class="box"><img src="image49.jpg" class="thumb"><p>Title</p></div>
<div class="box"><img src="image50.jpg" class="thumb"><p>Title</p></div>
</div>
And css:
.container {
width:80%;
margin: 0 auto;
}
.box {
display:inline-block;
width:150px;
margin-right:5px;
float:left;
}
With that code I have more "white" space on right, I want to have these pictures in the center for different browser size without setting up width for container.
Is it possible with css?
add to your container class text-align: center; and remove float:left; from box class.
That's what you call a centered, widthless float.
#outer {
/* This is just so you can see that they're centered */
width: 400px;
border: 1px solid black;
overflow: hidden;
}
.centered {
position: relative;
float: left;
left: 50%;
/* This and below is just because I have them stacked */
height: 100px;
padding-bottom: 10px;
clear: left;
}
.centered div {
position: relative;
float: left;
left: -50%;
}
<div id="outer">
<div class="centered">
<div>
<img src="http://placehold.it/200x100" alt="" />
</div>
</div>
<div class="centered">
<div>
<img src="http://placehold.it/300x100" alt="" />
</div>
</div>
<div class="centered">
<div>
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
</div>
</div>
</div>
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...