How to position my image below and to the right of my text?


Tags: html,css

Problem :

I have the following design: enter image description here

Notice the signature on the bottom under the quotation. Its very nicely placed on the right aligned with the text.

Here is my html css version so far:

enter image description here

I'm having trouble figuring out the correct way to get the signature over to the right and aligned with the right of the quotation.

Here is my html:

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="main.css">
        </head>

        <body>
            <div class="header">
                <div class="logo">
                    <img src="images/top-logo.png" alt="ProvenWord Logo">
                </div>
                <ul class="nav">
                    <li>Home</li>
                    <li>Proofreading</li>
                    <li>Editing</li>
                    <li>About</li>
                    <li>How it works</li>
                    <li>FAQ</li>
                    <li>Contact</li>
                </ul>
            </div> <!--close header -->
            <div class="tagline">
                <div class="section-container">
                    <h1><span>Transform your written</span> work into a <strong>masterpiece<strong></h1>
                    <a href="freequote.html" class="button">Free Quote</a>
                    <p class="first-quote">"Your proofreading assistance has enabled me to successfully complete my dissertation with greater ease."</p>
                    <img src="images/sudthida-signature.png" alt="Sudthida's Signature">
                    <p class="first-quote school">Sudthida P. Ph.D in Educational Research - King's College University of London</p>
                </div><!--close section-container-->
            </div><!--close tagline-->              
        </body>
    </html>

Here is my css:

html, body, h1, h2, h3, h4, p, ol, ul, li, a, div {
    padding: 0px;
    border: 0px;
    margin: 0px;
    font-size: 100%;
    font: inherit;
}


/*----------------------------*/
/*----- Tag Declarations -----*/
/*--------------------------- */

body {
    font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
}


h1{
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
}

h2 {
    font-size: 28px;
    padding-bottom: 25px;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 1px;
}

h2 strong {
    font-weight: 600;
}

p {
    font-size: 15px;
    line-height: 140%;
    font-weight: 300;
    letter-spacing: 1px;
}

.button {
    display: inline-block;
    line-height: 48px;  /*setting this to the button height makes the text centered */
    height: 48px;
    width: 185px;
    background: #ffd000;
    border: 2px solid #b59400;
    font-size: 18px;
    font-weight: 100;x;
    border-radius: 60px;
}

a.button {
    text-decoration: none;
    color: #000000;
}

a.button:hover {
    background: #feef00;
}


li {
    list-style: none;
    margin-bottom: 0.5em;
    text-indent: 1.5em;
    background-image: url(images/check.png);
    background-repeat: no-repeat;
    letter-spacing: 1px;
    font-weight: 200;
    font-size: 12px;
}

.section-container {
    width: 520px;
    margin: 0 auto;
}

/*--------------------------*/
/*----- Header Section -----*/
/*--------------------------*/

.header {
    padding: 25px 0px 32px 48px;
}


.logo img {
    float: left;
    padding-right: 130px;
}

.nav {
    list-style-type: none;
    padding-top: 32px;
}

.nav li {
    display: inline;
    padding-right: 10px;
    font-size: 12px;
    font-weight: 200;
}


/*---------------------------*/
/*----- Tagline Section -----*/
/*---------------------------*/

.tagline {
    background: #abdfe8 url(images/bg-tagline.png) no-repeat;
    height: 450px;
    text-align: center;
}


.section-container h1 {
    padding-top: 130px;

}

.section-container h1 span {
    letter-spacing: 2px;
}

.section-container .button {
    margin: 40px 0 40px 0;
}


.first-quote {
    font-size: 13px;
    line-height: 1.5;
    color: white;
    margin: 0 25px 10px 25px;
}

.section-container img {
    display: block;
    text-align: right;
}


.section-container .school {
    font-size: 10px;
    letter-spacing: 0.5px;
    text-align: center;
}

I have used the margin property to move the image over but I thought margins were used to create space between block elements. I don't want to hack my way to the layout, I want to understand how this works and what is the correct way to use the different properties in css.

Any help much appreciated.



Solution :

You can use float to align the image to the right, combined with margin to place it exactly where needed, then just clear the text below the image.

I've commented the changes in your CSS below.

html,
body,
h1,
h2,
h3,
h4,
p,
ol,
ul,
li,
a,
div {
  padding: 0px;
  border: 0px;
  margin: 0px;
  font-size: 100%;
  font: inherit;
}
/*----------------------------*/

/*----- Tag Declarations -----*/

/*--------------------------- */

