I have a question regarding fluid layouts. I'm building a responsive site, and I have a Listview I've built with DIVs. What I'm trying to do is this:
I have a list of items, each with several different data entries (title, year, genre, options), each in their own DIV (all of them are inside a wrapping DIV). 2 of those have a fixed width, like the date (YYYY-MM-DD). It's always the same width, as is the options (2 icons).
How do I build this so that the title and genre div have fluid widths and change, and the date and option div stays the same width.
I've tried setting widths in percent, but that means it recalculates as I resize the window. I want date for example to have the same width on all break points. No matter if you view it on the iPhone or desktop.
Appreciate any and all ideas!
Give everyone the fluid width ie- width:90%, only you have to do is to define min-width:240px; only for the elements you want to fix those widths results they'll no more be stretched further the limit.
Related
I have the following layout I need to solve
I understand that the whole idea of the responsive design is to leave the height to adjust to the content, but for this particular work the customer wants it this way no matter how I have to figure it out but I'm struggling hard to achieve it
In my mockup I have a 100% height and weight body, and then a container taking 85% height of the body size.
Inside that container there are the following elements:
A Top div container with the company logo
A Progress bar with a step number
A small div with some instructions for the current step
A Div containing the form elements that the user has to fill
A bottom div with 2 navigation buttons
The content should be always visible no matter the device used (see image below)
Number 4. has a inner scrollbar with overflow-y because that content will change
In order to do this i set heights in percentage (%) for each div within the container, however I need some padding for the elements, but when the browser resizes or the device changes height and width the elements overlap each other
I don't want to rely on a bunch of media queries to fix this. I wonder if anyone can find an approach or some reference for this since i can't seem to find it
Thanks
If you don't want to use many media queries, I think you should use Jquery (or Javascript) like this:
Fixed height of all div except FORM CONTENT (include padding, margin, border with box-sizing: border-box). You can use some media queries for best style.
Use Jquery to calculate height of FORM CONTENT (this is scrollable content)
Example:
$('#form-content').height($(window).height() - X);
// With X = total height of other divs includes margin, padding, border
Call this script in $(document).ready(...) and $(window).resize(...)
Hope this help.
In this article, it is said that, "There's one thing that you must always do in your template, and that's set the size of your items." I want my items in a list view to fill the size of the parent container, however, how should I properly calculate this size to adjust to different screen resolutions?
This article may be useful to you...
WinJS, ListViews and Limiting the Number of Items
if you are looking to fill vertical space. You may be able to adapt to handle horizontal space as well.
I have a request to make a HTML/CSS 3-column layout that meets these criteria:
middle and right column have a fixed width
left column has a max-width
the 3 columns are horizontally centered
ff the browser's viewport gets shrinked and the left border of the left column touches the left border of the viewport, then, by further shrinking the viewport, the left column starts shrinking in width until width is 0. (like in this example, except for that here the left column also has a min-width).
I could not find such a layout. If it is possible, how do I achieve this? (Telling me, it's not possible, would also earn the checkmark).
Here is a guide to responsive layouts and another to some responsive frameworks you might consider using to achieve what you need to.
Generally it's good ettiqute on the stack network to try and create code yourself and then post specific questions if you get
stuck.
I need to build a layout similar to the one at www.PInterest.com, where - depending on the browser width (yes responsive design) the amount of columns varies. The problem is not the horizontal stacking but the vertical. How do i make the boxes different height and stack on top of each other som that it will not let the highest box determine the height for the entire row?
Using ASP.NET MVC 3, HTML/HTML5, CSS/CSS3
Make three elements (div, for example), that are fluid in their width. These will serve as your columns. Put the elements you want inside each column with the respective <div>.
I just made this as an example: http://jsfiddle.net/N4zkF/
I think viewing the example would be more helpful than me explaining it in words. The three columns are bordered in red, blue, and green. The content of each has a gray/black background and a fixed height.
This answer was edited. Last time I linked the wrong jsfiddle (was wondering why I got a downvote). Hopefully this will help you, OP.
u need to set the width of the colums with a percentage and have a min-width on each of the columns..
Say u want 3 column's,for a responsive design -- set the width of all 3 columns as width:33% and add a min-width for the least resolution that you are supporting,
say,1024x768 in that case -- 1000px is the total width that you might have at the minimum (ignoring the extra 24px for the browsers scroll bar on each sides).. so,let the min-width:333px.. so,if the width of the browser is more,it'll occupy the space.. else,min-width will be set anyway so you need not worry about the layout getting screwed..
here's a fiddle to get you started - jsfiddle.net/mvivekc/XwYDr
here's a nice tutorial that i stumbled upon
-- http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
-- http://css-tricks.com/the-perfect-fluid-width-layout/
I am searching for a three column layout (Full screen) with header and footer (Not Liquid/Fluid design). i.e.
when I re size my browser then my content should not be replaced.
Also, no matter how any of the three column is longest footer will
come in the bottom.
Last, even if there is no content on the 3 columns to fill the page, footer will come in the bottom.
(Also need suggestion, which method is useful to keep my design constant in almost all major browser , is it %(table, tr,td), px or em ?)
In other words, Just like facebook.
IF you're looking for a 3 column design you'd best go with div elements and using a certain % for each column. If you'd use a fixed width in either px or em, you can end up in troubles (columns moving to below each other) upon resizing too much. However, if you use a percentage and resize, you'll get problems too below a certain resolution, but for larger resolutions % are usually more perfect. A downside of the percentage approach is that you can't always lay out the page like you'd want exactly, since the percentage makes the columns change in width depending on the screen viewed on.
Making sure the footer is below the columns can be achieved by using a clear css tag on either the last column, or on an br element after the column but before the footer for example.
Update:
An example of the 3 column layout with footer on bottom: http://puu.sh/9tga
Example with 3 column, header, footer: http://puu.sh/9tm6
Example with fixed header and footer: http://puu.sh/9toj
Sounds like you could use Twitter Bootstrap and use the 3 column layout (or choose among the other ones).