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

Align Text directly to the right of image? – Photoshop

http://puu.sh/azjGv/57650c4ccd.png

Im trying to re-create my mockup from photoshop in code. I’ve managed to get all elements in the page.

I want a picture and then to have to text directly to the right of it.
Any CSS help would be amazing, thank you in advance!

HTML

<h1>About Me</h1>

<div id="about">

    <img src="images/me.png" class="meimage">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lectus tortor, sodales ac velit sit amet, imperdiet posuere risus. Nam congue volutpat vehicula. Sed convallis tempor orci vitae aliquam. Quisque at faucibus eros. Sed laoreet, orci et ultricies luctus, turpis leo pharetra felis, ac tristique ligula nisl id enim. Nullam porta quam et dolor eleifend placerat. Aenean rhoncus, tellus ut sodales suscipit, nunc enim ornare dui, cursus tincidunt urna nisl vitae lacus. Nunc tincidunt auctor dolor, eget laoreet justo gravida vel. In convallis arcu massa, quis gravida purus vestibulum eget.

</div>

CSS

.meimage{
    margin: 20px 20px 20px 20px;
    height:200px;
    width:200px;
}

#about{
    text-align: center;
    width:800px; 
    text-shadow:0 -1px 1px rgba(0,0,0,0.6);
    font-family: 'Verdana', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Cantarell', sans-serif;
font-weight:700;}

h1{
display: block;
padding: 0px 155px;
font-family: 'Cantarell', sans-serif;
text-shadow:0 -1px 1px rgba(0,0,0,0.6);
}
Tags:

2

Answers


  1. 0 
    .meimage, #about {
    float: left;
 }

    Edit: You wanted header floated left too:

     .col {
    float: left;
    margin: ...;
  }

 <div class="col"><h1>About Me</h1><img ... /></div>
 <div class="col"><p>Lorem Ipsum...</p></div>
    Login or Signup to reply.
  2. 0

    You can use CSS float to wrap text around an image. Though I’d say it looks a little strange with the text centered:

    .meimage {
    float:left;
    margin:0 1em 1em 0;
}

    http://jsfiddle.net/SJTDS/1/

    Edit

    If this is a static page and the content won’t be changing, you can probably just update the padding on your <h1> to get it to align with the image.

    h1 {
    ...
    padding: 0px 20px;
}

    http://jsfiddle.net/SJTDS/4/

    Keep in mind that fixed pixel settings can be fragile and break when, for instance, you upload a larger image.

    If this is an issue, I’d use a different structure.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search