I have such url: http://xn----7sbabhi8cwaajmue5o.xn--p1ai/cars/search/by_man_and_model?by_manufacturer=115
there you could see that i have three columns
i have such troulbe: id="manufacturers-list" if i delete min, and height, i see that my li is separated in different colums
, but how to prevent this?
i didn't get why i get this separation(( why it slice my li?
css:
width: 690px;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
overflow: hidden;
The thing that's separating your content into different columns is the CSS column-count property (including the vendor prefixes.)
To explain both your images, the first looks like you have a set height with overflow: hidden which is going to conceal every single list item that flows past that height. If you have 50 list items but your container only has height enough for five, you're not going to see more than five.
The second looks like you've removed your height and given a column property.
I just looked at the site and you might want to remove the display: inline-block style from .man-area, remove overflow-hidden from the outside container (#vip-offers)
And SOMEWHERE you have inline javascript (or styles) giving that parent container a fixed height. I would definitely not recommend giving a fixed height with a hidden overflow. It just doesn't bode well unless you're trying to achieve a specific effect.
Related
I am currently in a situation where I need to do use multi-column layout mode of css.
Basically, I am creating a mega-menu where I need to have variable list items inside unordered list.
For that I need to have four columns and if content from list items are not far enough to fit within four columns, it should just stay within one column. That's why I need to have flexible height on multi-column container.
<ul class="megamenu-list">
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
</ul>
and here is the css part.
.megamenu-list {
visibility: visible;
opacity: 1;
column-count: 4;
column-fill: auto;
height: 400px;
padding: 20px;
}
After some googling I come to know that to be able to use column-fill auto, one needs to have constrained(fixed) height on parent container which is not useful as there may be the case when there are only one or two list items within container.
I already tried that thing in my other question with flex but with no luck of getting any response.
Set flex container height to flex items content height when there are only fewer items
Now I found the below discussion at github which seems to be closed but don't know how.
https://github.com/w3c/csswg-drafts/issues/3064
Thanks.
I want to do this without JavaScript. I already have a JS solution but want to know if this is possible with pure CSS.
Let's say you have a page showing products off. When the page resizes I want to have those product boxes flex with the page layout. Each one should have a max-width and min-width. A table won't work because I can't have a fixed number of columns. Depending on the browser width, there could be between 1 to 6 products on a single row. The following doesn't work, but it's the closest I've got.
#prducts > div {
float: left;
max-width: 200px;
width: auto;
min-width: 100px;
background-color: #3333FF;
height: 250px;
margin: 5px;
}
Here's the fiddle: http://jsfiddle.net/79CBq/2/
Is it possible to make a DIV do auto width and still adhere to the min/max values I set? Unfortunately width: auto only changes the width if there is content inside making it bigger.
This is just really dumb to me, because a DIV with "display: block" has the right kind of auto-width but I can't find an option to give that to an inline-block or float DIV.
What you want is a grid-system.
For your information: you can set the width of your divs in percentage (based on the width of the parent container).
If you want all <div> elements in #prducts to be 1/6 of the screen width, you should remove the width of prducts (set it to auto) and then do this:
#prducts > div {
width: 16.666%;
}
Beside the typo in #products you should know that you are using the id identifier. You can only have one html element width the id "products". If you plan to have more then one, you should change that to a class name.
I don't really unterstand what you want to do in your fiddle. You should not use tables for layout reasons. With my anweser and your fiddle, you will run into problems width the margin of the > div items, which you could easily avoid using a box based layout.
You can use bootstrap grid system, bootstrap takes care of the media queries. You need to give the div classes such as "col-md- " depending on the columnwidth and the screens you want to support. If you do not want to use the full library you could mimic bootstrap implementation for fluidic layouts.
http://getbootstrap.com/css/
I'm working with WP 3.5.1 ATM. My goal is to make the articles 300px in width, then float them to the left, then the rows stack directly underneath each other in vertical & horizontal alignment. The issue I'm having is that when it get's to the second row, it doesn't line up directly underneath the first row vertically, but does horizontally. This sometimes leaves huge vertical gaps between the first and second row, if one article in the first row is long, while the others are short.
I have never tried doing this layout before, so I'm wondering if I can get some pointers from those that have. How can I make this happen? Or perhaps a tutorial site? I googled it, but didn't find anything on the method.
Examples of my goal are mysocialcloud.com, new.myspace.com, so.cl, and this one in particular: http://www.eleventhemes.com/gridly/
Thanks.
Alternatively, if you are looking for JS-based method which offers better cross browser compatibility, try jQuery Masonry.
Float your elements as per normal, but Masonry will then reposition your elements according to the available space by absolute positioning.
If you are happy to use CSS3 then you can wrap all of your content in a div and then use the column CSS:
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
I have made a Fiddle http://jsfiddle.net/DVfGP.
I created a div with the column css and then a div to contain each element. I applied the following css to the elements:
display: inline-block;
width: 100%;
this keeps the all of the element in the same column. Hope that is what you were after.
I have have some dynamically created divs in a fixed width parent div and I would like to have them distributed horizontally. As they are dynamically created so I wont know how many are in the container unless I count them with JS, which I am trying to avoid.
I was originally trying out the "Using inline-block and justified text" technique on this page; however it seems to behave a bit erracticly when there are more children than will fit ( ie when there are two rows ), ( see the second row here ) so I don't think that will work.
*Edit: Actually I just realise now that it's not actually erratic, it IS spacing the second line correctly, but what I want instead (in this particular instance anyway ... ) is for the three red boxes on the second line to take up positions under the first three of the first line, leaving two positions free at the end, rather than spacing them out too ) .... so I think in general this technique is not likely to ever work for me.
Are there any suggestions of other ways to achieve the above. I would rather not have to use JS but if there is no other way then I am open to suggestions.
It's not failing, that's the native behaviour of floats.
If you want more to fit per line, made the container bigger or the boxes narrower.
If you don't want them wrapping at all, add overflow:auto to your container's CSS and you'll get a scroll bar.
You need to make remove the width of your container and add display: inline-block; to allow the dic container to have a width of whatever the content inside has. Also add overflow: auto; in order for the div to size to the amount of generated divs in it
#container {
display: inline-block;
background:olive;
overflow: auto;
height: 180px;
}
Perhaps use relative widths rather than fixed widths for the interal divs....
#testcontainer div {
width: 19%;
height: 30px;
display: inline-block;
background: red;
float: left;
margin: 2px;
}
DEMO
I ended up conceding that I need to use JS. I added id's to the fourth child and then in CSS I was able to remove the margin from the fourth child ( all of this I presume could have been done in CSS using nth child if I hadn't needed IE8 support ).
Edit: Finally ended up getting what I want - http://jsfiddle.net/byronyasgur/kUgBA/14/
When you specify the column-width property in CSS for a div with a bunch of text in it, the actual width seems to be automatically adjusted so that an exact number of columns fit the page. If a column-width of 400px, for instance, is specified and there's actually 1000px of space then instead of showing 2.5 columns of text (with the .5 column overflowing to the right to invite the user to pan), it instead shows an even 2 columns of text.
I found in the dev.windows.com that if you specify values for all of the width properties involved (width, column-width, column-gap, and column-rule-width) then you can achieve this, and that works, but it requires that you determine the width of your containing div and that seems silly since you want that to flow.
Here's my CSS that's not working as I'd like...
.csscolumns .columns {
columns: 400px;
overflow-x: scroll;
height: 600px;
padding: 20px;
}
Have you tried tweaking with 'overflow' in your CSS? Try the following for the selected elements:
overflow: hidden;
This will hide any 'overflowing' content of the selected elements, behind the parent elements.