I would like to know if it is possible for block elements, floated in a direction, not to wrap when they exceed the width of the parent element.
That was the quick and short question, for a little more details and an example, please see below.
I have done some research about this and I have not found a definite answer of whether it is impossible or not and that is why I am looking for a definite answer here of whether this can be done or not.
And in the case that it is not possible, I would appreciate a quick explanation about it so that I can improve my understanding of how CSS works.
Please see the following example.
I have 1 "container" div and inside it I have 3 "row" divs. Let's say the "container" has a hypothetical width of 200px and each "row" has a hypothetical width 100px. These values are not specified in the css, they vary based on the content on the page.
Each "row" is floated to the left so that they appear horizontally.
<div class="container">
<div class="row">
Some text
</div>
<div class="row">
Some text
</div>
<div class="row">
Some text
</div>
</div>
.row {
float: left;
}
In this case, when the total width of the "rows" exceeds the width of the "container", is it possible for the "rows" not to wrap and to remain in a single horizontal line ?
Just to emphasize, I cannot specify an exact width for the "container" in the css because I want the layout dynamic in order to accommodate different content.
Thank you.
The behaviour you're looking for can be achieved by replacing float: left with display: inline-block, and having white-space: nowrap on the parent container.
See this fiddle: http://jsfiddle.net/XYzea/1/
Blocks inside the container are aligned side by side (like float) but their parent has no width specified. By the way, the wrapper encloses nested divs. inline-block works in all modern browsers except IE<8 in which is not possible to use that display property with any hack if the element is a natural block element
The only way I can think of is to have the container > wrapper > rows. The container can be dynamic in size and have overflow:hidden while the wrapper will keep the rows in a single line
Related
Susy is a great tool, but I feel I have come across a weakness with it. Let's say that I have three floated block elements in a "blocks" container:
The "block" element will be given a "span(4 of 12)"
<div class="blocks">
<div class="block">
//img and text
</div>
<div class="block">
//img and text
</div>
<div class="block">
//img and text
</div>
</div>
As I expand the window, the content inside the blocks gets too large for my liking, so I add a max-width to the "blocks" element. When the max-width is reached, I, unfortunately, find the blocks to be too close together... So I add a max-width to my "block" elements... but this screws up this floated layout as the third block will be floated right (last) and the first two will be floated left (causing increased space between the 2nd and 3rd elements with resize).
I am finding the best way to do this is by setting "text-align: justify" on my "blocks" container, and "display: inline-block" on my "block" elements. With this method, I can create a layout where my block elements stop growing at a certain point ("blocks" max-width reached), but then the space between them continues to increase (justified content).
To me this is a really nice and valuable layout. I've read of much praise by different people about both inline-block layouts and Susy. I was wondering whether Susy is limited in accomplishing such a layout.
Susy doesn't have shortcuts for creating inline-block layouts (because of the white-space problems they cause) — but the real power of Susy is the flexibility to do anything you want, using the supplied functions. You can do something like this:
.block {
display: inline-block;
margin: gutter(of 12);
max-width: 14em; // whatever you need
width: span(4 of 12);
}
The same idea would work with flexbox, which I find much more powerful than inline-block — and it gives you the space-between option, which would replace any need for explicit gutters or gutter-overrides.
I need an element to take the entire screen's width.
Thus, I put it under .row like so because .container adds 15 px padding, then .row takes it away to be full width again.
.container-fluid
.row
header
.col-xs-12
"content content content"
But when I inspect the header element, its height is 0.
How do I get it to automatically be the height of the contents of .col-xs-12 without hard-coding the pixel values or using javascript?
So a few things:
First of all, as per Bootstrap's docs, "only columns may be immediate children of rows." If you are going to add a header element, make it a parent element of the .row or the .container, or put it within the .col-xs-12.
All .col-xx-xx divs float left, so they are technically taken out of the page flow, which is why your header element has no height--the browser doesn't see its contents as affecting the flow of the page, so it doesn't believe it has a height. Using Bootstrap, you can add the .clearfix class to fix this, though I suggest making sure that you clean up your Bootstrap layout a bit first.
EDIT:
Also (and I suppose this should go without saying, but since your code is sparse -- and in haml?--, I want to make sure that it's true), if your .col-xs-12 has no content in it yet, you won't have a height because there's no minimum height set on a .col-xx-xx divs.
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-xs-12">
CONTENT HERE
</div>
</div>
</div>
</div>
I hope this helps!
I would need advice on how to do that I have reached the correct result. Here is a sample code.
I used the main attribute table-cell that I reached the vertical centering, but not me centered DIV #box under DIV #wrap. Neither ANCHOR vercital centering under DIV #box. ANCHOR object must align automatically without specifying the size. Images under ANCHOR may have different sizes.
All ANCHOR objects under DIV #box must align automatically without any separation into DIV blocks. Into DIV #box are automatically displayed those items that can fit in there. Sorting may not be conditional size and neither the number of items. The only condition is the height and width of the DIV #box.
Example:
Main structure
Sequence ANCHOR must not be fixed specified or limited to the number; automatically centered on all sides under DIV #box; automatically adjust the image size.
DIV #box must be aligned horizontally to center under DIV #wrap, has specified a
fixed width and height; the entire contents of the DIV #box must be aligned to the center, both horizontally and vertically; everything that does not fit in the block will be automatically hidden.
It may also be a solution via jQuery.
Thanks for resp.
If you don't allow separation in additional DIV wrappers, then it is impossible to achieve your result cleanly and with reusable non-hard-coded code.
You restrict development options (probably not your fault) by not allowing to change HTML structure.
But if there were no restrictions, then there would be multiple ways to solve this problem:
Using HTML and wrapping little objects into group wraps and a bit of CSS
Hard code CSS with negative margins, relative positioning for every single element
Achieve the same thing with jQuery / JavaScript but with lots of exceptions and computations
Because elements in HTML can be of 2 types - block and inline .
[ let's not go here into specifics of what inline-block elements and other types are]
If an element is of block type then the next proceeding element will jump to the next row , but if the element is of type inline then the next element will line up next to it if there is space in the row. The height of the row is dictated by the highest element AND NOT by a group of highest elements .
The only way to achieve that would be to wrap them into a group.
So in CODE this would look like so:
HTML:
<div id="box">
<img src="" /><p>TEXT</p>
<img src="" /><p>TEXT</p>
<span id="group">
<img src="" /><p>TEXT</p>
<img src="" /><p>TEXT</p>
<img src="" /><p>TEXT</p>
</span>
</div>
CSS:
#group {
display:inline-block;
vertical-align: middle;
}
#group > :first-child {
display:block;
}
RESULT in jsFiddle
I've messed around with a few responsive designs, and I'm curious about what CSS properties determine how float elements are positioned vertically when the overall resolution is reduced and they are scrunched together.
For example, if I have a div block with float:left and a div block with float:right, which of those end up on top when the max width of the container is reduced to the point where they can't fit inline anymore.
If you look at my fiddle, the left side element ends up on top when you reduce the width to the point where they both can't fit. Is there a property that makes it so? Does it do it in order? Is there anything I can add to the right div block that would make it above the left element when width is reduced?
http://jsfiddle.net/JXXLK/
Many thanks SO
The simplest solution to put your right div on top when the window is rescaled is to define it first in your html code:
<div class="container">
<div class="rightside">
RIDE SIDE HOMBRE!
</div>
<div class="leftside">
LEFT SIDE DUDE!
</div>
</div>
I'm not sure how this can be controlled using purely css properties.
I am having a hard time grasping the concept of vertical margins collapsing in nested elements. I came an article at http://www.howtocreate.co.uk/tutorials/css/margincollapsing explaining how it works however am confused by its explanation. So in its example it cites that there are 2 elements as follows
<div style="margin-top:10px">
<div style="margin-top:20px">
A
</div>
</div>
Seeing that the inner div has a margin of 20px, that is what will be applied for the entire block of code. What confuses me is everything after that and not yet looking about issues with Internet Explorer 7. Would someone be able to explain it for a complete newbie to CSS in a simplified manner?
Two-ish rules to remember:
If margins touch, they collapse.
Nested items "snuggle" if only margin separates them.
Elements outside the "Flow" behave differently. That is, this behavior does not apply the same to floated, or position:fixed, or position:absolute elements.
So for this HTML (nested divs) :
<div id="outer">
<div id="inner">
A
</div>
</div>
and this initial CSS:
#outer {
margin-top:10px;
background:blue;
height: 100px;
}
#inner {
margin-top:20px;
background:red;
height: 33%;
width: 33%;
}
The margin collapses to the max of the touching margins and the nested div "snuggles" to the start of the container, like so: (See it at jsFiddle.)
But, the moment the two margins are separated -- by a border or by preceding content in the container, for example -- the margins no longer touch, so they no longer collapse.
EG, just a little, non-breaking white-space , like so:
<div id="outer">
<div id="inner">
A
</div>
</div>
kills the collapse : (See that at jsFiddle.)
Using a border, instead of leading text : (Fiddle)
A diagram may help:
In case it wasn't obvious: blue = outer div, red = inner div; I've drawn them with constant height and horizontal positioning. You can work out what happens if the height is fitted to the contents etc.
The "Before collapsing" column shows what you get if the margins aren't considered adjacent, e.g. if you draw the border of the blue/outer div; but if there is no border, then you get the "After collapsing" column. The top row switches the two margins around from the example, because I think the behaviour in this case is more intuitive; the bottom one shows the example at howtocreate and is consistent with the top row.
Two-ish rules to remember:
If margins touch, they collapse. Nested items "snuggle" if only margin separates them. Elements outside the "Flow" behave differently. That is, this behavior does not apply the same to floated, or position:fixed, or position:absolute elements.
Brock Adams is correct, but I also wanted to add that "overflow:hidden" can also prevent nested margins from collapsing.