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..

    Floating divs, different height, building from left to right. how to fill vertical gaps between levels?

    IBM Worklight - How to disable Native device features?

    How to turn off spell checking in CSS?

    Show nested list on click in Joomla (1.7.0)

    How to get an App made using JavaScript to autoresize for other Apple Devices?

    With Watin, how do I wait until an element gets a certain CSS class?

    How to make a back-to-top button using CSS and HTML only?

    How to position tables in ie 9 using css?

    How to avoid click on within an from triggering click event on without Javascript/jQuery?

    how to properly resize navbar fixed in bootstrap

    CSS how to align elements

    How to traverse and click on Next & Cancel Button (On PopUp) using selenium webdriver

    How to Change XYChart's color in JavaFx?

    How to insert CSS code into a page if I can't insert it into head tag? Only inline mode?

    How to load only html from web pages in selenium

    How to isolate specific platforms using CSS selectors in the Ionic framework

    inline svg - how to apply browser default styles to xhtml in foreignObject?

    how should i set scrollbar properties in css

    How Would I Center Text In This DIV?

    How to avoid the text inside the bootstrap button overflow?

    How to set footer responsive?

    How to hide header on scroll down, show on scroll up like linkedin menu

    how to give dynamic height in css

    How to make my right-box float right…?

    How to get css property value in pure javascript

    How to pin the menu to the upper part of the screen?

    How to keep a sticky menu contained inside a floating sidebar?

    CSS - fluid design, how to correctly position right floats below the opposing element?

    How to make this breed of resizable vertical divider for two divs?

    How do you centre two icons (images) side by side in footer?