How can I get the box with text to stick to the top of each wrap div?


Tags: html,css

Problem :

I can't figure it out without using float:right or using relative positioning. If I use either, it will move around when people zoom in and out. I'm trying to figure out how to make it stay exactly where I place it even when people zoom in and out.

http://htmlcss.netii.net/

HTML Structure:

<div class="staff-block">           
    <img class="staff-pics" />

    <div class="staff-text">
        <h3>
        <p>
    </div>  
</div>

CSS:

.staff-block { /* Red */
    border: 1px dashed red;
    display: block;  

}

.staff-pics { /* Orange */
    border: 1px dashed orange;
  display: ;
  width:150px;
  display: inline-block;
  margin-bottom: 50px;
}

.staff-text { /* Yellow */
    border: 1px dashed yellow;
  width: 70%;
  font-size: 15px;
  color: #FFCC00;
  display: inline-block;
}

.staff-text h3 { /* Green */
    border: 1px dashed lime;
  margin-bottom: 10px;
  color: white;
}

.staff-text p { /* Blue */
    border: 1px dashed aqua;
}


Solution :

Since they are already inline-block elements, simply add vertical-align:top.

.staff-text {
    vertical-align: top;
}

It works - I tested it via the dev tool in Chrome..

Updated CSS:

.staff-text {
    border: 1px dashed lime;
    width: 70%;
    font-size: 15px;
    color: #FFCC00;
    display: inline-block;
    vertical-align: top;
}

    CSS Howto..

    How to style a PHP generated label?

    How can we customize vs2010 css editor template?

    How to stop CSS/HTML navigation menu wrapping at different resolutions?

    How to use absolute element when its closet ancestor is a float element?

    How do I get two adjacent spans to display their text vertically?

    JavaScript: how do I make a tooltip follow the cursor *and* flip on collision?

    How do you target div last-child within another div?

    How to get Susy going with a CSS only toggle navigation

    how to align right hand side image on top of text on mobile screen

    How to set continuous box-shadow through all inline-block centered li elements

    How to implement css classes in form using laravel collective 5.2 . *

    how to pass context value to css

    How to apply common JavaScript and CSS for all my jsp pages in the application?

    How to position bottom of div above top of its container

    How to add “android_asset/www/” to the image's path in the CSS only if app is running in Android?

    How to contain imported css within a div

    Chrome Developer Tools: How to find out what is overriding a CSS rule?

    How can I achieve a jQuery onhover effect like WordPress post list's edit links?

    How do I make a play button for my full page video?

    How to resize a chosen jquery dropdownlist on windows resize

    how to indent HTML forms on modals [closed]

    How to create a backdrop for a dialog?

    How to give a line break between buttons in css/html?

    How to connect CSS files to my JSP pages stored in Web-Content (Dynamic Web Project)

    How to use the css height attribute for showing scroll bar in HTML table

    jQuery hide show id

    How to add multiple CSS classes to an single array

    How to achieve this layout with CSS and div?

    How to align p tag side by side using css?

    How to slide in divs from off screen into absolute layout using CSS transitions?