I need a gallery of images. Thereby it should be responsive. When there are too many images for one line, they should be displayed in the next.
That's what I have already implemented. My problem now is that the last line (when it has just one image for example) is centered, too. But It should be floated left.
I tried float:left, but this just makes everything float left and not center anymore.
Here is an JSFiddle-Example.
How can I have the last image float left?
HTML:
<div class="psAppWrapper">
<div ng-repeat="app in applications track by $index" class="psAppTile">
<img src="{{app.icon}}" class="psAppIcon"/>
<p class="psAppTitle">{{app.title}}</p>
</div>
</div>
CSS:
.psAppIcon {
width: 80px;
height: 80px;
}
.psAppTitle {
text-align: center;
}
.psAppTile {
width: 80px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
.psAppWrapper {
width: 100%;
text-align:center;
}
EDIT
When I add float left it looks like this:
The red one is psAppWrapper. Here you can see that the images are not centered. The left ones have much less space to the left than the right ones to the right. The spaces should be the same.
This
.psAppWrapper {
width: 100%;
text-align:left; /* Changed this from text-align:center */
}
should align the last element to the left.
Nowadays, positioning block items via float: left; is considered bad practise. You should use display: flex; to align block items in the way you like. For the last row, use flex-wrap: wrap;. So you should end up with this CSS:
.psAppTile {
display: flex;
flex-wrap: wrap;
}
You can find explanations and more information on display:flex; here.
But I think that you'll need another technique, display: grid; might do the trick. I must admit that I've not yet used this for layout. [You can find a complete guide here.][3]
Related
enter image description hereI got stack by a simple thing...
I am trying to create a simple navigation for my footer. So, I created a and placed an in it. The list contains three s and each of them has an inside. I wish my list items to be placed horizontally with spaces between / around them. Thus, I decided to use flexbox in this case. The question is that when I am setting display property value of my to flex and justify-content to center, it work predictably (i.e. all the list items sticked to each other are centered horizontally), however, as soon as I set justify-content to "space-between" or "space-around" I get an extra space to the right side of my content, which makes this space three times bigger than the one on the left side of the content.
I tried to search this topic in the history, but found nothing similar. Google search brought me a potential solution - to set flex:1 to each of the list items. But in this case I loose the gaps between the items which is not my intention.
Below I provide a picture of the problem and my testing code snippets. One more observation is that everything works great in code snippets programs (JSFiddle or Code Pen)...
Problem illustration
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.footer {
height: 100vh;
background: grey;
position: relative;
}
.container {
width: 90%;
height: 30vh;
margin: auto;
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
}
.nav {
background: white;
height: 100%;
}
.list {
height: 100%;
list-style-type: none;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.item {
min-width: 30%;
background: grey;
}
<div class="footer">
<div class="container">
<nav class="nav">
<ul class="list">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
</nav>
</div>
</div>
Your code snippet is ok. In your screenshot it seems you have a lot more css going on, though.
I can't see the complete CSS-snippet in your screenshot and I might be completely wrong: It looks like a piece of the clearfix-hack where you are missing the ::before part.
Because adding an empty space only in ::after will have exactly the effect you are describing.
It probably is the remains of a former float-construct, so you can just remove the ::after part.
Please look at this picture it will explain much better
https://gyazo.com/333fc2ef04f558480386b7be67eb1bda
I have a orange footer at the bottom of my webpage and i want the text to be aligned "left", "center" and "right" on the same line within the footer bar.
Right now the text is aligned but the text 3 aligns are under each other at 3 seperatly lines.
This is my HTML:
<div class="row">
<div id="footer">
<div align="left"><h3>Contact</h3></div>
<div align="center"><h3>Computerbasen</h3></div>
<div align="right"><h3>Info</h3></div>
</div>
</div>
This is my CSS:
#footer {
background-color: #FF7633;
width: 100%;
height: 50px;
border-radius: 5px;
padding-top: 10px;
position: absolute;
bottom: 0;
}
I recommend flexbox for this type of layout.
Remove the align attributes and add this to your #footer.
#footer {
display: flex;
justify-content: space-between;
}
You could achieve it in many different ways.
#Vestride gave you one way.
Another approach is to add another selector :
#footer div{
display: block;
float: left;
width: 30%;
}
OR
#footer div{
display: inline-block;
width: 30%;
}
This will select all div inside #footer and align them.
We divided the three div width to be aligned even. So, since width: 100% is even. we need to subtract 10% from it to use it for margin, and the rest will be divided by 3. so each div will be 30% of the footer width. This way it will be on the same line. Remember, any element has 100% of width will be on a separate line. Meaning, if two DIVs in the same line have 100% of width, they'll be under each other, but if the width divided between them (each one of them is 50% width) then they will be at the same line.
You could use the same idea, and be creative in your own way. As there are a various of methods that can be achieved differently in CSS. Just pick your favorite one to do it.
I tried to get two divs next to eachother. The right one has a fixed width, but the left one has to be able to resize. I tried multiple ways, but none fit all my requirements:
Right one has fixed width
Parent div has height of largest child (wraps its childs)
Left one has to resize
Html structure has to in this order (reason at bottom):
html:
<div class="container">
<div class="variable_width"></div>
<div class="fixed_width"></div>
</div>
I tried absolute positioning the right div and adding a margin on the left one and it achieved all requirements, except that the parent div doesn't wrap the largest child (as expected)
http://jsfiddle.net/0fxL71xL/3/
.container{max-width:400px;position:relative;}
.variable_width{margin-right:100px;}
.fixed_width{width:100px; position:absolute;right:0;top:0;}
I also tried using inline-block and max-width but then the divs don't align at the top, and I don't know how to handle the whitespace issue. Most important, it does not make the left div resize: http://jsfiddle.net/0fxL71xL/4/
.container{max-width:400px;}
.variable_width{max-width:290px; display:inline-block;}
.fixed_width{width:100px; display:inline-block;}
I also tried a float right on the right div, but it didn't come near what I wanted.
The closest I got was changing the order in html and using float:right on the div that has to go right, but in this case I can't use an #media query to have it display below the left div at a certain moment.
EDIT:While paulie_d's answer fixes it, I would prefer something that has a large browser support
flexbox can do that.
JSfiddle Demo
.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.fixed_width {
width: 200px;
background: #bada55;
}
.variable_width {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: plum;
height: 100px;
}
<div class="container">
<div class="variable_width"></div>
<div class="fixed_width"></div>
</div>
.container {
width:100%;
}
.variable_width {
max-width: 70%;
display: inline-block;
background-color:blue;
margin-right: -3px;
}
.fixed_width {
width:100px;
width: 28%;
display: inline-block;
background-color:red;
vertical-align: top;
}
now you can use this code. i think it will work fine.you can add some content in variable width div class and check whether it is working or not.i have checked it and it really works :) .
http://jsfiddle.net/souraj/vaqbsdzk/
After more searching I came across this interesting page which sums some techniques to achieve exactly what I wanted. It gives the most complete answer.
http://clubmate.fi/100-percent-height-columns-fixed-width-sidebar-pure-css-solutions-to-commons-fluid-layout-problems/
So I am designing a website right now (pretty nooby at HTML and CSS) but I made a design on Photoshop beforehand so that I could go right through the coding and make the website how I wanted. Well I have an issue. I have two DIV elements inside of a bigger container DIV that won't line up side-by-side, despite using inline-block. Here is the css code:
.contentContainer {
display: block;
width: 700px;
height: 250px;
margin: 20px auto;
}
.topContainer {
height: 230px;
padding: 10px;
background-color: white;
}
.topThumbnail {
display: inline-block;
width: 370px;
height: 230px;
}
.topThumbnail img {
width: 370px;
height: 230px;
}
.topInfo {
display: inline-block;
margin-left: 10px;
width: 300px;
height: 230px;
}
.topInfo p {
width: 300px;
height: 230px;
background-color: pink;
}
The contentContainer is the highest DIV holding my topContent and topThumbnail so I thought I'd throw it into the provided code.
And the HTML code:
<div class="topContainer">
<div class="topThumbnail">
<img src="YT.png" />
</div>
<div class="topInfo">
<p>Testing the information area of the top container or something along those lines</p>
</div>
</div>
Can't post pictures to explain the issue.. need 10 reputation.. will make it hard to describe.
In the design the two containers for the Thumbnail and the Info are supposed to be side-by-side and aligned at the top. The thumbnail is supposed to be on the left of the topContainer and the Info is supposed to be to the right of the thumbnail with a margin of 10. For some reason the info is not going to the right-side of the thumbnail but rather going under it. I have ALREADY set the margin to 0 to fix the default margin issues.
display: inline-block is working correctly in your example. What you need to add is vertical-align: top to your .topInfo div, and get rid of the default margin on your .topInfo p tag. Also, you need to make sure that there is enough room for the .topInfo div to sit to the side of the .topThumbnail div, otherwise it will wrap to the next line.
Like this:
http://jsfiddle.net/hsdLT/
A cleaner solution: I would look at ditching the display:inline-block CSS proporties on these elements altogether and just float them to the left. Then clear the floats by assigning clear:both to the .topInfo css property.
It's less code then your route will be and it's more structurally sound. :D.
.topThumbnail,
.topInfo {
float:left;
}
.topInfo {
clear:both;
}
Other people have already answered this with the solution, but I think it is important to understand why inline-block elements behave this way. All inline, table, and in this case, inline-block elements have the vertical-align property. The default value is set to baseline, hence the need to set vertical-align: top;.
See the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.
This other discussion is also helpful: Vertical alignment for two inline-block elements not working as expected
Consider the following example: (live demo here)
HTML:
<div id="outer_wrapper">
<div class="wrapper">
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
</div>
<div class="wrapper">
<a><img src="http://assets.test.myyearbook.com/pimp_images/home_page/icon_smiley.gif" /></a>
</div>
<div class="wrapper">
<a><img src="http://thumbs3.ebaystatic.com/m/mvHqVR-GDRQ2AzadtgupdgQ/80.jpg" /></a>
</div>
<div class="wrapper">
<a><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/718smiley.png/60px-718smiley.png" /></a>
</div>
</div>
CSS:
#outer_wrapper {
background-color: #bbb;
width: 350px;
}
.wrapper {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 100px;
text-align: center;
margin-right: 20px;
}
a {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid red;
}
The output is:
Why the black wrappers are not vertically aligned ? How could I fix that ?
The images are horizontally centered in the red boxes. How could I vertically center them ?
Please do not change the HTML, if possible.
Observe that it is the base of the images which are aligned. This is to do with the vertical-align; if you use a value for vertical-align on .wrapper other than baseline, like top, middle or bottom, it will fix it. (The difference between these will only be apparent if you put some text inside the div as well.)
Then you want to centre the images in their 80x80 spots. You can do that with display: table-cell and vertical-align: middle on the a (and add line-height: 0 to fix a couple more issue). You can then play further with mixing these groups of styles in the a tag, the .wrapper, or even throwing away the .wrapper if it isn't necessary (it would only be needed - if it is at all - if you're putting text in with it).
Result, with no further tweaks than what I've mentioned here: http://jsfiddle.net/jESsA/38/.
This will work on all decent browsers, and even on IE8/9, but it won't work on IE6/7. A technique for solving this which should work in IE6/7 is this: on the a, set display to block and alter the line-height from 0 to 78px (I'm not entirely clear on why 80px makes it shift down one pixel, but it does; if I thought about it long enough I could probably figure out why), and shift the vertical-align: middle to the img child. Final result: http://jsfiddle.net/jESsA/44/
You can try assigning a vertical-align attribute on the img tag. Vertical align is relative to the line box which means you need to set the line box as tall as the height of the a tag. So these changes are needed in your CSS markup:
#outer_wrapper {
overflow: hidden; /* required when you float everything inside it */
}
.wrapper {
/* display: inline-block is not required */
/* text-align: center is not required -- see below */
float: left; /* float all wrappers left */
}
a {
display: block; /* block display required to make width and height behave as expected */
margin-left: 4px; /* shift the block to make it horizontally centered */
margin-top: 9px; /* shift the block to make it vertically centered */
text-align: center; /* center inline content horizontally */
line-height: 80px; /* line height must be set for next item to work */
}
img {
vertical-align: middle; /* presto */
}
Demo here.
Take a look at this:
http://jsfiddle.net/jESsA/37/
Basically you use float: left to put your boxes inline and a background image instead of an img tag. Because you are using float, you need to clear after to cancel the float effect on other elements.
I changed the DIV tags to A tags so you can have a link on the hole block and keep it simple. But you can keep it as a DIV tag and put an A block inside though (or use JavaScript)
.wrapper {
float: left;
}
http://jsfiddle.net/jESsA/3/
You could check this out: http://www.brunildo.org/test/img_center.html
may be this will help you
http://css.flepstudio.org/en/css-tutorials/centered-vertical-horizontal-align.html
it helped me :)