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 -->
Related
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'm trying to do this when someone clicks a box:
It's seems simple, if I put the gray div inside the ng-repeat, when a user clicks a box, the new div would be shown.
<div ng-repeat="friend in friends" ng-click...>
<div>
{{friend}}
</div>
<div collapse="expand">
some content
</div>
</div>
But, what if I don't want to repeat the gray div? (Let's say it's a bunch of html that is not necessary to be repeat by each element).
So, I have this plunker, where the gray div is outside the ng-repeat.
Is it any possibility to do what you see in the image with pure CSS or some trick in angular or javascript?
I heard that I could use jQuery to inject the html, but maybe could exist a cleaner way.
Considerations:
A row could have one to n items.
What I have tried
Put the gray div with position relative, but this would not push down the other divs.
First of all your task is unachievable unless you change markup. The result should be like this.
<div class="row">
<div class="col-md-4">
Age
</div>
<div class="col-md-4">
Age
</div>
</div>
<div class="row">
<div class="col-md-4">
Age
</div>
<div class="col-md-4">
Age
</div>
</div>
For that you need to use custom filter. I took it from here
how to split the ng-repeat data with three columns using bootstrap
Since you use jQuery you can easily manipulate elements now. You can get you collapse div and append it to every row.
You modified working planker is here
http://plnkr.co/edit/WUGDcUsxqRqrrmK4I9Lh?p=preview
Been playing with boostrap for a few days and amazed at the capabilities it has to offer.
Have been trying to have a "header" of some sorts, which is affixed to the top when the user scrolls down.
You can find my current work here: http://mp3dj.free.fr/affix/site/
However you will notice that, when scrolling down, the "POST 1" suddenlty jumps to the top of the page. i.e there is no smooth scroll behind like here: http://jsfiddle.net/namuol/Uaa3U/
Current code:
<div class="container">
<div class="row affix-top" data-spy="affix" data-offset-top="60">
<div class="span12">
<div class="row">
<div class="span3">
<img src="http://www.socialfork.net/public/images/default-profile-photo-female.jpg" class="img-polaroid">
</div>
<div class="span9"><h1>Samantha Sam</h1></div>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="post1" class="box">
<h1>Post 1</h1>
<p> Scroll Down↓</p>
</div>
<div id="post2" class="box"><h1>Post 2</h1></div>
<div id="post3" class="box"><h1>Post 3</h1></div>
</div>
</div>
</div>
Any help appreciated!
What happens in your code is the row at the top changes its position to fixed when its offset to the top is smaller then 60px. The consequence is that it stops to consume any space above the next row.
In the jsfiddle you introduced there is a JS code you should understand and should help you.
This one is for you:
$('#nav-wrapper').height($("#nav").height());
It requires your header to be placed yet inside another div (class called nav-wrapper in fiddle). JQuery code above sets its height based on row height during initialization of the page. The height stays the same even if the top row disappears (of getting fixed).
Another part of the JS code:
$('#nav').affix({
offset: $('#nav').position()
});
makes you independent of the size of space above the top row, but in your case I think you do not need it (you can predict it always takes 60px).
when you use the solution from Marcin Skórzewski mind that if you're using a collapse in your navbar it effects the dropdown.
The height of the complete navbar is set using the small piece of JS code.
When your window gets smaller the navbar will be replaced with ||| (using default bootstrap)
When you're using a dropdown and press ||| to show the dropdown it will be placed behind the content below. It will not slide the content down. This is because the height of the navbar is set.
Possible solution 1: remove the height of the navbar when you click on ||| and place it back again when the dropdown slides back.
Possible solution 2: add a margin-top to the next element once the navbar sticks
update:
https://stackoverflow.com/a/15177077/1059884
an excellent solution using CSS
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'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.