I'd like to design a horizontal line of tiles. Ideally I'd like something like this:
http://jsfiddle.net/GolezTrol/BDb5K/ found in another post by GolezTrol.
But centered. I have a lot of trouble centering elements, and these have been no exception. What is the best way to center (and space out) a structure like this?
EDIT: this is what I want - http://i.imgur.com/5DIOk.png
One way would be to give the #container element a fixed width and then apply this style:
margin: 0 auto;
That will work for horizontal alignment, if you're after vertical alignment as well take a look at this page which has a working example for most (if not all) browsers.
If you don't have a "religious" objection to tables, they may be your best solution.
Related
Can anyone tell me why I might have seemingly random "holes" in my grid layout? I'm using Zurb Foundation.
Even though it is a basic grid layout, some columns floats to the right for no apparent reason. It looks like there is an article missing once in a while, but if you look in the markup, you will se that there are no empty divs pushing things around and the div elements seems to have the same classes and styling?
There are no actual items left out - everything from the database is printed, but the holes are "consistent" in terms of where they are relative to the surrounding items, so it seems like it is related to the content, but I can't see anything in the content suggesting that the problem should lie here.
Link to the site
try adding min-height to the divs medium-6.
.medium-6 {
width: 50%;
min-height: 270px;
}
I'm working on a mobile site, which has a fluid layout. On the main page, I have a table which contains a few products.
Each product has 3 divs: product-image, product-name and prices-container.
I can't seem to figure out how to align the prices-container div horizontally across the table-rows.
I'm thinking that there would be 2 approaches to this problem: either product-name always takes the height of the highest product-name across the table-row, either prices-container always sticks to the bottom of my product table-cell. Can't seem to figure out how to apply any.
Here's an illustration of the problem.
Left image shows my problem and right image shows how I would like it to be.
This wouldn't be a problem if product-name would have a fixed height, but due to the fact that this text is dynamic, I cannot know what height it will have. Might be one line of text, might be 10 lines.
I created a CodePen, where you can check my code and the problem >>here<< (I know it looks ugly, using background-colors to figure out faster what's happening).
I'm using Jade for my HTML and Stylus for my CSS.
Limitations:
- must be CSS & HTML only, I would prefer not using Javascript
- solution must be suitable for fluid layout (width is set with percentage)
- cannot use a fixed height of product-name, this being a dynamic text
Any ideas how to do this? Thank you! :)
add vertical-align:bottom; css style to .box1 class.
Similarly, add same style for .box4 css class.
Thanks,
I'm going to create a horizontal grid layout with CSS. (And I'll make it to scroll horizontally by JQuery and this solution. Please note that scrolling is not my problem. my problem is about creating the grid)
This is an example:
I have searched the internet about CSS Grids, but it seems that they can't help me...
My Question is, how to create something like the image above? Which plugins, or css properties should I use for this purpose?
EDIT: I want to have fixed number of rows (I mean, the number of rows should not change when I resize the page. there should be an scrollbar instead.) (I will use it inside a div with overflow: auto)
display:table, display:table-row, display:table-cell, display:inline-block
These css properties can help, just look them up on your local css information site.
The table-values let every element behave like a table, without actually using one. This may be a good solution for your problem.
The inline-block-value solves the overhang problem some floating layouts have as the blocks are displayed inline, just like imgs. There is little support for this in old browsers, of course.
Right, worst question in the history of web design. Who cares, just choose an option. So my question is like this...
What is the best answer to be standards compliant and (backwards) browser compatible?
jQuery used for layout which is supposed to be reserved for css and html
OR
Negative margin, extra containers , or other hacks or bloat?
Already spent too much time on this but looking for the "professional" way to do it.
EDIT: Here is a code example using Alexander's method.
Usually I use pure css/html solution which works in 99% cases:
I have a parent div with background-repeat on 'Y' axe. The general structure is going to be like this :
html:
<div id="container" class="clearfix">
<div class="LeftPane"></div>
<div class="CenterPane"></div>
<div class="RightPane"></div>
</div>
css:
#container{
background:url(imagePath) 0% repeat y;
}
for background image you can apply image for the borders, or everything else what can make users to think that all 3 blocks have the same height
There are many ways of successfully doing that, I think the easiest one of them is to simply wrap them all in a common parent container, set his display to table or table-row No need for parent at all. and set the original <div>s to display: table-cell;
jsFiddle.
For compatibility I'd suggest jQuery. Hacks and extra containers make your code bloated, as you've said, and will end up making it more difficult to edit if changes need to be made. And anyways, HTML is the layout of the page.
I have come up with a revolutionary new method for equal height columns. It is a pure CSS/HTML solution, tested in the latest Chrome and Firefox, and IE7-9. It is a bit tricky to set up but once it is done it works beautifully. The problem with every previous solution I have seen is that it doesn't actually create individual, side-by-side divs that can have their own borders, margins, etc. Other solutions always have some columns overlapping which means you can only contrast the different columns by changing the background. This method allows any column to be any height unlike some methods. The secret to its success is using float: right instead of left. If it was floated left you would have issues with extra space on the right causing scroll bars. Perhaps the only down side with this method is that it can be hard to wrap your head around!
Check it out here.
http://jsfiddle.net/wRCm6/2/
In the following jsfiddle I have put some html and some css. I'm trying to not have each element wrap when the screen gets smaller. Actually I'm trying to implement the jqueryUI slider inside of my container. I've tried to implement several css fixes to get each element to line up side by side. However they initially wrap. If you play with the size of the results box for the fiddle below you will see that it does in fact wrap.
http://jsfiddle.net/webdad3/UaQQt/
What am I doing incorrectly
Not sure if I understand your question... You want all those seven-line tables arranged on one row, not wrapping under each other? If so, how about something like
.post-content { min-width: 85em; }
If you want them to stay arranged in a 3x3, maybe display:table is what you need...