Make div go to the bottom without overlapping previous div's content - html

I have the following example:
fiddle: http://jsfiddle.net/yisera/yLty3552/2/
Pen: http://codepen.io/yisera/pen/KpzbQp
Where I have a flex grid and I have elements that are also display:flex;. The problem I have is that the div.card has another div, div.od-card-action which has the actions of that card, comment, upvote, downvote. However, whenever the content of one of the cards is bigger than the others, they will stretch, making the card bigger to match the biggest one on that row.
This is a desired behaviour, but the problem is the div.od-card-action will also grow (I don't want this to happen) and make the elements seem out of order like it is shown on the first card in the fiddle.
I tried:
.od-card-action{
position: absolute;
bottom: 0;
width: 100%;
padding: 10px !important;
}
but this only makes the content from the upper div overlap with the content of the actions div.
Is there a way where I can make the div.od-card-action go all the way to the bottom regardless of the size of the card and maintain the same size (eg: 50px to say a value)?
Thanks in advance!
EDIT
Here's a picture demonstration what I want to accomplish:
See how everything is aligned horizontally despite the content of the above div not being of the same size? That's what I need to achieve.

I realised that as you're already using Flexbox in .od-card, then .card-content could be set to take as much space as possible (vertically, as the flex direction is column) using:
.card-content {
flex: 1;
}

Change the od-card-action CSS back to:
.od-card-action{
position: absolute;
bottom: 0;
width: 100%;
padding: 10px !important;
}
Add new css to card-content
.card-content{
margin-bottom:50px;
}

Related

4 sibling elements with variable heights: how to float/flex 3+4 to right, w/o vertical gaps between 1+2 or 3+4?

I am attempting to turn a CMS-generated page of four sibling elements stacked atop one another into a two-column layout. Here is the simplified generated markup:
<section id="element-container">
<header id="element-1">Text header</header>
<header id="element-2">Text subheader</header>
<div id="element-3">Text validation messages</div>
<form id="element-4">Form fields go here</form>
</section>
I need a left column with #element-1 and #element-2 stacked together, and a right column with #element-3 and #element-4 stacked together.
I cannot change the CMS-generated markup (such as to add more nesting levels of container elements).
In real-world usage, #element-4 will almost always be considerably longer than the total combined height of #element-1 and #element-2, though every so often we need to dump a bunch of text into #element-2, making it taller than #element-4.
A CSS-only solution is called for over something like jQuery manipulation of elements via detach() or wrap() etc, for the sake of avoiding an ugly flash of content being rearranged; and hiding everything until it's manipulated is very much undesirable as well. For our particular application, fast/clean loading is the absolute top priority. However, I'd be able to do some of that type of manipulation to (only) the #element-3 div, as it contains feedback to the user about a failed form validation, so it has display:none and height:0px at page load. So I'd be very happy with a solution that "only" stacks #element-1 and #element-2 directly atop one another at left/top, and #element-4 at right/top—from there I can find a way to deal with #element-3.
I spent all day today playing with solutions like the one in Floating 3rd element right while first 2 go left, which is so close to what I need, but all solutions to questions like these seem to assume fixed heights on the elements, and break when uncertainty is introduced to heights. For example, if you play with the codepen on the accepted answer on that question by making div3 200px high instead of 100px high, you get a big gap between div1 and div2.
Open to float, flexbox, whatever. Thanks very much.
You can pretty easily force a two-column layout by using column-count on your container element. This will make the browser automatically divide up the elements into however many columns you specify based on their heights, without leaving vertical space between them.
In your case, with two columns, this will basically automatically ensure #element-1 is on the left and #element-4 is on the right. The question becomes where do #element-2 and #element-3 fall in the auto layout. If the first two elements are pretty small, element 3 may end up in the left column; or if the first element is quite tall and elements 2, 3, and 4 are small enough, they may end up all together in the right column.
Sounds from your description like we probably don't have to worry too much about element 2 ending up in the right column, so I'll focus on forcing element 3 to the right column. (If the former is a problem, the easiest solution is a min-height on element 2, but you can experiment with different options.)
Since element 3 is display: none to start, one option you can do is to figure out how tall it should be right before you display it, and then absolute position it at the top of the right column while moving element 4 down by the same amount as element 3's height to prevent overlap. I'm using a simple top margin on element 4 in the example below.
In the example below, the height of element 3 is static, so the logic is simple enough, but in your real case you may have to do something like:
run form validation
add error messages to element 3
set element 3 to display: block; visibility: hidden
get the height of element 3
offset element 4 by element 3's height
set element 3 to visibility: visible
document.getElementById('element-4').style.marginTop = `${document.getElementById('element-3').getBoundingClientRect().height}px`;
body {
margin: 0;
}
* {
box-sizing: border-box;
}
#element-container {
column-count: 2;
column-gap: 0px;
position: relative;
}
#element-1, #element-2, #element-4 {
display: inline-block;
width: 100%;
}
#element-3 {
display: block;
}
#element-1 {
background-color: firebrick;
padding: 40px 10px;
}
#element-2 {
background-color: midnightblue;
color: white;
padding: 30px 10px;
}
#element-3 {
background-color: gold;
padding: 10px;
position: absolute;
top: 0;
right: 0;
width: 50%;
}
#element-4 {
background-color: mediumaquamarine;
padding: 160px 10px;
}
<section id="element-container">
<header id="element-1">Text header</header>
<header id="element-2">Text subheader</header>
<div id="element-3">Text validation messages</div>
<form id="element-4">Form fields go here</form>
</section>

