Is it possible to put a whole 960 grid inside a div on the page?
I need to make a page wider than 960px, so I thought I might have the sidebars laid out outside the 960 grid, and have the 960 grid control the middle column.
Yes, you just need to assign the parent div as the container_12.
Then you can use the child elements the grid_# that works for you.
But it would be better if you updated the 960.css with the new resolution values. I.E. 1024.css
Related
Goal
Create a vertical carousel containing square items with up / down navigation across various pages. It should take up it's parent container's height and with it's width set automatically.
Approach
I used a nested grid layout, where the first grid represents a "page", taking up 100% of the parent's container. The second grid is nested in the first grid, taking up the remaining space with an equally divided height. This allows me to achieve most of what I need except that the nested grid width is not following it's children.
Problem
My current approach does not allow the nested grid to respect the children's width as seen in the above image. I need the width to be reflected correctly so that I can center the up / down buttons centrally. Does anyone know why is the grid width not respecting the children? And are there any other solutions for centering the elements aside from doing a margin offset on the 2 buttons?
Sample code
https://codesandbox.io/s/sharp-tdd-2rgb6e?file=/src/App.tsx
Note that this code does not include any translation logic, overflow is disabled so that the pages are visible.
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 have a lot of divs with different size and width. I would like to automatically place them inside another div and position them like:
Anyone know what css properties should I use? I tried with floating + display (several combinations) and nothing works for me correctly - I had divs in one line -> a lot of space (because one big element) -> next line -> and so on... and so on...
Without using Flexbox you will find it hard to acheive this layout.
Flexbox layout example
You could use a JS plugin such as Masonry which will enable you to acheive the layout.
If I understand correctly, what you want to do is place them in a container that has a set size (and probably expanding height according to its content) and then line them up the way you show. The easiest way I can think of is using Twitter Bootstrap. It has a container class and then you can align your elements within divs and it will also make it automatically responsive.
Tip: Avoid using position: absolute and height: wherever you can because it messes with the flow of your site.
don't forget to clear your floating elements when needed.
I am building a very simple page, powered by tumblr.
It has 3 columns of content in the main area. The content divs are all set to a width of 33% and floated left, most of the time this arranges itself as you would expect, but as you resize the window it seems to sometimes revert to 2 columns. Anyone know how to solve this?
The html is here: http://emilestest.tumblr.com
Try to set the .item css width to: 32%. The browser probably miscalculates width sometimes so you probably have a extra pixel or two, so the float overlaps to next line.
There is a Javascript action involved. Your article html elements gets the absolute position and some coordinates. Have a look over those scripts (or disable them, in order to use only CSS for positioning).
In your specific case, there are several solutions:
Place + size the divs with JavaScript and disable CSS layout
Use display: table
Use a table element
Disclaimer: For all those who cry out when they read table:
Using divisions to simulate a table for the display of tabular data is as much a design flaw as using tables to control graphic and page layout.
Source: http://en.wikipedia.org/wiki/Tableless_web_design#The_use_of_tables
how can I display divs with different height to be close to each other regardless of its height and with a specific margin just like buildings
I mean something like the divs in this website http://via.me
I used flaot:left but it floats only with the last div and leaves an empty spaces
this is the code that I used http://jsfiddle.net/D9rHB/6/
I think that the jQuery Masonry plugin would be what you're looking for in this instance:
Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
JS Fiddle demo.
You can do that. For that you have to have position as "absolute".
Then manually calculate the height and top value to place the div where ever you want.
For making the things easy take the width of all divs same. Also make height of divs in each
column fixed.
Let me know if you need more clarification how to do this.