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,
Related
I have a lot of divs with different size and width. I would like to automatically place them inside another div and position them like:
Anyone know what css properties should I use? I tried with floating + display (several combinations) and nothing works for me correctly - I had divs in one line -> a lot of space (because one big element) -> next line -> and so on... and so on...
Without using Flexbox you will find it hard to acheive this layout.
Flexbox layout example
You could use a JS plugin such as Masonry which will enable you to acheive the layout.
If I understand correctly, what you want to do is place them in a container that has a set size (and probably expanding height according to its content) and then line them up the way you show. The easiest way I can think of is using Twitter Bootstrap. It has a container class and then you can align your elements within divs and it will also make it automatically responsive.
Tip: Avoid using position: absolute and height: wherever you can because it messes with the flow of your site.
don't forget to clear your floating elements when needed.
So I have a post-view that I can't get to work properly, and flexbox seemed like the answer from heaven that I was looking for. Except, I can't seem to figure it out properly no matter what...
If you look at this code, there's two vertical divs that should both stretch as more content gets added to either. The div where more content appears grows accordingly, but I want the other div to match in length, and so the bottom edges to be aligned to the bottom of the flex box. The repeating images behind the two founder buttons and the "LOTS OF TEXT" should then fill up empty space down to the bottom where the bottom-edge images are.
I've been at this for a good week now and can't figure it out... I'm sorry if this is a really simple thing or I'm being dense about css, I'm still learning. Any help would be greatly appreciated.
In your .forumviewright class, add this property:
height: 100px;
That brings the baselines together.
Just tested it in Chrome Dev Tools. It works. It also works in FIDDLE. But it doesn't seem to work in the CSSDesk sample you provided.
Whether or not this is the permanent solution you're looking for, you can let me know in the comments below.
EDIT
Your question begins with:
Can't get CSS flexbox to expand properly.
Actually, the flexbox is working fine. Both columns are binded to each other and expand equally, as per the flexbox rules.
If you highlight the child divs (.forumviewleft and .forumviewright) in Chrome Dev Tools or Firefox Inspector, you'll see that both columns are equal height and track each other regardless of content size on either side.
To illustrate this, I've added a background color to each column div so you can see that the flex is working properly. No other changes to the code were made. In this example, no matter how much content is placed in either column, both color-coded columns remain equal height.
https://jsfiddle.net/eympj0yq/2/
Of course, the real problem is that the child container boxes inside these columns aren't tracking each other.
This will require some fundamental adjustments to your code. For a better understanding of this problem and how to fix it, see this post:
Height 100% on flexbox column child
Hope this helps. Good luck!
how to make 3 column layout where:
left column is fixed width
middle column is auto width (not fixed)
right column is fixed width
and all columns height are equal (but exact height is unknown)
Example:
I know i can do it by using tables, or display:table-cell, but is it possible to do it wihout using tables? I would go for table-cell but it doesn't work with older ios/android mobile devices and older browsers.
Is there some css hack available to do it without table-cell ?
Edit: In this particual case I just want to set full height color background (left: color #A, middle: color #B, right: color #C)
Edit2: I feel like 1999 table layout poltergeist/ghost is laughing in front of my face
Edit3: no js please
Have you tried using a separate <div> to draw desired backgrounds? Here, I've created an example http://plnkr.co/edit/WOaF3SZ9N8sswsxbZ116?p=preview
Take a look at my fiddle:
http://jsfiddle.net/RB9JZ/1/
I've had to use javascript to make the columns the same height:
$(".col").setMinHeight(3);
In the setMinHeight(3), 3 = number of columns, and give each column a class of col or whatever class you'd like.
This is an interesting question. Since Rich already figured out the columns, I'm going to address the issue of getting all the columns "the same height". Like you said, this is very difficult to do without table behavior. What I've always done is use background images on a div that wraps all columns. This div stretches to the height of the tallest column automatically, and if you have a repeating background, it will give the illusion of matched columns. Since you have a special case of 3 columns with a fluid width in the middle, you will probably need two divs to wrap the 3 columns, and have two background images. One aligns left, and one aligns right. Let me know if that doesn't make sense.
maybe this variant:
display:block;
height:100px;
I am building a very simple page, powered by tumblr.
It has 3 columns of content in the main area. The content divs are all set to a width of 33% and floated left, most of the time this arranges itself as you would expect, but as you resize the window it seems to sometimes revert to 2 columns. Anyone know how to solve this?
The html is here: http://emilestest.tumblr.com
Try to set the .item css width to: 32%. The browser probably miscalculates width sometimes so you probably have a extra pixel or two, so the float overlaps to next line.
There is a Javascript action involved. Your article html elements gets the absolute position and some coordinates. Have a look over those scripts (or disable them, in order to use only CSS for positioning).
In your specific case, there are several solutions:
Place + size the divs with JavaScript and disable CSS layout
Use display: table
Use a table element
Disclaimer: For all those who cry out when they read table:
Using divisions to simulate a table for the display of tabular data is as much a design flaw as using tables to control graphic and page layout.
Source: http://en.wikipedia.org/wiki/Tableless_web_design#The_use_of_tables
Maybe there is already a question about this subject, but I couldn't find it.
My question is simple,
Can I use only divs on a page layout?
I got myself in trouble to create a div with corners for example.
A_____B______C
| |
D E F
| |
G_____H______I
take all letters as divs with some background, while letter E is where the content is placed, and it is dynamic, so it can get any height, while the width will be 100% for whole window(there is another div as the menu floating left of that div, but I didn't consider it here).
in table I did that really quick with no hack, but with divs I just couldn't.
I couldn't make the height of div D and F expand correctly with divs, the rest was ok
so,
1. can div really replace tables for layout?
2. can div replace tables without css compatibility-hacks?
(btw, that wasn't my only problem with div and css for layouts where table did it easily)
Your example is completely doable in basic CSS using absolute positioning inside relatively positioned element. Take a look at this:
http://www.ulmanen.fi/stuff/box.php
So, in answer to your question, divs really replace tables for layout.
And what goes for question number two; tables should be used where tables are needed: in tabular data. If you need to present something in a table, use a table. Just don't use them for layout.
Yes.
Sadly, no. Your example will almost certainly require some "hacking" to work in all browsers. Some things that were easy to do with layout tables are very, very complex to implement using pure CSS.
For your example, the following questions should provide you some pointers to work with.
css vertical centering
How to set img tag vertical center : html + css
How to make an image center (vertically & horizontally) inside a bigger div
Not really answering your question, but Yahoo has some nice grid CSS tools that really help with doing div-based layouts. These might be useful as a reference.
http://developer.yahoo.com/yui/grids/
Yes, you can.
The 'Holy Grail' 3 column Liquid Layout
In Search of the Holy Grail—A List Apart
or, for the future (as it's not supported in IE 6 or 7), you can just use display: table to get <div> elements to lay out exactly like a table
can div really replace tables for layout?
Generally it's worth aiming for. But for everything? No. There are common table constructs which cannot be reproduced with CSS, particularly where you are mixing fixed-pixel, font-relative and viewport-relative measurements in one table. Complex liquid form layouts are the usual case for this.
In theory you could replace <table>, <tr> and <td> with divs styled as display: table-cell et al. However this won't work in IE, and is of questionable usefulness: you are still leaking the layout concerns into the markup just as much as if it were a table. (Plus you can't do spanned cols/rows like this.)
I got myself in trouble to create a div with corners for example.
You mean with image corners? That's really easy. But the trick is not to try to do it by positioning elements. Instead, use nested divs, each with its own background. For example:
<div id="foo"><div class="left"><div class="right">
Content.
</div></div></div>
#foo { background: url(mainbackground.gif); }
#foo .left { background: url(leftborder.gif) top left repeat-y; }
#foo .right { background: url(rightborder.gif) top right repeat-y; padding: 32px; }
That gives you a left and right border image laid over the main background. You can do the same three times to get a full table-like with 8 border images, or just nest divs nine deep. You can reduce the number of divs required from 3 to 2 if you can include the main background image in one of the border images (this may require very wide images if the element may grow large). You can use padding on some of the elements if you need the border images to be transparent (ie, the main background image isn't to be rendered on the edges).
In the future, this will become much easier and remove the need for so much nested markup, thanks to CSS3's proposed multiple backgrounds per element and border images.
You should make rows with the divs, as you would with tables.
Put abc in a div | let's call it div 1
Put def in a div | let's call it div 2
Put ghi in a div | let's call it div 3
Let e determine the height of div 2, and let 2 determine the heights of d and f. Using the proper position, such as position:relative, and display:table-cell you should be able to manage.
Not going to create the whole solution.