body {
  font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
}
h1 {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
}
h2 {
  font-size: 28px;
  padding-bottom: 25px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 1px;
}
h2 strong {
  font-weight: 600;
}
p {
  font-size: 15px;
  line-height: 140%;
  font-weight: 300;
  letter-spacing: 1px;
}
.button {
  display: inline-block;
  line-height: 48px;
  /*setting this to the button height makes the text centered */
  height: 48px;
  width: 185px;
  background: #ffd000;
  border: 2px solid #b59400;
  font-size: 18px;
  font-weight: 100;
  x;
  border-radius: 60px;
}
a.button {
  text-decoration: none;
  color: #000000;
}
a.button:hover {
  background: #feef00;
}
li {
  list-style: none;
  margin-bottom: 0.5em;
  text-indent: 1.5em;
  background-image: url(images/check.png);
  background-repeat: no-repeat;
  letter-spacing: 1px;
  font-weight: 200;
  font-size: 12px;
}
.section-container {
  width: 520px;
  margin: 0 auto;
}
/*--------------------------*/

/*----- Header Section -----*/

/*--------------------------*/

.header {
  padding: 25px 0px 32px 48px;
}
.logo img {
  float: left;
  padding-right: 130px;
}
.nav {
  list-style-type: none;
  padding-top: 32px;
}
.nav li {
  display: inline;
  padding-right: 10px;
  font-size: 12px;
  font-weight: 200;
}
/*---------------------------*/

/*----- Tagline Section -----*/

/*---------------------------*/

.tagline {
  background: #abdfe8 url(images/bg-tagline.png) no-repeat;
  height: 450px;
  text-align: center;
}
.section-container h1 {
  padding-top: 130px;
}
.section-container h1 span {
  letter-spacing: 2px;
}
.section-container .button {
  margin: 40px 0 40px 0;
}
.first-quote {
  font-size: 13px;
  line-height: 1.5;
  color: white;
  margin: 0 25px 10px 25px;
}
.section-container img {
  display: block;
  float: right; /* USE FLOAT */
  margin-right: 1.8em; /* WITH MARGIN TO GIVE THE CORRECT POSITION */
}
.section-container .school {
  clear: both; /* CLEAR THE FLOATED IMAGE */
  font-size: 10px;
  letter-spacing: 0.5px;
  text-align: center;
}
<div class="header">
  <div class="logo">
    <img src="images/top-logo.png" alt="ProvenWord Logo">
  </div>
  <ul class="nav">
    <li>Home</li>
    <li>Proofreading</li>
    <li>Editing</li>
    <li>About</li>
    <li>How it works</li>
    <li>FAQ</li>
    <li>Contact</li>
  </ul>
</div>
<!--close header -->
<div class="tagline">
  <div class="section-container">
    <h1><span>Transform your written</span> work into a <strong>masterpiece<strong></h1>
    <a href="freequote.html" class="button">Free Quote</a>
    <p class="first-quote">"Your proofreading assistance has enabled me to successfully complete my dissertation with greater ease."</p>
    <img src="images/sudthida-signature.png" alt="Sudthida's Signature">
    <p class="first-quote school">Sudthida P. Ph.D in Educational Research - King's College University of London</p>
  </div>
  <!--close section-container-->
</div>
<!--close tagline-->


    CSS Howto..

    CSS - How to center nested divs?

    How to combine multiple css framework with overpalling classes

    jQuery how to select children first level div's

    How to change styling of a specific div onhover of another element when divs share an id

    How to center an iframe, responsive

    How can I make LIs push their siblings to the same height?

    How to stop word-wrapping in a CSS Dropdown menu.

    How to resize a canvas without anti-aliasing?

    How to get the first letter of each word to be a different size and the rest to be the same size

    CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?

    How to make a glyphicon work as a submit button?

    How to rewrite this css for IE

    How to create a top-footer and footer using foundation, just like foundation website

    Showing Text When Hovering Over an Image Link

    How to override CSS for TextBoxFor field?

    How to Format text boxes with Css

    How make to flow around a triangular block?

    When i Check the Checkbox how do I change that specific row style? C# ASP.NET

    How to prevent Ajax long-poll from reloading div in Chrome?

    How to build native C++ apps with HTML/CSS UI?

    IE7: CSS & jQuery: dragging up, dragged item is on top, dragging down: dragged item is below. How do I get both to be on top?

    Bootstrap - how to make the image being scaled down to fit the window height?

    How do you contain and position an input with a div?

    How to control the css for two instance of Google Maps autocomplete on the same page?

    css code how to change active navigation button color

    How to prevent an element to get pushed down by window resize?

    How to deploy a jekyll site locally with css, js and background images included?

    Fixed sidebar, content under it, how to fix?

    How to set height to wrap text only in certain screen size

    How to make a Xul button bigger using css as it get focus?