I have a layout in which there are three columns all stacked by floating to the left. In the inner div, I have 4 columns in which three columns are floated left, 1 floated right. This results in not being able to select any text. If I remove the float, I'm able to select things but it messes up the layout.
The page can be found here: http://2006scape.com/services/hiscores
What I've tried: I've tried changing the z-index on various divs, checking all float to see if there were any conflicts and I've been unable to locate the problem.
The inner layout should be done with a table. A ranking table is tabular data.
Tables are not all evil you know...
Live Example
Related
I´m searching for ages now but I can´t find a solution ... so hopefully you guys can give me a hint? :-)
I have an unknown number of elements (div´s or li´s) with unknown amount of content.
These elements I want to center, also if I have more than one row of elements. If the height of the elements are different (because of different content amount) the elements need to align vertically on the top of each row.
I created an image to make it more clear what I need and what I was able to achieve up to know Please click here
So my first approach was:
Make the div´s to display as "inline-block".
But this way I don´t have them aligned to the top.
Second try was:
Set the divs to float and then center them somehow.
Therefore I found lot´s of ideas here already.
But all of them seem to work only as long as I have one row of elements. With having two or more rows, the centering is gone.
What I found and tried:
– Centering multiline floated elements
– How to center multiple divs inside a container in CSS
– How do I center float elements?
– http://upshots.org/css/css-horizontally-center-a-row-of-floated-elements (which was probably closest to what I need but works only with a known number of elements in one row)
– and more in similar directions ...
Any ideas? :-)
Thanks so much in advance!
Cheers,
Manuel
I am working on a product page layout that has two columns with various height items. I am trying to avoid nesting the items in two column containers, so that I can have optimal order of elements on small screens that go to one column.
The problem I am running into is that sometimes the second block (floated left) is longer than the first block (floated right), and sometimes the opposite is true. The problem occurs when the third block is given clear: left to make sure it's as far right as it can go, the fourth block will not go above the top of the third block.
Here is a CodePen with the code: http://codepen.io/anon/pen/jAQdEK?editors=1100#anon-login
What you want to do looks like a layout table to me. Using display types table, table-row and table-cell might be an easy and solid solution for that. See:
http://codepen.io/wortwart/pen/grQqzv
I am working on the interface for a small web module and am having some problems with the CSS. Right now I have the container DIV and then tables to layout the sub-sections. I am floating 3 of the tables left and 3 tables right, which until now has worked great.
I recently added a feature that allows for additional fields to be added by the user as needed and as the height of a table in the right column grows, it breaks the layout. Is there a better way to do this so that the layout won't break?
After adding "clear:left" and "clear:right" to each table, it appears as follows...
After moving the 3 left floated tables to the top of the code and removing the "float:right/clear:right" from the other 3, it works well except for this.
For each float left, add clear:left, for each float right, add clear: right.
It'd depend on the order of each floated container though. Another option would be to try keeping one set of floats from one column (i.e. the float lefts or float rights) and remove the float property from the others in the other column so they wrap to the side of the floated boxes.
EDIT: a working example: http://cssdesk.com/Xan5j
It would be better to show a live example of this, but the easiest way to handle this—if this is an option—is to wrap each column in its own div.
I'm working on my blog which when viewed in > 1020px wide will look like this, using three columns which will load posts in left to right (i.e. place post 1 in the left column, post 2 in the middle, three in the right, then start from the left column again):
This works great, however when the browser reduces down below 1020 the layout will convert to a single column. This is visually easy to achieve by placing the columns underneath each other (looks fine), but this causes the posts to be out of order - the first three posts if there were 9 posts total would actually be post 1, 4 and 7.
I want to maintain the cleanliness of pure CSS managed layout, so I'm wondering if there's a trick to having the above three column layout with floated elements in a single container (rather than three columns).
I've played around a little bit with just floating left and clearing after every three tiles, but that of course just ends up placing every three tiles in a 'row' underneath the tallest tile in the 'row' above.
I know you said you wanted pure CSS but the jQuery library Masonry is specifcally designed for this kind of stuff.
http://masonry.desandro.com/
Otherwise I have not found a good way of achieving this with pure cross browser compatible CSS.
I need to make a page which makes use of the 960 grid system which has a multi-row column. What I mean is I have three columns in a 16 column separated into 3-10-3 but on the last column, I need to make several divs for news feed, ads and also a "follow us on..." box which will all be aligned vertically. Refer to the picture for a visual pov.
Is there a way to this on 960gs? It seems like I can just pile divs of equal width in the column but I don't know. Help please
I've got it, turns out instead of using more divs with 'grid_x' classes within a grid column, you can just use normal divs with no classes and it will automatically align to the parent div.