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).
Related
I have in my layout a container that has 3 columns and should have many elements.
If all elements have the same height it looks very nice, but if one of them has a different height it will move the entire row instead of just one column.
This is how it looks:
This is how it should look:
How can I do that with bootstrap (v3)?
This is my html
To achive that, if you don't want to have a fixed height in elements, I think you should follow a column based strategy instead of row based one because your cols do not have an equal height, so when floating the break the flux you actually want.
But if you want it to exactly have it like in your design, I suggest using JavaScript.
how to make 3 column layout where:
left column is fixed width
middle column is auto width (not fixed)
right column is fixed width
and all columns height are equal (but exact height is unknown)
Example:
I know i can do it by using tables, or display:table-cell, but is it possible to do it wihout using tables? I would go for table-cell but it doesn't work with older ios/android mobile devices and older browsers.
Is there some css hack available to do it without table-cell ?
Edit: In this particual case I just want to set full height color background (left: color #A, middle: color #B, right: color #C)
Edit2: I feel like 1999 table layout poltergeist/ghost is laughing in front of my face
Edit3: no js please
Have you tried using a separate <div> to draw desired backgrounds? Here, I've created an example http://plnkr.co/edit/WOaF3SZ9N8sswsxbZ116?p=preview
Take a look at my fiddle:
http://jsfiddle.net/RB9JZ/1/
I've had to use javascript to make the columns the same height:
$(".col").setMinHeight(3);
In the setMinHeight(3), 3 = number of columns, and give each column a class of col or whatever class you'd like.
This is an interesting question. Since Rich already figured out the columns, I'm going to address the issue of getting all the columns "the same height". Like you said, this is very difficult to do without table behavior. What I've always done is use background images on a div that wraps all columns. This div stretches to the height of the tallest column automatically, and if you have a repeating background, it will give the illusion of matched columns. Since you have a special case of 3 columns with a fluid width in the middle, you will probably need two divs to wrap the 3 columns, and have two background images. One aligns left, and one aligns right. Let me know if that doesn't make sense.
maybe this variant:
display:block;
height:100px;
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.
I am developing website everything was done and successful , but my problem is please look attached images , if browser is in maximize position the website looks neat but in minimize situation everything comes closer and text is overlap by another, please suggest me.
Try using % value of width and height of html elements instead of its pixel values in style sheet.
Since you didn't provide actual source code, i have to guess. I guess your page layed out using tables. And either elements have no width property or they have width in percentages like . The black top bar on the first images seems like it made with a table with two columns, second column being align=right.
For table layouts to work, you should set all columns' width to some constant number. Especially first rows' columns' width must be set.
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/