I have spent a while with solving the following problem:
I would love to wrap the "infinite" number of floated div by four in column (and different for smaller media width) by adding clear:left to the each fifth element;
I made a fiddle where it works just fine.
https://jsfiddle.net/kybernaut/zqnkxa3h/1/
But no matter whatever I do, in the real situation the layout gets broken (two last items are wrongly wrapped, when I set it back to :nth-child(4n+1), it breaks a different way completely.
Is there anything I'm missing on that page? I have no idea how to fix it myself. The class is .bundled_product
All of your .component-data containers have a first child .kbnt-items and a second child .min_max_items. The last .component-data container is missing the .kbnt-items child, that's why the third child of this container is the second .bundled_product here.
<div class="component_data">
<div class="kbnt-items">0/1</div> <!-- missing in your last component_data... -->
<div class="min_max_items"></div>
<div class="bundled_prodct">...</div>
<div class="bundled_prodct">...</div> <!-- ... that's why this one is the '4n+3' element -->
</div>
Your last item has the class ..bundled_product:nth-child(4n+3) which contains clear: left, that's why it is put in a new line.
Related
Prompt
Suppose we want to distribute a row of inline-block elements inside a div of flexible width, we consider the spaces on the far end of the first and last elements to be significant and should be part of the spacing.
Mark-up
<div id="whole-thing">
<!-- inline-block element, width shrinks to widest row -->
<div id="row1" class="row">
<!-- block element (100% width) -->
<div id="box1" class="box">
<div id="box2" class="box">
..
</div>
<div id="row2" class="row">
..
</div>
..
</div>
Picture
I.e. Turn something like this
into this:
In this case, the width of the whole thing shrinks up to the 2nd row (widest) so there's no spacing between any of the boxes on that row.
But the content in each boxes may vary, and the spacing should adjust accordingly if necessary:
Attempts
justify-content: space-between (or other styling/work-arounds to the same effect):
Is not what we want.
justify-content: space-around should be it apart from the fact that it distribute the spaces with half-size spaces on either end, which, again, is not what we want, but almost..
Compare:
js hack. Well, it works, but I am still hanging on to the hope that there's a clean way to go about implementing this.
Adding an empty div at the beginning and the end of every row div and then use space-between.
Also works, and it's how I got the above pictures of the solution. But then I would end up with a bunch of empty divs.
Should I use table layout for this (in css, not in mark-up)? If so, how?
This is making me weep. I would be thankful for any help towards a clean solution to this.
Here's a link to fiddle
Solution
Fiddle
Placing content:'' ::before and ::after the rows (these pseudo-elements are direct children of the selected) effectively implements the 4th point above (space-between + empty elements at both ends) without redundant mark-up.
I agree this should be covered by flexbox itself.
Currently we only have space-around but it's just incomplete.
ATM the best solution for you is to wrap rows inside two pseudo elements. Basically it's your solution, but you won't need to touch the actual markup since it's generated content.
http://jsfiddle.net/5rmUj/
.row::before, .row::after
{
content:'';display:block;
width:0;height:0;
overflow:hidden;
}
From my reading of the documentation, it seems that .container is the "parent" wrapper for the .row and the divs that contain the .spanX (where the x totals 12). However, it doesn't seem like there is a .row in their navigation example.
Also, on their documentation site, the .container is wrapped by a couple of navbar related divs.
Can anyone elaborate a bit on how the framework should work? I'm new to it.
The .row class is not required inside a .container, but it is a good idea to include it anyways when you start incase you want multiple rows later on.
All that .row really does is make sure that all of the divs inside of it appear on their own line, separated from the previous and the following .rows.
For the .container inside of the .navbar divs, that is a separate thing that is required to make the navbar line up with the rest of the page. If you look further down in the rendered HTML, you'll see that there is another .container that is not inside any .navbar divs, and that is the one with all of the main content.
A Complete Example
<div class="container">
<div class="row">
<!-- These divs are inline and do NOT fill up the full 12 columns -->
<div class="span4">...</div>
<div class="span4">...</div>
</div>
<!-- This is a automatically a new line of divs -->
<div class="row">
<!-- This div will appear below the previous row, even though it
would fit next to the other divs -->
<div class="span4"></div>
</div>
<!-- These will appear in their own row, but may act
unexpectedly in certain situations -->
<div class="span4"></div>
<div class="span4"></div>
</div>
In Short
.row defines a row of divs, like the name implies. Each one indicates a new line of divs, no matter if the above line is full or not.
The answer is much simpler than those given. No, .container does not have to contain any specific code, and it has no encumbrances on what contains it...
What .container does is serve as a "wrapper" to "contain" the size of any and all elements wrapped inside of it. And .container can wrap pages or components. So, if you want a page similar to those Twitter Bootstrap's docs, with a "fixed" width and equal margin on both sides, then only a single .container is necessary to wrap all of the content on the page.
There are other uses for .container as well; have you noticed how the top navbar in Bootstrap's docs (.navbar-fixed-top) spans the full width of the screen, but the nav items inside the navbar are "contained" to the width of the content? This is because the .navbar-fixed-top is not inside a .container but the .nav inside it is.
The bootstrap grid is composed of 12 columns that can be adjusted in any combination within a row as long as they add up to 12. You can think of them as containment rows such as the likes of table rows, which are meant to separate different rows of content. Within the grid, the .row container has a separate task and is there (and required) to readjust the last grid columns gutter width, which varies depending on screen size (if the responsive sheet is included). If you look at the css behind the .row class you will notice that it has a property of margin-left:-30px by default (once again it can be greater or less depending on screen size), a property which is meant to "remove" the gutter from the last column in the row; without it the grid would not readjust the gutter and it would break onto a second line.
Now, the reason why the .row container is a child of the .container container is because the .row container is only meant to separate "lines" of content, not to contain sections and more over center content in a page. As such, the reason why the navigation example did not have one was probably due to the fact that the nav elements is lacking in gutter width, since it was meant to be a full block element and not a grid, so there was no need to reset that last loose gutter.
I'm trying to centre multiple div elements on a page. Some however need to not be centered so I've ruled out using the body element for this. I've figured there would be three ways to do this:
The first would be by using a container, however this adds an element for pure layout styling and isn't very semantic.
<div id="notcentred">
<div id="container">
<div id="centrediv1"></div>
<div id="centrediv2"></div>
</div>
The second would be to create a centre class and simply adding it to each element that needs to be centered.
<div id="notcentred">
<div id="centrediv1" class="centre"></div>
<div id="centrediv2"class="centre"></div>
The third would be to add the centre CSS to each DIV's id.
<div id="notcentered">
<div id="centrediv1"></div>
<div id="centrediv2"></div>
I would think number 2 would be best, as it would be the easiest to manage, and the most semantic, but if there is anything I'm unaware of, options would be welcome.
Thanks in advance.
This is the exact use classes were designed for. So, really, using idealistic CSS the third one is wrong. The first two are absolutely fine.
Although, if you want all the divs to be similar, putting some in a wrapper div may make it harder to style their other settings. The second also allows you to more easily have centered divs dispersed among non-centered divs. The second also has fewer elements, which will make your code a lot easier to read!
With this in mind, I would recommend the second.
I am not very good with CSS, HTML and mark-up, but after having read many and many CSS articles, I just have no idea how to get the div-elements on the right place.
Current site in tables: http://daweb.nl/
Current attempt in div: http://daweb.nl/daweb/
I would like to have the right-menu and content in the right place. If you have general comments regarding the current state of my HTML and CSS, please feel free. I have worked with CSS, HTML much, but never built a site from scratch with div-elements.
http://jsfiddle.net/qJBpk/10/
Check the preview here.
This is a basic setup, you have a wrapper div which contain all your structure: a header, three columns and a footer.
Wrapper div has margin set to auto, this will allow it to be horizontally center placed (along with all its content) in the browser window.
The three columns have the float property set to left, so that each one is placed next to the other.
The footer has a clear property set to both, this will allow it to be placed after the most tall floated column, to avoid a layout crash.
Div elements are block level elements. This means, among other things, they take up all the avaiable width space, so no need to set a width for the #header and #footer divs.
EDIT
To avoid cross browser incompatibilities and issues, it's better to have a CSS reset (a set of CSS rules which will make all elements shows as much as possible the same across all browsers), like the YUI. Place it first before any other CSS code.
This is a good place to start learning about css positioning.
Also, after looking at your code, you may want to wrap certain elements in a wrapper div so you can position everything inside it with one CSS rule.
Instead of:
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
Try something like:
<div id="menu">
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
</div>
That way if you want to move the menu and everything in it you can write a CSS rule like this:
#menu {float:left;margin:15px 0 0 25px;}
just another one! ;-)
full-working-demo: http://so.devilmaycode.it/converting-tables-to-css-layers
hope this help!
Looks like a simple 3 div layout. You need to create 3 divs. One for the left, middle, and right-hand content. These three divs will be placed in a wrapper div.
So take your left_menu, content, and right_menu divs, give them a width and set them to float: left; so they will all be placed beside each other. Place them inside a wrapper div that is larger than all three. You're done!
I'm having a simple problem concerning the arrangement of floating divs with variables heights.
The goal:
The result:
I just have div containers with css float: left; and no height defined. The first red circle indicated that my technique fails, although the second one proves me wrong by showing it IS working. Unfortunately, the last (not on screenshots) just starts floating after the height of the previous one (so there's a whole empty space on the left).
How should i solve this?
Thanks!
I don't think that this is doable a 100% with "just" css, but jquery-masonry should do the trick [ http://desandro.com/resources/jquery-masonry/ ]. Well, but i hope somebody proofs me wrong :)
You have two columns. Then code it accordingly:
<div class="column">
contents of first column
</div>
<div class="column">
contents of second column
</div>
(you set float:left on the column DIVs)