How to make text appear at the top left corner?


Tags: html,css,user-interface,user-experience

Problem :

Here is the UI prototype I am trying to implement

enter image description here

Here is a JSFiddle of what I currently have and the CSS I have tried

.help_header {
     transform: translateY(-100px); 
    padding-bottom: 30px;
    margin-bottom: 30px;
 }

Does anyone know how to make the text appear at the top, not the bottom?

I tried padding-bottom which made the most sense to me(distance between the bottom border of div and the text) but that didn't work. I also tried margin-bottom and transform:translateY but those properties didn't work either.



Solution :

html:

<body>
  <div id="header">
    <img  src="http://imgur.com/x45xmG3.jpg" />
   <div class="help_header">
    <span>Contact us</span>
    <span>Forum</span>
   </div>
</div>
</body>

css:

body {
padding:0;
margin:0;
}
#header {
height: 100px;
float:left;
}

.help_header {
float:right;
}

are you looking for somting like this: JSFiddle


    CSS Howto..

    How do you make an input element fill parent?

    How do I add extra slides to this pure CSS text rotator?

    How can I remove the border around all the cells in a table?

    How to get text within div to be relative to the div's width and height, CSS, HTML

    How to get a div text from html content

    How to open a CSS-only popup automatically on page load/using Javascript?

    How to make a horizontal expandable menu fluid

    Flex: How to embed fonts with CSS

    How to change
  • to variable width on css dropdown submenu
  • Should I teach CSS layout directly to new learners or should I first teach how to make layout with tables, then table-less layouts?

    How to prevent mobile browser micro-shrinking HTML block level elements?

    Stop CSS & Jquery Slideshow from looping

    How to stretch parent div to fit children div?

    How to make a progress bar like this in CSS

    How to keep css content position when zooming in and out?

    How to set CSS on body tag to rotate a page using JavaScript

    How to properly fix CSS inconsistencies across desktop and mobile browsers?

    JSP/HTML / JS / CSS - How to create a cancel button in form

    How to align two svg masked images on the same line

    How do I hide text that is not wrapped in

    or ?

    How do you extend a Django project root HTML file in project apps?

    How to exclude some text from browser zoom

    how to call all Google font CSS under specific font face

    How can I use CSS to center text in DIV

    how can I add styles of structure to jquery plugin

    How to add “pause” button in this jquery slider?

    How i can make that mobile menu fill the 50% of the width of the screen in Wordpress?

    How could I use pseudo-element :after :before conditionally

    How to change css properties on hover parent element?

    How to add CSS to my HTML code on Notepad++