This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I need to achieve the following layouts in CSS:
I've been trying flexbox but cannot get container 'C' to appear correctly on tablet width. I can reorder the columns using CSS order but the width of 'C' spans the full width of the page but it needs to be constrained to the same width as container 'A'.
I've setup a blank starter pen here because I can't post my project: https://codepen.io/ahdigital/pen/GRqpQRL?editors=1100
My question is, will this be possible with flexbox, or should I use another CSS approach? (Trying to avoid JS).
No.
By using nested flexboxes you can achieve a similar layout if the two boxes that align vertically to each other (A and C in this example) in tablet layout are adjacent, but that isn't the case here.
Use Grid to do the layout instead.
With media queries you could use Flexbox for desktop, Grid for tablet, and neither for mobile.
Related
This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 2 years ago.
Since I'm not a native English speaker its difficult to explain the problem with words. Please refer to the image I will explain to my problem below.
Currently, I'm using bootstrap 4, But If this can be done by pure CSS HTML that's also fine.
The issue is the column card's title and paragraphs words count different to each column card. But these things must be archive developing the layout.
All titles should align to the top & should be in the same line.
All paragraphs should align to the top after the title but all paragraphs should be aligned in the same horizontal line.
All buttons (Green squares) align to the bottom of the card.
I have done this using min-height in CSS. But when it comes to short titles & short paragraphs. UI is not so great.
Please show me the direction how to do this.
Thanks in advance.
The way I see it, you'll have to combine bootstrap card and Flexbox to achieve this. Or you can just use flexbox and put the element into each flexbox and justify-content: flex-start; and align-content: space-between; for it.
User overflow properties when length is more than a height on your paragraph, or try #media queries when the window's width is more than 992px
Links:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_intro
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 3 years ago.
I would like to build three boxes for my website like the following :
My wish is that the height of boxes 1 & 3 would be equal to the size of box 2, and that this height is expressed in percentage relatively to the parent element.
What I've tried so far :
- Box 1 & 3 with display: inline-block; property
- Box 1 & 2 & 3 with fixed height attributes
But I've never managed to have the proper scheme. Can someone explain me how to achieve this ?
The link is broken and no codes been provided, so we can't see visually what it is you are trying to achieve.
But i suggest you look into Flexbox because it offers more flexibility in layout control compared to the more-traditional block/inline-block (+float). Css tricks has a comprehensive guide on everything flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This question already has answers here:
CSS selector based on width?
(4 answers)
Can media queries resize based on a div element instead of the screen?
(11 answers)
Closed 3 years ago.
Is there a passive method (i.e. not JS) to make a div disappear, when its width is less than a certain value?
Something like...
.my-div[width < 120px] {
display: none;
}
Edit #1
I'm already using media queries for responsive design, but the point at which I want to hide this div is in between two break points. I'll make another media query if I must, but I was hoping for some niche secret CSS trick.
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 7 years ago.
I have made a columnar layout that works fairly well for my needs, but I am experiencing an issue with the height of one column. I have prepared a jsBin that demonstrates the problem;
http://jsbin.com/mawuliyulo/1/edit?html,output
Basically, when you scroll down - eventually you start seeing white on the left side. Is there any way to force this to stretch all the way down indefinitely?
This is not using a flex-box layout. It is simply achieved using :before, and :after pseudo-selectors.
Add position:relative to your main-container class
This question already has answers here:
How to get this 2 columns layout (were one fits to content)
(3 answers)
Closed 4 months ago.
The columns should:
be full height
have vertical scrollbars if needed but no horizontal
This is what I got so far (along with a footer and a header)
http://jsfiddle.net/HZMCX/11/
The problem withmy code is that the right panel text starts at mid screen and not next to the left panel.
[Ignore this, this is so stackoverflow allows me to post the link to jsFiddle ]
Any ideas on how to fix this?
Thanks!
Your code can be applied much more simply than you currently have it:
Consider simply floating the side column and the primary content and setting fluid widths on both.
http://jsfiddle.net/MygUu/
Wrap the overall layout in a .container class, and set overflow to hidden.
.container {
overflow: hidden;
}
Additionally, it is best practice not to style using ID selectors. Hope that helps.