How to position element between two sections while also being responsive?


Tags: html,css,material-design,framework7

Problem :

First, here's an example I'm trying to achieve: enter image description here

Here's the code I'm using to achieve that

HTML:

<div class="card demo-card-header-pic" style="margin:15px;">
            <div style="background-image:url(https://pbs.twimg.com/profile_banners/6253282/1431474710/web_retina)" valign="bottom" class="card-header color-white no-border"></div>
            <div class="avatar">
              <img src="http://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_bigger.png" style="border-radius:50px;">
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <div>
                  <p><b>****</b> wants to know what you think of him!</p>
                </div>
                <div>
                  <span class="text-muted" style="float:left;">Asked two days ago</span>
                  <span style="float:right;" class="text-muted"> 5 comments</span>
                </div>
              </div>
            </div>
            <div class="card-footer">Footer</div>
          </div> 

CSS:

.demo-card-header-pic .card-header
{
    height: 40vw;
    background-size: cover;
    background-position: center;
}
.avatar
{
    border-radius: 50px;
}
.card > .avatar
{
    position: relative;
    top: -40px;
    left:5px;
}
.text-muted {
    color: #777;
}

My question is how do I get rid of all the white space that is between the header of the card and the text? I tried using position:absolutebut that would mess up anytime the display was changed, even when using percentages.



Solution :

A quick solution would be to give .card-content a negative margin-top value. I do agree that it's not the most elegant solution, but it get's the job done. Also adding a clear:both to the footer will prevent the overlay of both DIVs that you have at the moment

CSS:

.card-content{
   margin-top: -40px;
}

.card-footer{
    clear: both;
}

    CSS Howto..

    How to track element movement and trigger function at specific spot?

    HTML/CSS: how to put text both right and left aligned in a paragraph

    How to align specific element to the right using :last-child pseudo

    How do I remove the last border on my nav bar?

    How can I change the numbering of an order list's items?

    How do I get the tooltip background to extend or grow as I input more text?

    How do I change phpmyadmin font size for sql query box?

    How do I restrict style to affect content only in modal?

    How to make input placeholder text not opaque when the text field background is opaque

    How come the links in my footer section remain purple and underlined even when I use CSS to change that

    how do I give a div a responsive height

    How to add padding to anchor tags in Top Bar in Foundation 6?

    How can I restrict this CSS container to only containing the div its declared in?

    How to have elements copy other element's auto height css?

    How can I ensure that my absolutely positioned div is tall enough to meet my sticky footer?

    How can I Resize & Enlarge an Image (like sprite icons) via CSS 3?

    How to return WebElement having particular CSS property using JavascriptExecutor?

    How to build a submenu with CSS?

    How to get SASS working with RequestReduce?

    CSS: How to refer to a tag

    How to filter elements on click in js?

    How to create new top headers for weebly

    CSS / JS: How do I tell my page to be completely unselectable, except for stuff inside a div?

    How to Implement this UI with CSS [closed]

    How to temporarily modify the CSS of an element

    How to turn off word wrapping in HTML?

    How do you select a security authentication modal with a css selector?

    How to add a play icon to Image on CSS

    How to change the CSS of page dynamically based on value?

    How do I prevent fadeIn/Out blinking with expanding/collapsing header?