Hey guys, after hours of playing and fiddling with this layout I have run into a problem with .post section of the following site. Basicly I wanted to responsivly crop the post image into a square while I couldnt work this out myself I did find this interesting article covering what I thought to be the solution. I then implimented the design and wanted to create a box that contains the post which is responsive. However after trying to float the left and right side of the boxes it didnt work out. I then attempted to absolute position the right hand side which works however is now not responsive and will overlap other content on window resize.
What is the best way to fix this?
Start by describing what’s broken and providing the code that shows it is broken, and maybe a screen shot of how you expect it to look.
At this point, I’m not sure what needs to be fixed.
You will (almost) never use absolute position to create columns like this because absolute elements are removed from the flow and cannot be part of the flow of a fluid document. That means it is impossible to have a footer under an absolute column in a fluid layout.
A 2 column layout is easily achieved in a number of ways but my favourite is to use display:table and table-cell properties as they are robust and easy to use. You only need to set the width on one of the columns and the other one automatically fills the available space. They also give you automatic equalising columns into the bargain so you can have column colours that always finish at the same point.
Floating 2 columns is not that hard either unless you have one fluid width column and then it’s best to just float one column and then use margins for the second column to move to the side of the float (or apply overflow:hidden if visible overflow is not required and then margins are unnecessary).
For modern browsers you could use flexbox and get a 2 column sticky footer easily into the bargain.
There are also ways to do this with inline-block but need a little coercing to kill white space nodes.
Also be careful with throwing in 100% heights everywhere as 100% will refer to the full viewport 100% which means should your element start after a header then 100% will take the element well below the fold. 100% height only works on unbroken chains of parents that have height set and in that case it means your element can never grow. Min-height 100% will only work if the parent is height:100% and you cannot have further nestings as min-height:100% is height:auto and you can’t base height on auto heights. Do not try to match columns using height:100% or min-height:100%. Just use display:table and display:table-cell to do this automatically and with ease (or flexbox).
I haven’t offered code because I think that as this is a learning experience it is best for you to try yourself first:)
2 Likes
Sorry I was assuming that by giving my very poor description and the link you would work it out haha. Sorry about this il ensure to post more structured postes in future.
This is great and I think im coming around to the idea of using display : table. Im off to do some research into this now. Thank you
I have taken what you have spoken about and applied this to the section using dispaly:table and actualy made a very easy and nice table layout. However now I have a more of a responsive image and resize problem that im stuck with.
Iv attached some images to show you the issue however the issue is that when I resize the browser the table deisgn changes leaving me with images and cells that look out of place.
Expanded
Shrunk
Normal view
The cod for the site is as follows
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href=style.css>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<title>Fixed Nav Bar</title>
</head>
<body>
<script>$( document ).ready(function() {
$('.cropped-images img').each(function() {
if ($(this).width() > $(this).height()) {
$(this).addClass('landscape');
}
});
});</script>
<nav>
<header></header>
<p>Our Offerings</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<p>Our Blogging Interests</p>
<ul>
<li><a href="#">Random Crap</a></li>
<li><a href="#">Random Crap</a></li>
<li><a href="#">Random Crap</a></li>
<li><a href="#">Random Crap</a></li>
<li><a href="#">Random Crap</a></li>
<li><a href="#">Random Crap</a></li>
<li><a href="#">Random Crap</a></li>
</ul>
</nav>
<div class="content">
<section class="featured">
<div class="featuredTop">
<h2>Backpacking in Toulouse Backpacking in Toulouse </h2>
</div>
<div class="imgContainer">
<img src="http://www.wns.com/Portals/0/Images/HeaderBanner/desktop/1933/85/India_HD.jpg"/>
</div>
<p>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. </p>
<div class="featuredBottom">
<date><a href="#">Posted 20 Feb</a></date>
<div class="readmore"><a href="#">Read More</a></div>
</div>
</section>
<section class="post">
<div class="postLeft">
<ul class="cropped-images">
<li><img src="http://www.wns.com/Portals/0/Images/HeaderBanner/desktop/1933/85/India_HD.jpg" /></li>
</ul>
</div>
<div class="postRight">
<div class="postTop">
<h2>How to travel with no money</h2>
</div>
<p>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas.</p>
<div class="postBottom">
<date><a href="#">Posted 20 Feb</a></date>
<div class="readmore"><a href="#">Read More</a></div>
</div>
</div>
</section>
</div>
<footer>
</footer>
</body>
</html>
CSS
html,p,a,h1,h2{
margin: 0;
padding: 0;
}
body{
width: 100%;
max-width: 1800px;
margin: 0 auto;
background: #EDEDEA;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.5em;
font-size: 100%;
}
h2{
font-family: CaviarDreams;
font-size: 1.7em;
font-weight: 500;
color: #3C3B3F;
}
nav{
float: left;
left: 0;
top: 0;
background: #505C6D;
width: 20%;
min-height: 100vh;
}
header {
background: #3C3B3F;
background-image: url(_images/logo.png);
background-repeat: no-repeat;
background-position: center;
min-height: 25vh;
}
nav p {
font-weight: 300;
display: block;
line-height: 3em;
text-align: center;
color: #fff;
border-bottom: 1px solid #627288;
}
nav ul{
font-weight: 100;
margin: 0;
padding: 0;
}
nav li{
list-style: none;
padding: 0 5%;
border-bottom: 1px solid #627288;
}
nav a{
text-decoration: none;
color: #C9C9C9;
display: block;
line-height: 2.8em;
}
nav li:hover{
background: rgba(240,229,229,0.20);
}
nav a:hover{
text-decoration: underline;
color: #fff;
}
.content{
float: right;
height: 100%;
max-width: 80%;
}
/*featured posts */
.featured{
margin: auto;
width:90%;
border: 1px solid #E2DCDC;
background: #F2F2F2;
margin-bottom: 1%;
}
.featuredTop{
border-bottom: 1px solid #E2DCDC;
line-height: 3em;
overflow: auto;
}
.featuredBottom{
border-bottom: 1px solid #E2DCDC;
border-top: 1px solid #E2DCDC;
line-height: 2em;
}
.featured h2{
float: left;
padding: 0 2%;
line-height: 3em;
}
.featured p{
padding: 1% 2%;
}
.featured date{
font-family: CaviarDreams;
font-weight: 300;
color: #3C3B3F;
font-size: 0.9em;
padding-left: 3%;
}
date a {
padding-left: 20px;
background: transparent url(_images/posted.png) no-repeat top left;
text-decoration: none;
}
.imgContainer{
margin: auto;
max-width: 800px;
max-height: 400px;
overflow: hidden;
}
.featured img{
max-width: 98%;
width: 800px;
height: auto;
padding: 1%;
}
.readmore{
float: right;
padding-right: 3%;
font-size: 1.1em;
font-family: CaviarDreams-Italic;
}
.readmore a{
color: #9C6718;
text-decoration: none;
}
.readmore a:hover{
color: #F1B253;
text-decoration: underline;
}
/*Standard posts */
.post li {
width: 100%;
height: 0;
padding: 100% 0 0 0;
overflow: hidden;
display: inline-block;
vertical-align: top;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
right: 7%;
}
.post li img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
width: auto;
}
li img.landscape {
max-width: none;
max-height: 100%;
}
.post{
width: 90%;
display: table;
margin-left: 5%;
border: 1px solid #E2DCDC;
background: #F2F2F2;
margin-bottom: 1%;
}
.postLeft{
display: table-cell;
width: 30%;
border-right: 1px solid #E2DCDC;
}
.postRight{
display: table-cell;
width: 70%;
}
.postTop{
display:table-row;
}
.postBottom{
display: table-row 2;
padding: 2%;
}
.post h2{
padding: 2%;
width: 100%;
}
.post p{
padding: 1% 2%;
border-top: 1px solid #E2DCDC;
border-bottom: 1px solid #E2DCDC;
}
footer{
clear: both;
height: 20vh;
background-color:#3C3B3F;
}
Edited the table with some min and max heights to restrict the layout from breaking when resized. The HTML has remained the same as in post 6.
Do you think this would work as a responsive layout?
/*Standard posts */
.post li {
width: 100%;
height: 0;
padding: 100% 0 0 0;
overflow: hidden;
display: inline-block;
vertical-align: top;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
right: 7%;
min-width: 250px;
}
.post li img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
width: auto;
}
li img.landscape {
max-width: none;
max-height: 100%;
}
.post{
width: 90%;
display: table;
margin-left: 5%;
border: 1px solid #E2DCDC;
background: #F2F2F2;
margin-bottom: 1%;
}
.postLeft{
display: table-cell;
width: 30%;
border-right: 1px solid #E2DCDC;
}
.postRight{
display: table-cell;
max-width: 70%;
}
.postTop{
display:table-row;
}
.postBottom{
display:table-row 1;
padding: 1% 2%;
max-height: vh;
}
.post h2{
padding: 2%;
width: 100%;
}
.post p{
padding: 1% 2%;
border-top: 1px solid #E2DCDC;
border-bottom: 1px solid #E2DCDC;
min-height: 28vh;
}
.post .readmore{
float:right;
}
footer{
clear: both;
height: 20vh;
background-color:#3C3B3F;
}
I’m looking at post #6 right now. Will get to post #7 after finishing #6. You might explain what you are talking about in post #7. What is “the right track” to you? and where is the HTML? or is it the same as in post #6? if so, please say so.
Back on post #6, I do not see any square images on my PC. I do see 2 rectangular images.
Why are you using JavaScript for anything at this stage of development? and what is it supposed to do that can’t be done more easily and universally with CSS? jQuery 1.4.2 is rather old. If you must use jQuery, then becoming familiar with a more modern version would be a good idea.
Sorry corrected previous post
In regards to the jQuery this was to crop and center the wide image into a square. Its strange that this is not working on your Pc, could you try refresh the window? Mabey the script placement is not working correctly.
I was playing with this script that I found online and tried to impliment it into the design as a way of needing to upload two images one square and one landscape.
Is there a better way to crop a landscape image in CSS whilst keeping it responsive?
Is the JS a “plug-in” or did you write it? If you wrote it, then I would be grateful if you would explain to me how it works. I am not JS knowledgable at all.
The jQuery function seems to be written with a newer version of JQuery in mind. The version of jquery in your script tags does not work on my PC (WinXP and Firefox) whereas the following version (1.9.1) does. At least the lower image becomes square… the top image remains rectangular.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Yes, this can and IMO should be done with CSS without using JS. Every time some operation of a web page becomes JS dependent, then some users are excluded or that function may not work for some. I’m not a fan of unnecessary dependencies.
Before I address the “HowTo” question, though, I must ask what “responsive” means to you. eg: There is no such thing as a “more responsive” image, so an explanation of what that really means would be remarkably helpful. What your plan is for resizing the page?
I’ve not looked at the CSS but, this statement suggests to me that you still haven’t internalized the concepts of responsive design. The layout does commonly change at different widths and your job as the designer is to adjust the content and layout to fit harmoniously within the changing widths. Using constraining heights and widths is not usually the way to do that. Eliminate the overall heights and widths except as needed… eg the page may need a max-width at desktop widths. Code from there.
Are you thinking mobile first or desktop first? I go the desktop first route because that’s how my brain seems to visualize best. Mobile first seems to offer some code efficiencies. Ultimately, though, it’s the coder’s choice. What’s yours?
In your page, I would probably assign the image as a background-image with {background-display:cover;} inside a box whose aspect ratio you contol with vertical padding. That should be fully responsive (fluid) at all widths aspect ratio notwithstanding. No JS cropping required.
The JS is a plugin which I linked to in my initial post. However the Js basicly detects if the image is landscape or portrait and then uses the the css to create a square crop. Im only applying this to the last image as the top image needs to remain portrait.
In terms of responsive I requre the page to to scaleable over multiple desktop and mobile browsers, I will be inplimenting @media at breakpoints however i do not want the .post and .feature to break on small browser width changes. In terms of responsive images I reqired the .post image to remain square at all times (on desktop resolutions) @media to change to landscape for mobile.
In terms of table i was refering to the post from PaulOB, I have applied a max width to the body and centered the contend for desktop sizes. In terms of mobile first I am more inclined to code the desktop site first as then impliment the mobile version.
I would love to apply a background image then cover however these images will be pulled form WordPress and thus im asuming you would need them as IMG rather than background images, unless you know of a better way?
landscape? 
I have been tinkering with it and that is exactly what I did.
images are images. We need either a URL to the image or the actual image itself. Doesn’t matter which. Foreground or background is in the coding.
You need to validate the CSS. There are 4 significant errors.
You didn’t mention taking notice of the jQuery version, but you should. If you don’t, it will fail on some comuters.
You should aim to create one version and that version should be able to adapt to desktop and mobile devices with the aid of media queries. I mention that because some coders actually write separate stylesheets to accommodate different devices. So far, you site doesn’t seem that “needy”.
I see that .content is floated. I recommend avoiding floats for framing. There are much better/easier techniques available today such as display:table/table-cell.
I used floats when toying with the .post portion of the page and that works well. Haven’t looked much beyond that except to notice that .content is floated. I wouldn’t have done that.
Dump the list item for one image, too. It’s inappropriate.
Your descriptions are very helpful. Thank you for taking the time to give the details.
I’m reluctant to experiment too much further with the code until I have a better idea how this page will work overall… how the content will fill the page.
OK, I put together a limited demo showing how the lower image can be coded to be responsive from desktop width through narrow device widths.
This is ONLY about the bottom image and text. It does not consider the menu column because I’m not keen on the way the menu column is structured on the page.
<!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>template</title>
<!--
https://www.sitepoint.com/community/t/overcoming-floats-and-absolute/255162
safeasfcuk
-->
<style type="text/css">
* {outline:1px dashed blue;} /* TEST Outline. To Be Deleted */
.outer {
max-width:960px;
margin:0 auto;
}
.postTop {
overflow:hidden;
}
.postLeft {
float:left;
width:30%;
min-width:200px;
max-width:300px;
padding:1.5%;
}
.postBox {
padding-top:100%;
background-image:url("http://www.wns.com/Portals/0/Images/HeaderBanner/desktop/1933/85/India_HD.jpg");
background-size:cover;
background-position:0 0;
}
.postRight p {
line-height:1.4;
padding: 1% 2%;
}
date a {
background: transparent url(_images/posted.png) no-repeat top left;
text-decoration: none;
}
.readmore {
float:right;
}
.postBottom {
overflow:hidden;
padding: 1% 2%;
}
@media screen and (max-width:400px) {
.postLeft {
float:none;
width:auto;
max-width:none;
}
.postBox {
padding-top:53%;
}
}
</style>
</head>
<body>
<div class="outer">
<section class="post">
<div class="postTop">
<div class="postLeft">
<div class="postBox"></div>
</div>
<div class="postRight">
<h2>How to travel with no money</h2>
<p>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas. Quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat. Nulla mollis sapien sollicitudin lacinia lacinia. Vivamus facilisis dolor et massa placerat, at vestibulum nisl egestas.</p>
</div>
</div>
<div class="postBottom">
<date><a href="#">Posted 20 Feb</a></date>
<div class="readmore"><a href="#">Read More</a></div>
</div>
</section>
</div>
</body>
</html>
That’s the sort of thing I would do with server-side scripting which removes any client-side dependency (that could be drifting OT).
Thought there is css for this. The new object-fit property can allow you cover on foreground images.
Though it is yet to be supported by Microsoft’s browsers. 
http://caniuse.com/#feat=object-fit
There is a semantic consideration between foreground and background images, whether the image is actual content (foreground), or merely decorative (background).
Agreed the img in the ul does not seem appropriate, maybe if it were a gallery of many images/thumbs it could be a list.
1 Like
You can easily reproduce background-size:cover for foreground images with a little extra css.
Of course as with background-size:cover you may lose the focal point of the image if the image aspect ratios differ wildly.
2 Likes
Thank you for taking the time to answer. I did mean landscape sorry got that mixed up.
I was wondering how it woud affect the flow of the document if I used background images?
I was thinking if you could offer a valid way of achiving this without JS then i would scrap the JS all together.
I will definatly only use one version of the site that then is managed via @media instead of mulitple layouts.
After discovering the display:table earlier in the post I am tempted to redesign the site using this instead of floating the nav and the content and then clearing the footer.
I will def loose the ul from the images
1 Like
This seems to work perfectly! Could you take the time to explain the code a little?