E. Shio E. Shio - 4 months ago 7
CSS Question

Aligning Image to Same Margin as Text Aligned Right

How would you align text (a list) to the right and have an image above it also aligned to the right, but have them both have fixed and 10% away from the left side of the screen. I also want both elements to be fixed. I have a codepen if anyone wants a link to it, but it's super simple and does not have the effect I want. I basically just want this as my "header" and then have the body of the site on the right side of it. For example:

######## body------->
# #
# # body------->
# #
######## body------->


body------->


Item 1 body------->
Item 2
Item Number 3
Item #4 body------->

Answer

I have a JSFiddle you can look at.

HTML

<div id="header">
  <img src="http://placehold.it/100x100">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item Number 3</li>
    <li>Item #4</li>
  </ul>
</div>
<div id="body">
  BODY
</div>

CSS

#header,
#body {
  display: inline-block;
}

#header {
  width: 40%;
  float: left;
  text-align: right;
}

#header img,
#header ul {
  padding-right: 10%;
}

ul  {
    list-style: none;
}

#body {
  width: 60%;
  float: right;
}

The widths of your header and body can change to what ever you wish. Let me know if you want anything else done.

You can also change the padding-right: 10%; to a margin-right: 10% depending on what CSS you are applying.