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 make ScrollPanel only visible when its inside widget is higher than it & not visible when its inside widget is shorter than it?

    How to force IE to place two div boxes next to each other in it's browser window?

    How to get better at CSS, laying out designs and UI Programming? [closed]

    How to put borders closer to the text and image and make background gray in CSS?

    How to remove this extra part at the right?

    How to Decrease Image Brightness in CSS

    How do I gather a class' css attributes given nothing but the className?

    Framework7->CSS: How to make tabs under popover scrollable

    Css How to add round corners when hover li element?

    How to visually identify the viewbox of a SVG with CSS?

    CSS: how to share remaining vertical space evenly?

    How to get the authored style properties of an element?

    How to use ViewContext?

    How to slow down the last few frames in a CSS sprite animation?

    How to fit image into table cell by height with CSS (where the height is not defined explicitly)

    How do I center a div between two other divs?

    How to get page content to stretch and stick footer to bottom of page?

    How to build simple image rotation effect like this one in exapmle?

    How do I hide the checkboxes from a radiobox?

    How can I make this kind of a border?

    Hide all div element but show first two

    How can I set the correct position of the text in CSS?

    CSS how to center ::after pseudo elem

    How to set display none on tag using css?

    JSoup - how to grab a href (url/link) immediately preceding a ?

    How can I center a table relative to one column in HTML/CSS?

    How to include image into css file using JSF tag

    How to slide-out a submenu from under the navigation bar using CSS transition?

    how to use javascript to get visited link css styles

    How to make font-size less for 2px than parent element?