How to automatically center the grid's row contents when changing the screen size

I'm trying to build a website with bootstrap and other css resources and I'm trying to fix the following issue in the last 2 days and I think I won't be able to fix it.
I have a row of 50 250x250 cards with a left-margin of 30px. When I'm on the full screen, I get no problems. However, when I change the screen size, a huge gap between the latest card and the screen borders occurs. This continues until the browser can fill the empty space with the following card.
I don't want to have this empty space and want the cards to automatically align themselves to the center.
I've also divided the columns to 10 rows but still, there was no change.
Is there a way to fix this issue? Screenshots are attached for fullscreen and smaller screen.
You can also see it yourself from: http://sagtekin.com/letseat/maintest.php
Thank you very much for your valuable help.
I have to say your code is a bit of a mess, I would encourage you to go back and reference the bootstrap documentation for proper semantic and structural code as you have a bunch of unnecessary stuff happening.
In a nutshell you have to make your containing div has a text-align: center applied. I also gave a margin-right and left of 15px to offset spacing and maintain centering.
Secondly make sure your column classes make sense and fit into each other mathematically! I've wrapped your images in a col-lg-12 and wrap your images in a col-lg-4 so that there will be at least 3 up. Adjust image sizing as you see fit I made smaller images so you could see the responsiveness in the fiddle more.
.container {
text-align: center;
}
#card {
background: #FAFAFA;
width: 150px;
height: 150px;
margin-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
overflow: hidden;
display: inline-block;
}
#card h2 {
background-color: #3F51B5;
opacity: 0.9;
text-align: center;
position: absolute;
margin: 0px;
width: 150px;
}
img {
float: left;
}
Here is a Fiddle
https://jsfiddle.net/gward90/oygyj9qd/
You have several times id card, use class.
Don't set the width of the column divs, let bootstrap do it. (Fixed size and responsive design don't mix too well.)
Use the img tag unless you really want the image in the background and then put something over it which dictates the size.
If you do it like that, then the container will behave as you expect it.

CSS positioning and offset in fluid layout

I have a wrapper div with some content in it. Here is its css:
.wrapper{
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto;
padding: 0.3%;
}
Now, within this div, I have another div, which I will call div2. It has no relevant styles to it, aside from cosmetic ones (background, font-color, etc.). Its behaviour is to simply take up the entire width of the wrapper div, no matter what the browser's width, zoom, or screen size is. This is as expected, and nothing is wrong here. I'm trying to make an addition onto this, and that is where I'm having trouble.
I have an image that I want to display, such that the bottom of the image is in line and touching the top of div2, and on the right side end of div2, so that the right end of the image is also in line with the right end of div2.
This would sound simple enough to do, but I don't want this image to mess with the vertical space. Adding the image in will of course introduce a larger gap between div2, and any element above it, which means I have to use position:absolute to take the image out of the regular flow of the page. However, my attempts at keeping the image at this same position, in line as described, have been unsuccessful. How can I keep this image aligned at all times, and under all possible user display circumstances, without having this large gap?
I've tried using the offset CSS top and left to move the image, but it doesn't work for all screens/zooms/resolutions/browser widths, and this isn't something I can practically use media queries for.
I'm not quite sure if I got you right, but I guess you need to:
#div2
{
position: relative;
width: 100%;
overflow: visible;
}
#div2 img
{
position: absolute;
bottom: 100%;
right: 0;
}
EDIT: Place your image inside of #div2.
So, your image, will always be on the right top of #div2. That's what you wanted to do?

