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.
Related
I am trying to achieve the following layout for one of the pages I am building using bootstrap 4.
Sections 1 and 2 are basically container fluids with col-4/col-8 and col-5/col-7 layouts and have a background image or background color.
On top of this I have to place a div with some text and button, and depending on the placement, left or right column, the content must be confined to the size of container i.e. left and right margins same as set by container. This also needs to be responsive in nature.
I have tried adding margins based on media queries that seems to be a very ugly solution.
How do I achieve this in a more efficient way?
Thanks!!
I've looked for hours on how to do this and have tried numerous experiments which get me some, but not all of the features I need on my landing page. Once I get the final piece of the puzzle in place, it seems to break other pieces I already have working. So it seems I can solve the problem in pieces, but I fail when I try to combine the pieces. Perhaps there's a conflict between them that can't be resolved? I'm pretty sure this is something that can be accomplished.
Let me attempt to explain what I'm trying to do:
I need two divs that sit side-by-side on my landing page when it's in a wide format (wider than 320px), but I want the two divs to stack on top of each other when the web page is not wide (< 320px). This is easy enough to accomplish by using: style="display:inline-block;float:left;" on each div and the two behave as I want. However, this breaks down when I try for other needed features, such as:
The contents of the left div (which is also the top div when 'stacked' due to a narrow browser window) need to be centered both horizontally and vertically within that left div in both the wide (>320px) and narrow (<320px) page formats.
The contents of the right div will be fixed at 320px wide and 420px high in both page formats as I'm using a facebook plugin to post status updates.
The left div size should scale dynamically with the browser window size as follows:
When the page width is > 320px, I want the left div to be the same height as the right div (420px) so that the contents in the left div will be centered vertically with respect to the contents of the right div.
When the page width is < 320px, I want the left div (which is now stacked on top) to only be 50px high, and the right div (now stacked on bottom) to remain fixed at 420px high.
The contents of the left div should always stay horizontally and vertically centered within that div no matter the width or height of the left div.
Can it be done with pure .css, or is a javascript hack necessary?
Hopefully I've explained it well enough that someone can help me out - it would be greatly appreciated and will allow me to move on with coding the rest of the page.
Thanks
I want to create a table with 3 columns: On the left and right fixed-width columns (which are obscured by position:fixed - divs) and in the middle a variable width column.
This does NOT work:
<table>
<tr>
<td width=202px></td>
<td> [MYCONTENT] </td>
<td width=200px></td>
</tr>
</table>
The problem is, that for some reason the browsers (tested on Chrome and Firefox) think that I don't really mean it when the browser-window is not wide enough: The outer columns are cropped and width-setting ignored, therefore the real content is sliding under my divs and become completely inaccessible.
The only idea I have left is to use a 1990's-era transparent pixel resized to 200px width, but I shudder at the thought. There must surely be a better way?
(BTW, yes I have tried various pure-css layouts, and none was suitable, for example if you use overflow:auto for the middle column, the scrollbar at the bottom also scrolls(!!) that means if the page is both higher and wider than the window, you have to first scroll down to see the scrollbar, then scroll horizontally, then maybe scroll up again to see what you wanted to see in the first place. I also tried to use padding: to force the needed margins on the left and right, but this also was ignored when the browser-window was not wide enough.)
ok - here it is with tables.
http://jsfiddle.net/sheriffderek/wAGKp/2/
i guess the short answer would be - take the styles out of the html and use a selector. (class in this case" and then min-width --- and width... also - keep in mind that padding and margins will change the width of your stuff... so you could use the border-box method... (it's rad) and included in the second... makes it so that padding stays in the original div size --- hope this helps.
and here it is the way i would do it. (without tables...)
http://jsfiddle.net/sheriffderek/GBtdy/1/
Tables are for tabular data, if you want to layout content you should be using CSS.
I recommend using something like Twitter Boostrap if you struggling with the CSS.
If you really just want a specific solution have a look at the results for terms like "css 3 column layout fluid center - I am not fobbing you off with that, there really are great answers there that are exactly what you want, and lots of search results will take you to those pages (especially to the manisheriar.com and A List Apart articles).
You can use min-width (on the middle div) and max-width - as well as media queries - to help control what happens in smaller windows.
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/
How do I create a fit/fluid/fit column layout with CSS? By fit I mean the column width is that of the content in it. I do not want to set a pixel or percentage width for the outer columns, I want them to be the width of the content within them. I've resorted to using tables for the time being but it feels very wrong. Any suggestions?
Found a CSS only solution. Just tried it, works great.
http://www.thecssninja.com/xhtml/sangraal-layout
At first glance it seems like a 'fixed'-'fluid'-'fixed' layout, but you'll find if you remove the fixed widths on the right and left column that the columns 'fit' to the text you provide, and the center remains fluid without the center column or the container needing to know anything about the widths of the left and right columns.
Truly the Sangraal.
http://jsfiddle.net/Mutant_Tractor/bDdq9/1/
Not using table, but maybe you can have a look there http://www.alistapart.com/d/holygrail/example_4.html that seems to be very similar of what you need.