I have some trouble making my design work. I looked around the web a lot, but I can't find what I'm looking for.
I'm trying to make something like that: concept design
The thing is that I started by doing that with CSS only, but it's not the good solution, because if my picture has a different ratio or another reason, it will not work at all.
What I'm trying to achieve is that inside a div, I have one big image and in the other div (floating left or right), I want two small images, one over the other, taking the same height as the big one. All this (the two divs) should take 100% width of the body, but I don't really know how to achieve that. I'm not sure to understand how to make height responsive with the width...
I also have some weird margin between my images... Can you help me delete them as well?
So my code is via this link: http://codepen.io/anon/pen/MygaEB
Someone (Giovanni Perillo) suggested me to have this Javascript code:
var div1 = document.getElementById("colonne-gauche");
var div2 = document.getElementById("colonne-droite");
var height1 = div1.offsetHeight;
var height2 = div2.offsetHeight;
if (height1 > height2) {
div2.style.height = height1;
}
else {
div1.style.height = height2;
}
The thing is that it's not working at all. I'm sure it's a code I could use, but I'm not sure how to make it work in my code.
EDIT : I tried to look what I was able to do with Flexbox, but it doesn't seem to work. Flexbox allow two box to be side by side, with the same height, but it need to be the same width as well. What I want is something more responsive like the big image is taking 3/4 width and the two images (in the same div) are taking 1/4 width, but they have the same height in total as the big image. I'm sure it's totally possible to do that like all masonry layout, but me it's not really a masonry, but something that stay the same : One big image and two little, but responsive depending of image size.
EDIT 2 : The code needed should allow to change the width of each divs to make sure that they have the same height (without changing image aspect ratio). It should work with different images aspect ratio as well. The example bellow show a div with three images, but that's just to say that div should change width dynamically to have the same height.
Javascript is not necessary. You can accomplish this with just CSS. To make side by side divs equal in height you need to make html and body have a height of 100% then you have to specify a height for your container div (this can be a percentage or a specified length). In this case I used a height of 500px for the .section class. Then for the inner containers you need to specify a height of 100%. Then each image within that container needs a specified height, for one image use 100%, for two use 50%, etc. I also removed your inline styles. I also removed the section tag.
Here is the updated codepen.
Update:
To preserve aspect ratio change the height of the img tags to auto. Also, change the height of the .section class to auto. I also change the width of .colonne-gauche back to 65% and the width of .colonne-droite back to 35%.
divs are block elements. you can set display:inline-block; to make them align side by side.
Related
The images can be wider than the width of their container or smaller than it. To control the width of larger images, I can use max-width: 100%. Similarly, I can also set width:100% for smaller images.
Is there any way to set image width to 100% only if the original image is at least 50% of its container width? I will prefer a CSS based solution if it exists because the images will load dynamically.
var containerDiv = $(".container");
var image = $(".img");
image.width(image.width()>containerDiv.width()?containerDiv.width():image.width());
Since the images will load dynamically, I think your best shot is with javascript. You'll need to get the width of the image (Determine original size of image cross browser?), and then you can compare that to the parent of the image, and determine if it's above or below 50%.
UPDATE:
Considering the question didn't provide any sample code, I didn't want to just guess. But, the pseudo code would look something like this:
// after ajax completes
var image = jQuery('.image'),
parent = image.parent();
if (image.width() * 2 >= parent.width()) {
image.css('width','100%');
}
i'm working on this project with Bootstrap3 and this little problem came up.
I need when the page resize que last div of this block keep the same height always.
I thought about something like setting the height to 100% but since there's divs above them with diferent height they height for 100% still different.
Maybe something using calc() but I still dont know.
Here's a picture to check whats happening:
How about just define what height you want the div to be in px instead of percentage. for example :
height = 320px
So I am redesigning my website: http://staging.slackrmedia.com/keenanpayne/, but I am coming across a small issue. I want each "pane" of the website to be the exact height of the window, no matter what the size. I also want the content therein to be exactly positioned in the center.
I am trying to accomplish this with jQuery at the moment:
function setSectionHeight() {
// Set section heights
windowHeightPadding = $(window).height() / 2;
firstSectionPadding = ($(window).height() - $('header').height()) / 2;
// Apply proper styling
$('section').css({"padding-top":windowHeightPadding,"padding-bottom":windowHeightPadding});
$('section.home').css({"padding-top": firstSectionPadding,"padding-bottom":windowHeightPadding});
}
setSectionHeight();
// Adjust section heights on window resize
$(window).on('resize', function(){
setSectionHeight();
});
So what this is doing is calculating the window height and dividing it by 2, so I can set the top and bottom padding on each section.
However, for the first section, to get the proper top and bottom padding, I need to subtract the height of the header, which is why I have a firstSectionPadding variable.
Then I just add the CSS to each section tag on my website, with separate styling for the home section tag.
This works pretty well, but as you can see when you visit my site, for some reason the heights are not correct.
Right now it looks like:
And it should look like:
I have absolutely no idea where this extra padding or space is coming from on the top. I think my equations are right, but perhaps there isn't something I'm taking into consideration?
This could be done with CSS. One div set to 100% height and width, with text-align:center; A second div within set to display:table and 100% height and width. Finally, a third div set to display:table-cell and vertical-align:center;
I am currently trying to position an element in a way that it always is at the bottom of it's parent. What's special here is that none of the heights or widths are known. I'd like to do this without tables, if at all possible (my superior is against using those. In a very religious way).
I tried the approach of using position:relative on the parent and position:absolute; bottom:0; on the box I want to have at the bottom. This, however, causes the box to overlap with the other content of the parent div since absolute positioning causes the parent to ignore the height of the positioned element. Some JavaScript is used to align the heights of the floating divs to each other. But disabled JavaScript should not completely break the layout (as in: cause content to overlap or break the "flow" of the page).
Here's the fiddle with the exact structure of my markup: http://jsfiddle.net/vbeC2/27/
I did read the "float: bottom" question on SO, but none of the answers really adressed my problem, hence the new question.
It's not the cleanest solution, but since you were already using the maxHeight bit to calculate the sizes, I just added a second each loop to check the max-height of the bottom section, and added it, so that the relative, absolute positioning would work.
http://jsfiddle.net/robsterlini/svcGB/ or http://codepen.io/robsterlini/pen/BcDyt
EDIT When you resize your browser it won't work, but you could just add a resize event that recalculated it, and you'd need to think about creating some javascript-less fallbacks, either using modernizr, or just some simple
Please find the working demo here: JS Enabled
Modified the jquery logic to calculate the height of the maximum height of the container as shown below:
$(document).ready(function(){
//Set the height of the columns to the highest value of all columns
var maxHeight = 0;
$(".same-height").each(function(){
var k = $(this).children('.headline').innerHeight() + $(this).children('.description').innerHeight()+$(this).children('.bottom').innerHeight();
maxHeight = Math.max(maxHeight,k);
});
$(".same-height").css({"height" : maxHeight});
});
If JavaScript is disabled then you should apply different styles as shown in demo here:
JS Disabled
Here is something similar to what you want to atchive but the demo is centering the
http://css-tricks.com/centering-in-the-unknown/
You should use the same trick : using css ::after/::before pseudo classes to set your footer content in your parent div
I am using the following jQuery to work out the width of a div (thats in %), to then tell another div to set it's height to that in pixels.
<script>
$("#top").height($("#left").width());
$("#bottom").height($("#left").width());
</script>
It's working really well. Now my next problem is, that I want my div called 'wrapper' to have a padding-top or margin-top of the pixel value it returns for the height. I tried changing 'height' to 'padding-top', but that didn't seem to work.
The end result is a web page with a series of 4 black div acting as a border around the edge, it calculates 5% of the with of the window, and that determine's the pixel value for how how the top and bottom black div's are. That way it's exactly even. Now I want my inside wrapper div, to start exactly that far down the web page too.
Use the jQuery outerWidth function to retrieve the width inclusive of padding, borders and optionally margin as well (if you send true as the only argument to the outerWidth method).
Tested Solution: Find height of a div and use it as margin top of another div.
$('.topmargindiv').css('margin-top', function() {
return $('.divheight').height();
});