I want to put two images in one div. One remains up and other goes down. Both take around 25% width:-
<div class="images">
<div class="pics">
<img src="GRProvider/Img.jpg" />
</div>
<div class="pics">
<img src="GRProvider/Img_2.jpg"/>
</div>
</div>
CSS:
.images {
float: left;
width: 25%;
}
.pics {
float: left;
width: 12%;
margin: 0%;
}
images_img {
width: 100%;
}
Try this out using display:inline-block
CSS
.images {
display: inline-block;
width: 25%;
}
.pics img{
display: inline-block;
width: 100%;
}
DEMO HERE
Do you want the pics side by side? You only need one line of css:
.pics { display:block; float:left; }
http://jsfiddle.net/ve9ud2o4/1/
Or if you want the image container div to be 25% and the pictures to span the div you could do:
.images { background:red; display:block; float:left; overflow:hidden; width:25%; }
.pics { background:green; display:block; float:left; width:50%; }
.pics img { border:1px dotted black; display:block; width:100%; }
http://jsfiddle.net/ve9ud2o4/2/
Remember that .pics width is relative to it's container. So even though the .images div is 25%, if you want a pic to be half of that you set the .pics width to 50%
you can use display:block; to prevent line breaks and display elements in same line
Of course you can ajust your div width to fit the two images and float them as you wish
How do I make these 3 images fit to its parent div height while maintaining the image's aspect ratio?
<div id="myM">
<div class="ab">
<img src="http://img42.com/2lWNS+" class="cd"/>
<img src="http://img42.com/2lWNS+" class="cd"/>
<img src="http://img42.com/2lWNS+" class="cd"/>
</div>
</div>
css:
#myM{
width: 300px;
height: 200px;
background-color: cyan;
}
.ab{
width: 100%;
float: right;
}
.cd{
max-height:33%;
width:auto;
}
Here is a Fiddle
I think the problem is with the float removing the container from the flow. Instead, you can make the container an inline-block and use right-align.
https://jsfiddle.net/9uyww2j0/2/
Without changing your HTML, my new CSS is this:
#myM{
width: 300px;
height: 200px;
background-color: cyan;
text-align: right;
}
.ab {
display: inline-block; /* So text-align affects it */
height: 100%
}
.cd{
display: block; /* So takes full width */
height:33%;
}
I'm doing a list of items, but it has some challenges:
Responsive;
The "title" may have more than one line;
Sometimes a I need to show a icon with a color in the background instead of full image.
This is the image of what I'd expect:
And what I've got: http://codepen.io/caio/pen/ygkfm/
As you can see, I can't set the same scaling to an "image" div when it has a icon. Is there any solution for my problem?
I am assuming your images (exept icons) all have the same aspect ratio as in your example.
In this case, you can use padding bottom to keep the height of the image container. As padding-bottom is calculated according to the width of the container, it will keep it's aspect ratio whatever the content (you will have to position the content with position:absolute; so it doesn't change the dimesions of the container).
Here is a demo Showing what you can do.sorry I'm not into codePen
I also added an other container to center the icons horizontaly.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.items {
margin: 50px auto 0;
width: 90%;
*zoom: 1;
}
.items:before, .items:after {
content:" ";
display: table;
}
.items:after {
clear: both;
}
.items .item {
border: 1px solid #ddd;
float: left;
width: 32%;
}
.items .item:nth-child(3n+2) {
margin: 0 2%;
}
.items .item .image {
background: #eee;
padding-bottom:50%;
position:relative;
}
.items .item .image .img_in{
position:absolute;
width:100%;
height:100%;
text-align:center;
}
.items .item .image img {
display: block;
width: 100%;
height:100%;
}
.items .item .image img.icon {
height: 80%;
margin:0 auto;
position: relative;
top: 10%;
width: auto;
}
.items .item .title {
margin: 0;
padding: 20px;
}
It's easy
add follwing to .items .item .image
when you have a 'normal' width and height of 200 and 100 Pixels, then 50% represents the 50% of the width (200 * 50% = 100)
{
height: 0;
padding-bottom: 50%;
}
http://codepen.io/HerrSerker/pen/HhjKo?editors=110
edit
You can use SCSS percentage function:
padding-bottom: percentage(100px / 200px);
This is not exactly what you had in mind however it is a very responsive design which I expect to be what you need: http://codepen.io/anon/pen/DwudI
Here's the gist: You probably want to keep the aspect ratio of each main container. The image then scales to at least 80% of the height and no more than 100% in both width and height. The way to create an aspect ratio on a div is by using this fun padding-top trick. When you resize the screen the div's width changes which causes the height to change to (aspect ratio). So if you resize smaller then eventually the div becomes smaller than the image size which will cause the 200x100 to fill the entire div.
So if you want the image to fill the div, then it must be (A) larger than the div and (B) the same aspect ratio as the div.
You mentioned the title might be multiple lines: Right now new lines go below. If you wanted the text to 'float upwards' then that wouldn't be too hard. Simply use position:absolute; bottom:0px on the header and make sure .item has position:relative.
I think you are going about this the wrong way, when everything is based on the width percentages there is no way to know the height unless you use JS, so you need to change the width to something more appropriate to achieve your goal.
changing your CSS to:
.icon {
margin: 0 auto;
padding: 5% 0;
width: 40%;
}
and it will look more like you want. I updated your CodePen
Mainly, I added a max-height and a min-height of the same value to .items .item .image img:
.items .item .image img {
display: block;
width: 100%;
max-height:23%;
min-height:23%;
}
I'm not quite sure what you're trying to achieve but if I got you well then this is what you're looking for, Here is the full code:
HTML
<div class="items">
<a href="#" class="item">
<div class="image">
<img src="http://placehold.it/200x100" />
</div>
<h4 class="title">Hi. I'm a title.</h4>
</a>
<a href="#" class="item">
<div class="image">
<img src="http://placehold.it/80x80" class="icon" />
</div>
<h4 class="title">Hi. I'm a title.</h4>
</a>
<a href="#" class="item">
<div class="image">
<img src="http://placehold.it/200x100" />
</div>
<h4 class="title">Hi. I'm a title.</h4>
</a>
</div>
CSS
* {
#include box-sizing(border-box);
}
.items {
margin: 50px auto 0;
width: 90%;
#include clearfix;
}
.item {
border: 1px solid #ddd;
float: left;
width: 30%;
}
.items .item .image {
background: #eee;
}
.items .item .image img {
display: block;
width: 100%;
max-height:23%;
min-height:23%;
}
.items .item .title {
margin: 0;
padding: 20px;
}
.icon {
height: 80%;
margin: 0 auto;
position: relative;
top: 10%;
width: auto;
}
.items .item:nth-child(3n+2) {
margin: 0 2%;
}
And here is a FIDDLE
I thing this is what you are excepting.
Demo
HTML
<a href="#" class="item">
<div class="image">
<div><img src="http://placehold.it/200x100"></div>
</div>
<h4 class="title">Hi. I'm a title.</h4>
</a>
<a href="#" class="item">
<div class="image">
<div><img src="http://placehold.it/80x80" class="icon"></div>
</div>
<h4 class="title">Hi. I'm a title.</h4>
</a>
<a href="#" class="item">
<div class="image">
<div><img src="http://placehold.it/200x100"></div>
</div>
<h4 class="title">Hi. I'm a title.</h4>
</a>
</div>
SCSS
* { #include box-sizing(border-box); }
.items {
margin: 50px auto 0;
width: 90%;
#include clearfix;
.item {
border: 1px solid #ddd;
float: left;
width: 32%;
&:nth-child(3n+2) { margin: 0 2%; }
.image {
background: #eee;
min-height:100px;
max-height:100px;
display:table;
width:100%;
&> div {
display:table-cell;
text-align:center;
vertical-align:middle;
}
img {
max-width:100%;
height:100%;
margin:0 auto;
&.icon {
height: 80%;
margin: 0 auto;
position: relative;
top: 10%;
width: auto;
}
}
}
.title {
margin: 0;
padding: 20px;
}
}
}
I'd rather go and use those utility classes which I found myself using quite a lot since I found them, basically embedding them on each CSS I write. Clean, easy to read and easy to embed in the HTML.
This small set of classes permits you to have a proportional width/height sizes on elements.
Here's the demo http://siebennull.com/equal_width_height.html
Here's the article explaining it: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
Credit obviously goes to who found this trick :)
CSS
.box{
position: relative;
width: 50%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Other ratios */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}
HTML
<div class='box'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
<div class='box ratio16_9'>
<div class='content'>Aspect ratio of 16:9</div>
</div>
You could use an extra element and vertical-padding to force your div to keep the same ratio that it has a 2:1 image or not.
DEMO and basic css:
.image:before {
content:'';
display:inline-block;
vertical-align:middle;
padding-top:50%;/* equals 50% of width of parent */
width:0;
box-shadow:0 0 0 5px red;/* let's see where it stands for demo purpose */
}
In order to have this working in your codepen:
img should turn back to their default display (inline-block), so just remove display:block; and be vertical-alligned in middle to the pseudo element , the gap under img that appears when on baseline, will be no longer here.
.image needs either:
In CSS font-size:0;
In HTML, the code <div><img src=".. should not be indented
In HTML white-space should be commented <div><!-- code indented --><img src="...
to avoid extra white-space and break in 2 lines when img is full width.
I did link in the demo another version where image could be bigger than initial space wanted without breaking the layout (base on idea that elements remain in the flow, no absolute positionning involved): EXTRA
Maybe you could try this jQuery library http://brm.io/jquery-match-height/
To use it you assign data attributes to the elements whose heights you want to match, it then calculated the height of each element to make are they are all the same. It takes in to account padding, margin, border and box-sizing.
I have a problem with some divs. In short here is what I need: 2 divs with a certain width (same width) - one with float left and one with right, and a third div that takes all the remaining space. The divs are using display : inline-block to have them on same line.
I have tried this :
<div class="wrapper">
<div class="control leftControl"></div>
<div class="display"></div>
<div class="control rightControl"></div>
</div>
And here is my css:
.wrapper {
width: 100%;
height: 100%;
min-width: 960px;
background-color: #E8E8E8;
}
.control {
width: 10%;
height: 100%;
display: inline-block;
background-color: #ADADAD;
}
.leftControl {
float: left;
}
.rightControl {
float: right;
}
.display {
width: 80%;
height: 100%;
display: inline-block;
}
The problem is that using % on some resolution causes the last div (controlRight) to be moved on a new line.I can understand why and found that if i use 79% on display the divs display almost correctly (1% left unsued.)
It is clear to me that this is not a correct solution.
Any help is appreciated.
You can put all your elements float:left and your 100% will always fit: fiddle
HTML
<div class="control"></div>
<div class="display"></div>
<div class="control"></div>
CSS
.control {
width: 10%;
height: 200px;
background-color: green;
float:left;
}
.display {
width: 80%;
height: 200px;
background-color:blue;
float:left;
}
Putting everything on float left will simply push divs one by one on the right.
I am using wordpress to dynamically display images. Each image has a fixed width of 186 px and variable height, depending on the proportions of the image. Each image sits in a square box, with 15px padding. By default, the images appear at the top of the box. I am looking for a way to vertically center the image, given its fixed width, but variable height. Here is my code:
HTML:
<div class="logoContainer">
<img src="/path/to/image.jpg" />
</div>
CSS:
.logoContainer {
padding: 15px;
background: #dddddc;
margin-bottom: 10px;
width: 186px;
height: 186px;
}
.logoContainer img {
max-width: 100%;
height: auto;
}
I could use absolute positioning, but without knowing the exact height of the image, it would be difficult to perfectly center. BUT, we do know the exact dimensions of the container box. Thoughts?
Try this - http://jsfiddle.net/vLbRF/
.logoContainer {
padding:15px;
background:#dddddc;
margin-bottom: 10px;
width:186px;
height:186px;
line-height: 186px;
}
.logoContainer img {
max-width: 100%;
vertical-align: middle;
}
Using this technique which implements vertical-align will allow you to have dynamic-height containers:
<div class="logoContainer">
<span></span><img src="/path/to/image.jpg" />
</div>
CSS:
.logoContainer {
padding:15px;
background:#dddddc;
margin-bottom: 10px;
width:186px;
height:186px; }
span {
height: 100%;
vertical-align: middle;
display: inline-block;
.logoContainer img {
vertical-align: middle;
display: inline-block; }