I have been trying to find the answer online but I might be searching for the wrong keywords.
I am trying to understand how to make 2 columns layout with image being full column width and text being in container (hope I am explaining correctly, see image for visuals). I'm looking for the clean way to do this that would match margins of my other containers.
Would anyone be able to help me understand how to make this work with HTML and CSS.
I tried making two columns and then adding padding to the text column which does not match my other containers.
Related
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!
I'm making blog template. In article/post list, i want to create layout like this, i don't know what name this layout, it's like notes in android version of Google Keep
I try to create the layout using simple box div with css float:left but the result is like this, there is a leave blank space when box change line, and the next box start horizontally in new line
So, is anyone knows how to make layout like that without using two column of div? or maybe there is any javascript plugin to solve?
This is a javascript solution, but have you thought of using something like Isotope or Masonry? http://isotope.metafizzy.co/
So, is anyone knows how to make layout like that without using two column of div?
It's a bit of feature abuse, but you can set the outer div to use text columns and then layout the inner divs in 2 columns with display: inline-block.
Column direction flexboxes won't fill the horizontal space automatically even if you allow them break because they only break if they are somehow constrained in that direction and height usually is not constrained in documents.
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,
Maybe this has already been answered and I am searching incorrectly, but here is my problem. I have an MVC project where the view needs to look like a table. So, I am using a div with spans inside of it. My problem is that I need the data inside to be vertically centered. When I set my display to inline-block I cannot vertically align because some of the data may wrap and become two lines. So, this throws out using line-height. Then I tried to make my span display values to be table-cell. This works and I can use vertical-align:middle, however then I am unable to set a fixed width. And, I need this to look like a table, so the fixed width is required or else it looks horrible.
Here are my attempts thus far, and I know the css needs cleaned up, but I would rather fix this first atm.
http://jsfiddle.net/Scorpionb/ukMfX/ (The scrollbars cause the entire row to misalign)
http://jsfiddle.net/Scorpionb/QzFc3/(white-space:normal; and removed overflow to get rid of the scrollbars)
http://jsfiddle.net/Scorpionb/H6ATy/ (trying to treat it as a table)
Hopefully this makes sense, but I have run around so many circles now that I am losing track of what works and what does not. So, ask if you have any questions.
Also, this is an ASP MVC project, so I am tying each row of data to a form to be submitted and bound to a model
You should really be using tables for tabular content.
You might also benefit cleaning up your CSS by using shorthand CSS. Some useful ones to get you started:
font
border-width
How do I create a fit/fluid/fit column layout with CSS? By fit I mean the column width is that of the content in it. I do not want to set a pixel or percentage width for the outer columns, I want them to be the width of the content within them. I've resorted to using tables for the time being but it feels very wrong. Any suggestions?
Found a CSS only solution. Just tried it, works great.
http://www.thecssninja.com/xhtml/sangraal-layout
At first glance it seems like a 'fixed'-'fluid'-'fixed' layout, but you'll find if you remove the fixed widths on the right and left column that the columns 'fit' to the text you provide, and the center remains fluid without the center column or the container needing to know anything about the widths of the left and right columns.
Truly the Sangraal.
http://jsfiddle.net/Mutant_Tractor/bDdq9/1/
Not using table, but maybe you can have a look there http://www.alistapart.com/d/holygrail/example_4.html that seems to be very similar of what you need.