I'm trying to set up a fluid column layout for a site I'm working on. I'd like to do this without javascript, but it's looking like that might end up being the easiest option. Regardless, anyone know how to get this done with CSS?
Both columns need to fill the browser height. The left column contains an image with an aspect ratio of 2:3, with height: 100% and width: auto, so the left column's width will change depending on how tall the browser is. The right column needs to fill the remaining space.
I saw a trick using float:left and overflow: hidden that's working great, except the divs do not resize themselves correctly when the browser window is resized.
Here's a simplified fiddle to demonstrate the problem, with the CSS below:
.left-column {
float: left;
}
.left-column img {
height: 100%;
display: block;
width: auto;
}
.right-column {
box-sizing: border-box;
padding: 20px;
overflow-x: hidden;
overflow-y: scroll;
}
.left-column, .right-column {
height: 100%;
}
https://jsfiddle.net/v7unnhnc/2/
It seems like .left-column doesn't resize itself automatically. Any ideas?
basically your code works ok. You may add display:inline-block to your left column and you will see the img container adapt when resizing vertically, however the text won't flow properly this time.
The problem (if a problem) is that the width of your container (left one).. the one with your width:auto (and you don't really need to add it to your css as your image will set the width of the container when overflow is hidden.. when floating) won't understand the resize of the img without reloading the page even if you visually can see it.
But it's important to know as many web developers these days are too much focused into (imho) making a responsive design while resizing the window that GOAL is not that. The main goal is your web to adapt to whatever window size your users (or future users) have at the moment they load your web. And your code is right on that.
Just people like us may go into a web and start resizing manually the window to check the responsiveness.. and even then, the vast mayoritie of us with just check it resizing on the x-axis.
The chances you have to get someone notice your web not working ok when resizing the window (y-axis) is... well, I hope you have SOO many pepople noticing. that will mean you have a lot of visitors.
Related
I want to achieve that result as my web app layout:
I create application for mobile usage first. I want to fixed top menu that stretch to it content and content at the bottom of this menu. Content height can be very long but I want to use overflow-y: auto;. I use CSS display: table; for container and display: table-row; for menu and content to solve this problem. JSFiddle example here.
Which pros and cons should I expect? I.e. mobile browsers interoperability, performance issues and so on.
I had this exact same issue and I solved it in exactly the same way you did. The only issue I ran into was that the row on the bottom:
#content {
display: table-row;
height: 100%;
}
IE will not respect this and it will see height:100%; and instead of taking of the remaining space of the table like every other browser it will be equal to 100% of the entire table causing your layout to render incorrectly. The only way i found to solve this was to use a bit of jquery with a window resize function to basically only fire when it's IE and apply a pixel value height to the #content based on what it should be.
I need help in fixing my right sidebar in Wordpress so that it doesn't move around when seen in different resolution sizes on the screen?
CSS for the right sidebar
#socialsidebar {
float: right;
position: relative;
overflow: hidden;
margin-right: 200px;
margin-top: 200px;
height: auto;
width: 194px;
}
CSS for the container/page
body {
min-width: 960px;
}
.container_12 {
background: #fdfdfd;
margin-left: auto;
margin-right: auto;
width: 960px;
}
You need to learn about position property of CSS.
there are few thumb rules that you have to take care of.
avoid unnecessary horizontal scroll.
try not to give static height, cause you always have infinite height at your disposal. use height:auto for your bigger containers.
give static dimensions to such containers which you know can be accommodated on most of the resolutions.
avoid inline css - try to define generic css as much as possible.
decide the possible resolution range of your app usage. and then begin writing CSS.
and most importantly, always cross verify your CSS(as you write it) on IE(biggest challenge).
most of the time, best way to go about it is that it should be simple and easily modifiable.
see you need to look at the entire screen as a co-ordinate system whose origin is at top-left corner and Y-Axis downwards.
this is one of the best articles on CSS-Position property. Go through it. It will help you in understanding how left,right,top,bottom work.
now, I've made a super simple sample, covering your needs. i.e. right navigation and it stays stable in any resolution.
Sample-fiddle
what you should notice in this sample is, extensive usage of percentage for width, height, top, left. and position attribute.
you can modify it accordingly. or take a reference from it. one more thing, you don't need to do position:absolute, I am doing it cause, i wanted to provide dimension to the container through its top, left,right bottom attribute, you can do it through percentage and position:relative.
Hello fellow stackies,
I'm developing a site and I have a small "problem". It's not that important, the site works but it's just one of those annoying things that u keep scratching ur head about over and over.
What I'm trying to do is mix static height with dynamic height.
Example:
HTML:
< HTML >
< BODY >
< DIV class="header_with_menu" >
< /DIV >
< DIV class="main_content" >
< /BODY >
< /HTML >
CSS:
body{ margin: 0; padding 0;
width: 100%; height: 100%; }
.header_with_menu {display: block; margin-left: 100%; margin-right: 100%; height: 160px; }
.main_content {display: block; margin-left: 100%; margin-right: 100%; height: 80% }
As u can see, nothing fancy. I use a custom scrollbar javascript on main_content.
It works fine until I start screwing with the window height of firefox (or any other browser).
What I expect: When I make the window of firefox smaller and smaller, main_container will get smaller and smaller, but, remain inside of the firefox window (since it's height is dynamic, it will simply adjust because it's cool.)
What happens: The height of main_container will eventually get stuck at a certain height, which I don't specify, and content will start disappearing out of view at the bottom of the browser window.
I want main_content to stay inside of the viewscreen and auto adapt to the height of the browserwindow.
How do I do this??
It's annoying when you have a smaller monitor with just 768 px of height and about 10px fall outside of the scrollable area... And the worst thing is, I can't seem to get it behave on my own. I've tried making things absolute, they just overlap each other and now way stopping that since they're both absolute and outside of normal flow. I've tried experimenting with maximum and minimum heights in percentages for both header and only container... didn't work. Searched for javascript to auto-fiddle with my css' height or max-height percentage, didn't work out too well...
basically i've been sparing with this for two days now and I'm just not creative enough to come up with some solution.
Is there a pure css solution for this?
(P.S. I'm using 77% height now for main_content since that seems to be the perfect border: not too small for 1920x1080, and not too large so content will start to disappear # 1440x900. 78% will make content start disappearing and below 75% just makes it seem ugly at 1920x1080.)
I'm sorry for answering my own question, but the answer is: use a flow layout with a script that calculates the space to the bottom of the screen using percentages calculated by the current width and height of the window, to calculate the height of the content and/or footer div.
If I have time I'll post the script here as an edit.
First, I wonder if anyone can even say that question title ten times fast.
This should be pretty easy. I've been googling around, and while there are a lot of tutorials on it, I'm having trouble grasping the idea overall. I've even looked at some other SO questions that seem related but I've not been able to make them work.
I have 3 layers. header, menu, body. The real application is much more complicated, of course. But for the sake of this question this is sufficient enough data.
The entire page itself fills 100% width, but the content within each section will be fixed to 1024px wide. This was easily done with the reknown margin: 0 auto; style. So that wasn't an issue.
Here is the trick. The middle layer, the menu. I want the menu to overlap the border between the header and the content. Now then, doing this was also not too hard. I just absolutely position the menu and kick it down by 100px to get it to the right vertical alignment.
What I cannot seem to achieve is the horizontal alignment of the 1024px block. I've included a light fiddle and an image of the expected output (beware, jsfiddle's default preview pane is not 1024px wide, so it looks like it is working at first glance)
Update
Following the instructions at this post I was able to make it work. But it is only functioning in Chrome.
http://jsfiddle.net/dE8xE/
Desired Output (colors exaggerated for emphasis and distinction)
#site-menu {
background-color: #fff;
height: 64px;
position: absolute;
top: 100px;
display: block;
width: 1024px;
/* everything is easy when you have fixed width */
left: 50%;
margin-left: -512px;
}
Can you use percentage margins and width to achieve the effect you're going for? Setting the z-index to something greater than those of the other sections will get it to float over them. Example: http://jsfiddle.net/6xCfU/
margin: 10% 0 0 10%;
width: 80%;
z-index; 100;
When using a css background such as in the footer on the page below (in the elements div.footer_head and div.footer_footer), if the browser window is resized to less than about 1000px the divs themselves remain at the full width but scrolling right in the browser causes whitespace to appear where the background should be.
I was sure I'd find a similar question on here but can't seem to word it correctly enough to find it in search.
If someone could point me in the right direction I'm sure I can figure this out.
Look at how the divs with class footer_head and footer_footer behave when you resize the browser to be quite thin and scroll to the right.
screenshot http://printanomics.unbranded-nomads.co.uk/picture-2.jpg
You need to add a min-width:1000px to .footer-container.
.footer-container {
float: left;
line-height: 1.5;
margin-top: 20px;
width: 100%;
min-width: 1000px; /* add this */
}
This will mean the smallest width the .footer-container will get is 1000px. Though after that it will expand to 100%.
If you have a look at your css file you will see that the footer width is set to 100% and not 1000px as the other divs. This also applies to your background as your background won't be bigger than the div itself.
I don't know if you use this, but Firebug is a very good Firefox plugin to identify troubles in CSS files.