Sorry, my english is not good :)
When resize the width of the window. How width of dm2 is dependent on the to-n sorted column?
dm1,dm2 is no fixed width in css.
I tried to use text-align for dm1. display: inline for dm2. It works fine, but I found it at fault. I do not know no other way handle it?
Demo Here: https://jsfiddle.net/bindo1995/m4vajbqw/2/
Default
Use text-align for dm1, display:inline; for dm2
How ?
Thanks for helping me !
The problem is that using float or display: inline-block; to-n blocks will always try to fit horizontally on one row when there is enough space for each block and when there is no space for a block it will be on the second row and there will be gap in dm2. If you want them to be 3 on first row and 2 on the second and to fit 100% in dm2 you have to make 2 rows of to-n blocks.
Related
To go into more detail, consider this:
I have a row of three divs R(right), C(center), and L(left).
They are encapsulated within a parent div Container
Container has the css style display:inline-block
I have L floated left
I have R floated right.
I have C centered by setting margin: auto.
My problem: I want the middle div to be centered until R and L collide with it. In the event that this happens (window resize). I want C to clear both, and center itself underneath R.
What is the best way to achieve such a result? I understand I may have approached the set up wrong, please advise if that is the case!
Thanks in advance!
Like #atdrago mentioned, media queries is really the way to go here.
If your widths are fixed, you can also try floating the center div to the left and putting a (fixed) max-width on the .container element.
http://jsfiddle.net/mrhps/2/ is a working example.
Would have commented, but not enough reputation. Anyway, you will need a listener for resize - it will be nasty. Media Query is the way to go as mentioned.
is a working example
.C {
margin: 0 auto;
background-color: blue;
#media (max-width: 20em) {
clear: left;
float: right;
}
}
Sorry new here, it appears I need add code from the jfiddle to post a link...oO
I'm kinda stuck here and I'm looking for some ideas. I have a breadcrumb system which uses :before and :after tags for the arrows.
The maximum width for all the breadcrumbs put together is 735px as that is the size of the container element.
Now; I need to restrict the length of each breadcrumb to stop them overflowing and to ensure that they all stay on one line. To do this, I will need to set a maximum width on the breadcrumb. However the max-width will depend on the number of breadcrumbs which are currently visible.
I know that the easiest way would be to count the number of breadcrumbs present and set a fixed position by dividing the container width by the number of breadcrumbs, but this is not what I want - It would mean that breadcrumbs with a shorter title have a large gap, like below.
So I need to specify a max-width, but the max-width will depend on the width of the other breadcrumbs.
For example, if all the breadcrumbs have a fairly long title, the max-width will need to be small enough to allow all breadcrumbs to fit in the container.
But if, say, five of the breadcrumbs have very short titles (ie 4 characters) and the fifth one has a longer title, I would want the max-width to allow all the text on the last breadcrumb to be displayed, but still ensuring that the breadcrumbs still fit inside the container.
Sorry if this is too confusing. Here's a jsFiddle of my breadcrumbs so you can understand how they're structured. If you need any more information please let me know.
http://jsfiddle.net/5CLYt/
The second example in the jsFiddle shows how the max-width needs to be dependant on the width of the other breadcrumbs, and not just the number of the breadcrumbs displayed.
Beside the answer of #JAYBEkster, you could consider using flexbox.
Here is a great resource: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've updated your fidle: http://jsfiddle.net/NicoO/5CLYt/1/
/*
COPIED FROM: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
#container {
display: flex;
justify-content: space-around;
list-style: none outside none;
margin: 0;
padding: 0;
}
I know this is not what you want, since the space between the items is growing and not the items it self. But maybe it' the right direction.
Maybe keep this question updated.
Update 2: flexbox is awesome.
It works with firefox: http://jsfiddle.net/NicoO/5CLYt/3/
All you needed to do was:
.breadcrumbButton
{
flex: 1 1 auto;
}
You should add display:table for your container; add display:table-cell for each child and remove floating;
I want to describe my idea first, check the fiddle here:
There are two divs, #left and #right, #left has a fixed width and both are floated left. Container division has no fixed width and can be resized in my design. The requirement is that #right cannot be shifted to next line. Width of #right will be automatically adjusted to the container division and overflow text will be hidden. All of the three divisions have fixed height.
In the fiddle mentioned above, I set #right 50% width to make it adjusted, which is not that perfect. The container division may not be full and shifting problem still occurs.
I can implement the layout with javascript to adjust the width of #right, but is there any css solution with the help of min-width or anything else?
Thanks a lot.
is this what you want it to be??
http://jsfiddle.net/N3jhV/
Please dont hesitate to correct me
Something like this? http://jsfiddle.net/remibreton/4qLmq/
This solution will work only if the #left element has fixed width.
Is this what you are looking for ? http://jsfiddle.net/As7Hz/14/
How about this version: http://jsfiddle.net/As7Hz/18/
Can we have an image which spans over multiple columns which is created using CSS3 multicolumn property in an Html page. Here is my column layout style
div#column {
margin-left:20px;
-moz-column-width: 250px;
-moz-column-gap: 20px;
-webkit-column-width: 250px;
-webkit-column-gap: 20px;
height: 850px;
}
I need to place an image within this column layout which spans over atleast 2 or 3 columns.
Theoretically there is column-span, however it doesn't seem to be supported by any browser currently.
You could try with position:absolute as Simon suggests, but I doubt you will can satisfactory results and I don't think there is any other reasonable workaround.
Maybe there are JavaScript libraries that can do it...
Add a width on your div and add this style
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
See reference: >>
I asked #Krishna to post this question since our other SO question/answer session Increase font size with JavaScript around fixed floated images in CSS columns was getting off-topic, i.e. it was solved and this image spanning multiple columns warranted a new question.
So, my thoughts so far...
column-span is working in Webkit (Chrome12) for me. Check out the quirksmode demo page. However, the bad news is that it doesn't help solve this problem as the image that needs to span multiple columns still gets clipped at the column-width, so I don't think it is the solution.
For now I think the only solution is to do the columns yourself in JavaScript, or maybe try and use/modify the jQuery columnizer plugin.
Oh and I just found this other question CSS3 Columns and Images which basically agrees that it is impossible without JavaScript.
There is already have a lot of JavaScript for your font increase/decrease (different question, see my fiddle) so it would have been great if CSS supported this natively. All we want is big Yoda to spill over into the second column :-)
So I think that the only solution currently is:
For each image that is greater then the width of a column, work out how much into the next column it would be (including the column-gap)
Add a spacer floating <div> in the next where the image needs to overlap to, so that the words correctly continue to flow around and below the image
Absolutely position a copy of the image over the top.
I just hope you don't want images that span more than 2 columns otherwise it's going to complicate an already complex solution!
Use position:absolute, like this:
#image {
position:absolute;
top:300px; //distance from top
left:200px; //distance from left
width:600px; //image width
height:400px; //image height
}
could one use overflow:hidden for both sides?
cause i want the row to be centered.
EDIT: ive got a row of link elements. i want it to be like: http://jqueryfordesigners.com/coda-popup-bubbles/
the row will stick out both to the left and right. not just on the right side. with other words: i want to center a very long row within a div which is styled with overflow:hidden and white-space: nowrap.
here is my code:
http://jsbin.com/afuni/edit
if the row is too long the right elements wont be shown. i want the left elements to not be shown too so that the center link will always be in center.
overflow: hidden will hide content that doesn't fit inside it's box model. Based on the question asked, I believe there is a different CSS solution for you. Can you post the HTML/CSS and your objective?
edit: to center a row that may extend outside its boundaries, I would use z-index: 100, position: relative, and text-align: center. I need to check your markup, however. Hope that helps!
Nope, you can't make the text clip from both edges using overflow: hidden, you need additional markup with negative margins etc. Not worth the trouble I think.