The grid column takes more space than is necessary for the item to fit in.It is the last item in the grid. If I try to set bigger width to the element it keeps expanding both ways and even though it has space on the right side ( as shown on the picture ).
Do you guys know why the grid is giving it additional space?
Have you tried to add 'overflow-hidden' to the grid container to see what happens? Also don't use fixed width 'w-32' instead use 'w-full'.
Related
I have a masonry grid to display products and in some cases the first item's border move to the next column. It doesn't happen always and I can't find the reason for this to happen.
Link to the page:
http://en.naaman.b24online.com/b2c-products/tsb-163746/
Thanks.
One solution would be to create a wrapper around each box, so the box with border is inside and cant be breaked
OK. I found that the height of row of the pins (defined as #columns) is too short. I added the height for the different screen sizes and it seem to work.
Not sure why the row is not taking it's full height.
I hope you will understand me. There is a wrapper with width of 360px, it allows only 3 columns of divs. I just want to be able to drop in another div anytime I want and then all previous will be moved along. I have a problem, it seems like divs go to next row but they align verticaly to the tallest one from previous row. Please have a look at the example below (I had to use a picture as the code wasn't showing right). The last green one should be touching the tall red one from above. I am not looking for static positioning it has to be automatic so when I change wrappers width to larger more divs will automatically be included in the rows.
Below is the image of a wrong result.
Masonry script is the closest as I can get to what I need, shame it is JS...
How to format a table using CSS such that:
the table is within the screen that the browser's horizontal scroll bar doesn't show up and users don't need to scroll horizontally to see the right side of the table;
the cells use as much width as necessary, that a column containing cells that only has numbers such as "1", "21" will not use a width that's much wider than necessary to show all the numbers in all cells in that column, say 4 character width, i.e. using much more than it means wasting horizontal space;
for columns containing very wide cells, or more precisely, content that will occupy large width if allowed, use as much width as possible such that 1) and 2) are not violated, and if the whole content of the cell can't be displayed, let horizontal scroll bar show up for that cell.
Is this doable in CSS for latest Firefox and Google chrome on Windows and Mac OS X?
My first attempt was based on CSS: Constrain a table with long cell contents to page width?, using nested divs with position: relative then position: absolute. The size of the absolutely positioned div isn't taken into account, which is good for the table's width but bad for the row's height: it doesn't expand to include the scrollbar.
Then I tried table-layout: fixed as suggested in How can I set a <td> width to visually truncate its displayed contents?. That also accomplishes the goal of ignoring the size of the cell's content, but in doing so makes it so that we can't specify, as before, that the last column should take all leftover width.
See also: Why does overflow:hidden not work in a <td>?.
These tips may help:
1- Do not specify any width for your cells
2- When you insert a page automatically there is a Style created and assigned to it which says:
width: 100%;
go ahead and delete it. that way your table will become very small and adapt itself to the content of the cell.
3- Use nowrap property of the cells for the fields that you want to stay in one line like numbers, but do not set it for larger texts and allow it to be multi-line.
4- You may want to set a width for your table or put the table in a panel and set a width for the panel.
I am not sure how to show the scroll bar for just one row, but I think if you show them in multi lines you don't need that option.
I am trying to create a list that will float on the right side of an image.
So first of all to understand better, here is the fiddle :
http://jsfiddle.net/xpGbD/1/
Both the list and the image are contained inside a mutual DIV that floats.
What I am aiming for, is for the list to have a Key:Value pair, but some of the values are much longer than others.
This produces a problem, that when the value is greater than (DIV) - (Image) , the list jumps ABOVE the image, UNLESS I specify a fixed width for the list when floats right.
The problem is - I do not have a fixed IMG width , so if the width of the image is 100px for example, this will produce a large gap between the list and the image.
On the other had - if I fix a width on the LI elements , it will work, but will break if the image´s width will become bigger...
So the questions is :
How do I float the LIST elements to the right of the image without specifying width ??
Ps - another related problem :
at the current state - When a list VALUE is long , the key is positioned ABOVE the value. I would like it to start on the same line, and if needed to flow , flow below the VALUE areaa ,and not the key area (hence the )
Let me see if I've got the point...
When you try to float HTML elemets with unknown width, set the CSS property
display: inline;
To all floated elements.
Note that, the elements with different widths will not have an arranged grid view (table view)
If you want a table view : then you should specify width or use Table tag.
Hope this helps you.
Fiddled with absolute positioning yet?
http://jsfiddle.net/k4Rh8/
You going have limit the max width of the images, what's the problem in resize few images? Anyway, when you click at the image it will appears bigger right? Maybe a light box... And there's no wrap with a fidex width at your content right now, try this way...
Take a look, there was no fixed width at the div headblock...
http://jsfiddle.net/xpGbD/11/
Try to resize the image and see if it works as you wish.
The one with the min-width:
http://jsfiddle.net/xpGbD/12/
Just to register, maybe cold help someone in similar cases.
I have two <div>s on my page. I want to arrange them side-by side, so that the first (right) shrinks to fit it's contents (unknown width), and the second (left) expands to fill the remaining horizontal width.
The two columns do not need to be equal in height.
Additionally, I would like to create a 5px gap between the edges of the two boxes.
Is this layout possible without using a table?
EDIT:
Here's a table version to show you the kind of behavior I'm looking for.
I think one of my answers on another question solves this:
xHTML/CSS: How to make inner div get 100% width minus another div width
Am I understanding your question correctly?
Yes it is! You can float the first column left, and play with margins to create your gap.
http://innonesen.se/test/l-41-mod/
Ths should do it ( tested only on IE6 and Opera ).
Additional feature exist that the main container will stop expanding ,
when sidebar is less then 100px wide .
http://innonesen.se/test/l-41-mod/no-right.html
P.S. sorry , i cant past URLs .. my rep is too low.
Sure, here are two different fiddles showing how you could do it. The #float example uses a float: left and then a margin-left on the other div that equals the #float width.
The #absolute one uses one absolute column of fixed width and then the other column sets a margin-left that equals the #absolute column's width.