Rows of flexible and fixed div's within full-size window

I'm writing a mobile/desktop chat application that is supposed to utilize the entire screen. The bottom <div> shown in yellow can be fixed-height if it needs to be.
presently it's Absolutely positioned to the bottom of the window.
My problem: the top <div>, in cyan, doesn't fit to the rest of the window, regardless of whether I use padding, margin, border, etc. Presently it appears to allow the content to wrap, but that's only because the bottom overwrites the scroll bar.
My only solution so far is to have a final <div> or <br> that pads the end of the scrollable div, but that doesn't make the div smaller, or make the scroll bars properly align.
Here is my source code so far in Fiddle.
Can you edit your CSS and set the DIV with the chat text a class like .break-word and then in CSS declare it with word-wrap:
.break-word {
word-wrap: break-word;
}
Unsure on the covering of scrollbars. You should post your code for others to view and might be able to pick something out.
This style code basically sums up what I'm doing to compensate for my issue. (Instead of, say, using HTML tables.) This may not be the best solution.
#topPart {
position: absolute;
width: 100%;
top: 0;
bottom: 40px; /* or however high the bottom is */
}
#bottomPart {
position: absolute;
width: 100%;
bottom: 0;
height: 40px; /* same as above */
}

Confused over DIV Z-index, plus logic of visible/hidden DIVs

I've spent all morning trying to write what I thought was a simple bit of code.
Two long columns of content, only column 1 is visible
On click of a link, column 1 is hidden and column 2 becomes visible
Both are in exactly the same position, however both have different and varying lengths
I decided to use the target pseudo-class to switch between the columns, setting the visibility of one to show.
This seems to work, but I don't fully understand what I've done. Plus, content below these columns seems to be placed beneath them on the z-axis rather than below them on the y-axis.
My two (related) issues:
I'm not sure exactly what the logic is of what I've created, I could do with a plain english explanation.
I don't understand why the DIV underneath the two columns and container is not appearing below them on the y-axis.
Here's my CSS:
#container
{
background-color: red;
position: relative;
}
#schools-list
{
width: 400px; /* Set the width of the visible portion of content here */
height: 600px; /* Delete the height, let the content define the height */
background-color: purple;
position: absolute;
top: 0;
left: 0;
}
#boards-list
{
width: 400px; /* Set the width of the visible portion of content here */
height: 700px; /* Delete the height, let the content define the height */
background-color: green;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
#container:target #schools-list
{
visibility: hidden;
}
#container:target #boards-list
{
visibility: visible;
}
Here's my HTML:
<div id="container">
<div id="boards-list">
Boards List<br>
Switch to Schools List
Here's some content
</div>
<div id="schools-list">
Schools List<br>
Switch to Boards List
Here's some other content
</div>
</div>
<div>Why is this beneath everything?</div>
Absolute positioning removes an item from the flow of the page. This is what is causing your bottom div to appear underneath.
Visibility removes the element from sight but the element will still take up space.
My suggestion is to use display rather than visibility.
Toggle your elements between display:block and display:none and remove the absolute positioning and you should be able to achieve the functionality you desire.
Both #borad-list and #school-list is taken out of normal page flow by position: absolute, that's why your container height should be 0px as there is nothing that takes any space vertically.
I could explain it better but now writing with my phone so... i'll try just to give you starting point.
By positioning the containers using position:absolute, you're removing them from the normal flow of the page. In other words, your other content acts like those containers aren't even there, and those containers magically appear in front of the content.
Instead, what you'll likely want to do is remove the position, top, and left of the containers, and use display:block to show and display:none to hide the containers. You can also remove the height from the containers and allow the content to decide on its own how much room is needed.