Photoshop Question posted in
The official user guide can be found here.

How to align div to bottom right without using absolute position? – Photoshop

There’s many posts on how to align to bottom right, but they all used absolute, and I can’t do that because I don’t want my 2 elements to overlap if one happens to be too big for the window size.

I tried with float, and it works to align right, but not to align bottom

<div style="border-bottom: 1px solid; padding-bottom:10px;">

    <h1 style="display:inline;">
      This is my big title - Bla bla bla   
    </h1>

    <div style="
            font-size: small;
            float: right;
            padding: 5px 0px 0px 20px;
            font-style: italic;
            display: inline;">
        Published on Friday 11th August 2017 at 12:46   
    </div>

    <div style="clear:both"></div>

</div>

You can check the result in https://jsfiddle.net/j66q82gy/7/

When the window is narrow, it doesn’t matter that it’s not aligned bottom, but when the window is wide and both h1 and the middle div are on the same line, it becomes apparent that it’s not aligned bottom, and I need it to be aligned bottom.

I also need to keep them on the same line, so the inline should stay on both h1 and the middle div.

Edit: Flex puts thing in a sort of awkward half inline, half block like this: i.imgur dot com/YA6TdBt.png

I need something that looks like this i.imgur dot com/Awj9Bht.png (top image is my code, bottom image is photoshoped to look like what I need.)

Tags:

5

Answers


  1. 0

    Is this what you envisioned?

    <div style="border-bottom: 1px solid; padding-bottom:10px; display:flex; flex-wrap: wrap;">

    <h1 style="display:inline;">
      This is my big title - Bla bla bla   
    </h1>

    <div style="
            font-size: small;
            float: right;
            padding: 5px 0px 0px 20px;
            font-style: italic;
            align-self: flex-end;
            margin-left: auto;">
        Published on Friday 11th August 2017 at 12:46   
    </div>

    <div style="clear:both"></div>

</div>

    https://jsfiddle.net/eq6jLnct/5/

    Change the height to whatever you need. Or just use min-height.

    Please not that flexbox is not supported for all browsers: http://caniuse.com/#search=flex-box

    Login or Signup to reply.
  2. 0

    You can use flexbox properties instead of float…

    Completely updated answer

    fiddle

    .flex {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.flex div {
  margin-left: auto;
}
    <div style="border-bottom: 1px solid; padding-bottom:10px;" class="flex">
  <h1>
    This is my big title - Bla bla bla
  </h1>
  <div style="
            font-size: small;
            padding: 5px 0px 0px 20px;
            font-style: italic;">
    Published on Friday 11th August 2017 at 12:46

  </div>
</div>
    Login or Signup to reply.
  3. 0

    Check this codePen I added, here’s the CSS:

    float: right;
transform: translateY(0px);
    Login or Signup to reply.
  4. 0

    Hope this will help

    <div style="border-bottom: 1px solid; padding-bottom:10px;display: table;">

    <h1 style="display:inline;">
      This is my big title - Bla bla bla   
    </h1>
    
    <div style="
            font-size: small;
            padding: 5px 0px 0px 20px;
            font-style: italic;
           display: table-cell;
           vertical-align:bottom;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
    <div style="clear:both"></div>

</div>

    Methord 2:

    You can go through the link of flexbox as it is very easy to use and highly resoposive.

    Login or Signup to reply.
  5. 0

    With Flexbox you can align both at the bottom and keep the inner div right aligned.

    Add display: flex; align-items: flex-end to the outer div, reset the margin on the h1 (or you can add one to the other inner div) and then set margin-left: auto; to the inner div

    The align-items: flex-end will keep the inner div bottom aligned with the h1 and the margin-left: auto; will push the inner div to the right.

    Note, because of the different font size, their inner metrics will create a somewhat bigger white space below the h1. Here I simply added a 4px bottom padding on the inner div, but you can also play with the overall line-height

    Updated based on a comment

    If to keep the text unwrapped until they hit their parents width, add flex-wrap: wrap; to outer div

    <div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">

    <h1 style="margin: 0;">
      This is my title
    </h1>
    
    <div style="
            margin-left: auto;
            font-size: small;
            padding: 0 0 4px 20px;
            font-style: italic;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
</div>

<br>
<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">

    <h1 style="margin: 0;">
      This is my big title - Bla bla bla   
    </h1>
    
    <div style="
            margin-left: auto;
            font-size: small;
            padding: 0 0 4px 20px;
            font-style: italic;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
</div>

<br>
<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">

    <h1 style="margin: 0;">
      This is my big title - Bla bla bla bla bla bla bla bla bla
    </h1>
    
    <div style="
            margin-left: auto;
            font-size: small;
            padding: 0 0 4px 20px;
            font-style: italic;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search