I'm using Fluid 960 at the moment, and I'm getting some weird behavior with alpha/omega. My understanding of alpha/omega is that it's used to fix left/right margins in nested grids.
However, when I apply alpha/omega to a pair of nested grids, the left hand side grid has a really shallow indent while the right hand side grid has a large right-hand side indent (visual observations). Anyone know what's going on?
Its only needed for nested grids eg.
<div class="container_12">
<div class="grid_2">sidebar</div>
<div class="grid_6">
<div class="grid_2 alpha">
1
</div>
<div class="grid_2">
2
</div>
<div class="grid_2 omega">
3
</div>
</div>
<div class="grid_2">photo's</div>
<div class="grid_2">advertisement</div>
</div>
Works as expected now.
I think nested grids won't work in Fluid 960. Widths of grid are defined in term of percentage, instead of exact pixel.
Take previous answer as example, grid_6 will translate to 48% of width, then a grid_2 inside grid_6 will translate to 14.666% * 48%, but the expected of 14.466%.
I am also facing the same problem and may have to revert to non-fluid version. Please suggest if there is a solution or I am wrong.
Related
i read a article from here http://victorshi.com/blog/post/How-to-make-a-div-center-in-Bootstrap3 that how to center a div when using bootstrap framework.
their code
<div class="row">
<div class="col-lg-6 col-lg-offset-3 text-center">center</div>
</div>
i just like to know why they use col-lg-offset-3 ? why they did not use col-lg-offset-2 or col-lg-offset-4 etc.
please guide me about the above code sample. thanks
col-lg-6 is a div with width 6 columns (out of 12). The col-lg-offset-3 pushes the div 3 columns to the right. In this case, the row displays a div of half width (6/12 columns) in the center of the div (3/12 pushes 6/12 to the middle).
All of this is documented very well here. I would encourage you to read the documentation and experiment before posting questions to stack overflow in the future.
Its like using margins in this case it adds a dynamic margin-left based on column width.
Using bootstrap, how can we make the height of two columns exactly the same?
For example:
<div class="row">
<div class="col-md-6">
Too much in here
</div>
<div class="col-md-6">
A little here resulting in shorter height
</div>
</div>
All I found through google or other posts asking the same thing here either did not work or if it did, it killed the responsiveness of bootstrap.
For example the flex technique works but it kills the responsive effect of bootstrap.
What is the proper and standard solution for this?
I just started to use angular ui-layout to allow splitting panes in a UI.
I'm trying to create a sidebar that has this blue element on the bottom
Is there a way to trick the ui-layout directive to achieve this? I tried doing size, but that just does absolute sizing, I want the bluebox just take up some space (showing 100% of its content) and the element above it needs to scroll and take up the rest of the vertical space.
EDIT: added the HTML
<ui-layout options="{ flow: 'row' }">
<div ui-layout-container> top part </div>
<div ui-layout-container> blue box</div>
</ui-layout>
I don't know why you want to use ui.layout, but I would not recommend to use it to achieve what you want.
ui.layout uses flex box model and you can use it by yourself without using another invasive javascript layout. You can fully achieve what you want using css only.
This is what I did to achieve what you want only using CSS. http://plnkr.co/edit/0mSxkNC5wl6WTbWc81z6?p=preview.
<div class="container flex flex-column">
<div class="top flex flex-row flex-auto flex-stretch">
<div class="flex-auto">Top</div>
<div class="sidebar">sidebar</div>
</div>
<div style="background:blue">Bottom</div>
</div>
If you are very interested in using Flex layout, I would recommend to use Angular Material Design, and it is advanced and makes more sense than ui.layout.
To know more about flex box, you can see this example.
http://plnkr.co/edit/lxx7QCwZbeZyyUtwiCym?p=preview.
Here's the basic layout of a page I'm working on:
alt text http://www.mfrl.org/images/pagelayout.png
What would be the best/easiest way to order the divs?
C may or may not be visible (it's a news alert that only displays when there is news).
A = Header, B = Menu, E&F = standard content columns, D = latest blog post.
I'm thinking ABCEFD might make the most sense, but I could also see ABCDEF. Either of those should be fairly easy to do right using floats... is there a better way? Maybe put CEF inside a "middle column" div?
You'll probably have to do something closer to ADBCFE.
Remember that divisions floated to the right have to appear first, then divisions floated to the left, then the main division that will expand between them. So A will obviously be first. Then D will float to the right, B will float to the left. It is a good idea to use a separate division for the middle and put C at the top followed by F floated to the right and E floated to the left, or however you want those two to work out in the middle there.
Consider accessibility when choosing what order to put your divs in the document. For example, screen-readers tend to read from top-to-bottom in markup order, so putting the content (C, E, F, D?) earlier in the page may be better.
If you can't make a workable CSS layout with your content arranged that way, at least consider adding a link with a target that jumps to the content so that people who use screen readers navigate your site more efficiently by jumping over the (presumably static) header and menu when viewing multiple pages on your site.
I would make a header div = a and a body div {b,c,d,e,f}. Inside the body div i would group {e,f} or maybe {c,e,f} in a div
But thats just my 2 cents
There are many ways to do this. Here is what I would do:
<div id="header"></div>
<div id="A"></div>
</div>
<div id="main">
<div id="left">
<div id="B"></div>
</div>
<div id="center">
<div id="C"></div>
<div id="E"></div>
<div id="F"></div>
</div>
<div id="right">
<div id="D"></div>
</div>
</div>
I've been searching for this solution for a while now... [bla bla... google.. bla]...
I have created an example where I'm almost there, but not quite:
http://www.mikael-sandbox.com/puzzlecss/
What I have left here is that I want the number 1 to always be in the lower right corner. This is the case as long as I have ONE single row of blocks, but as the row breaks, the row is moved up. I want it to stay down. Any thoughts?
If the elements are being dynamically added to your page (even if they aren't), it would seem that the obvious solution would be to reverse the order of them. The elements that would extend beyond the bounds of the container are going to always wrap below. Found a couple links that may offer some insight regarding float and wrapping.
http://archivist.incutio.com/viewlist/css-discuss/33948
http://css.maxdesign.com.au/floatutorial/introduction.htm See "Where will a floated element move to?"
Edit
Is your container fixed width, and will your bit divs be consistent width? If so, then you know you can fit X number of bit divs on a row in your container. With that in mind, you would wrap a "row" in a div, and clear it on both sides. The sample below achieves the results I believe you are looking for. I'm fairly certain that you will not be able to achieve this with pure CSS. Floats just don't work the way you want them to.
<div id="container">
<div id="row_wrapper" style="clear:both;">
<div class="bit">10</div>
<div class="bit">11</div>
<div class="bit">12</div>
</div> <!--End row_wrapper -->
<div id="row_wrapper" style="clear:both;">
<div class="bit">1</div>
<div class="bit">2</div>
<div class="bit">3</div>
<div class="bit">4</div>
<div class="bit">5</div>
<div class="bit">6</div>
<div class="bit">7</div>
<div class="bit">8</div>
<div class="bit">9</div>
</div> <!--End row_wrapper -->
</div> <!--End container -->