Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jack Clarke
Jack Clarke
1,335 Points

Text between two images

Hi,

I have just completed the 'How to Make a Website' course and I wanted to make an adjustment to the About page.

For those who haven't made or seen the completed website, it currently looks like this http://treehousewebsite.com/about.html. I wanted to make it look a bit like this https://www.dropbox.com/s/z7hug6u84qbtu7h/desktop.jpg (but with the text wrapped. I made that on Photoshop :p).

I have tried playing around with floating the discount image to the right etc. but I can't seem to get it where I want it.

Does anyone know how to do this, and if so, can you tell me?

Hopefully you can help,

Thanks

6 Answers

Paul Johnson
Paul Johnson
18,924 Points
Paul Johnson
Paul Johnson
18,924 Points

Hi,

I've been playing around with the workspace as I have finished that course too. I gave the p element on the page an id of "about" and the image an id of "thouse", using the following css they all sit next to each other nicely.

  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;    
  } 

  #thouse {
    float:left;
  }

  #about {
    float:left;
    max-width: 33%;
  }

This goes into responsive.css

There is probably a far better way to do this, but it worked for me.

Jack Clarke
Jack Clarke
1,335 Points

Hi,

Thanks but I have just tried that and it now looks like this... https://www.dropbox.com/s/rvgo8zo1sakz56g/Screen%20Shot%202014-05-27%20at%2014.15.03.png

Thanks anyway

Paul Johnson
Paul Johnson
18,924 Points
Paul Johnson
Paul Johnson
18,924 Points

You've added more text, did you add a second p element or is the text all in one p element? Can you post the html code for the about page and the css code?

Sebastian Bachmann
Sebastian Bachmann
7,046 Points

Jack Clarke can you share some HTML and CSS code of yours please ...

Jack Clarke
Jack Clarke
1,335 Points

Hi. Sorry, yes I added some more text using multiple p elements like Nick did in the video. My code is below:

HTML: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Jack Clarke | Designer</title>
        <link href="css/normalize.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:700italic,400,700,800' rel='stylesheet' type='text/css'>
        <link href="css/main.css" rel="stylesheet">
        <link href="css/responsive.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
        <header>
            <a href="index.html" id="logo">
                <h1>Jack Clarke</h1>
                <h2>Designer</h2>
            </a>

            <nav>
                <ul>
                    <li><a href="index.html">Portfolio</a></li>
                    <li><a href="about.html" class="selected">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>

        <div id="wrapper">

            <section>
                <img src="img/jack.jpg" alt="Photograph of Jack Clarke" class="profile-photo">
                <h3>About</h3>
                <p> Hi, I'm Jack Clarke. This is my design portfolio where I share all of my best work. I like designing websites and ruining photos on Photoshop. When I'm not designing, I like playing football (soccer for you Americans) and raging on GTA V.</p>
                <p> If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/japhcl">@japhcl</a>.</p>
                <p> If you're interested in learning how to code websites like I do, be sure to click the image below which gives you 50% off your first month at Treehouse.</p>
                <a href="http://referrals.trhou.se/jackclarke" target="_blank"><img src="http://wac.a8b5.edgecastcdn.net/80A8B5/static-assets/assets/content/referral-badge-green.png"></a>
            </section>

            <footer>
                <a href="http://twitter.com/japhcl">
                    <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
                </a>

                <a href="https://www.facebook.com/japhcl">
                    <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
                </a>
                <p>&copy; 2014 Jack Clarke</p>
            </footer>

        </div>

    </body>
</html>

Main CSS:

/******************************
GENERAL
******************************/

body {
    font-family: 'Open Sans', sans-serif;
}

/* link */
a {
    text-decoration: none;
    color: #6ab47b;
}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

img {
    max-width: 100%;
}

h3 {
    margin: 0 0 1em 0;

}



/******************************
HEADING
******************************/

header {
    float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 0 0;
    width: 100%;
}

#logo {
    text-align: center;
    margin: 0;
}

/* JACK CLARKE styling */
h1 {
    font-family: 'Changa One', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

h2 {
    font-size: 0.75em;
    margin: -5px 0 0;
    font-weight: normal;
}



/******************************
NAVIGATION
******************************/

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}

nav ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
}

nav li {
    display: inline-block;
}

nav a {
    font-weight: 800;
    padding: 15px 10px;
}



/******************************
HEADING
******************************/

footer {
    font-size: 0.75em;
    text-align:center;
    padding-top: 50px;
    color: #ccc;
    clear: both;
}

.social-icon {
    width: 30px;
    height: 30px;
    margin: 0 5px;
}



/******************************
PAGE - PORTFOLIO
******************************/

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #bdc3c7;
}



/******************************
PAGE - ABOUT
******************************/

.profile-photo {
  clear: both;
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

#treehouse {
  clear: both;
  border-radius: 10%;
}



/******************************
PAGE - CONTACT
******************************/

.contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
}

.contact-info a {
    display: block;
    min-height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding: 0 0 0 30px;
    margin: 0 0 10px;
}

.phone a {
    background-image: url('../img/phone.png');
}

.email a {
    background-image: url('../img/mail.png');
}

.twitter a {
    background-image: url('../img/twitter.png');
}

.website a {
    background-image: url('../img/website.png');
}



/******************************
COLOURS
******************************/

/* SITE BODY */
body {
    background-color: #fff;
    color: #999;
}

/* green header */
header {
    background: #6ab47b;
    border-color: #599a69;
}

/* logo text */
h1, h2 {
    color: #fff;
}

/* nav background on mobile */
nav {
    background: #599a69;
}

/* nav link & visited */
nav a, nav a:visited {
    color: #fff;
}

/* selected nav link */

nav a.selected, nav a:hover {
    color: #32673f;
}

Responsive CSS:

@media screen and (min-width: 480px) {

    /******************************
    TWO COLUMN LAYOUT
    ******************************/

    #primary {
        width: 50%;
        float: left;
    }

    #secondary {
        width: 40%;
        float: right;
    }



    /******************************
    PAGE - PORTFOLIO
    ******************************/

    #gallery li {
        width: 28.3333333333%;
    }

    #gallery li:nth-child(3n + 1) {
        clear: left;
    }



    /******************************
    PAGE - ABOUT
    ******************************/

    .profile-photo {
        float: left;
        margin: 0 5% 80px 0;    
    } 
}





@media screen and (min-width: 660px) {

    /******************************
    HEADER
    ******************************/

    nav {
        background: none;
        float: right;
        font-size: 1.125em;
        margin-right: 5%;
        text-align: right;
        width: 45%;
    }

    #logo {
        float: left;
        margin-left: 5%;
        text-align: left;
        width: 45%;
    }

    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 0.825em;
        margin-bottom: 20px;
    }

    header {
        border-bottom: 5px solid #599a68;
        margin-bottom: 60px;
    }
}
Sebastian Bachmann
Sebastian Bachmann
7,046 Points 
/******************************
GENERAL
******************************/

body {
    font-family: 'Open Sans', sans-serif;
}

/* link */
a {
    text-decoration: none;
    color: #6ab47b;
}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

img {
    max-width: 100%;
}

h3 {
    margin: 0 0 1em 0;

}



/******************************
HEADING
******************************/

header {
    float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 0 0;
    width: 100%;
}

#logo {
    text-align: center;
    margin: 0;
}

/* JACK CLARKE styling */
h1 {
    font-family: 'Changa One', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

h2 {
    font-size: 0.75em;
    margin: -5px 0 0;
    font-weight: normal;
}



/******************************
NAVIGATION
******************************/

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}

nav ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
}

nav li {
    display: inline-block;
}

nav a {
    font-weight: 800;
    padding: 15px 10px;
}



/******************************
HEADING
******************************/

footer {
    font-size: 0.75em;
    text-align:center;
    padding-top: 50px;
    color: #ccc;
    clear: both;
}

.social-icon {
    width: 30px;
    height: 30px;
    margin: 0 5px;
}



/******************************
PAGE - PORTFOLIO
******************************/

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #bdc3c7;
}



/******************************
PAGE - ABOUT
******************************/

.profile-photo {
/*  clear: both;*/
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

/*#treehouse {
  clear: both;
  border-radius: 10%;
}
*/
.left {
  float: left;
  width: 500px;
}

.right {
  float: right;
  width: 400px;
}


/******************************
PAGE - CONTACT
******************************/

.contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
}

.contact-info a {
    display: block;
    min-height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding: 0 0 0 30px;
    margin: 0 0 10px;
}

.phone a {
    background-image: url('../img/phone.png');
}

.email a {
    background-image: url('../img/mail.png');
}

.twitter a {
    background-image: url('../img/twitter.png');
}

.website a {
    background-image: url('../img/website.png');
}



/******************************
COLOURS
******************************/

/* SITE BODY */
body {
    background-color: #fff;
    color: #999;
}

/* green header */
header {
    background: #6ab47b;
    border-color: #599a69;
}

/* logo text */
h1, h2 {
    color: #fff;
}

/* nav background on mobile */
nav {
    background: #599a69;
}

/* nav link & visited */
nav a, nav a:visited {
    color: #fff;
}

/* selected nav link */

nav a.selected, nav a:hover {
    color: #32673f;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Jack Clarke | Designer</title>
        <link href="normalize.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:700italic,400,700,800' rel='stylesheet' type='text/css'>
        <link href="main.css" rel="stylesheet">
        <link href="responsive.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
        <header>
            <a href="index.html" id="logo">
                <h1>Jack Clarke</h1>
                <h2>Designer</h2>
            </a>

            <nav>
                <ul>
                    <li><a href="index.html">Portfolio</a></li>
                    <li><a href="about.html" class="selected">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>

        <div id="wrapper">

            <section class="left">
                <img src="img/jack.jpg" alt="Photograph of Jack Clarke" class="profile-photo">
                <h3>About</h3>
                <p> Hi, I'm Jack Clarke. This is my design portfolio where I share all of my best work. I like designing websites and ruining photos on Photoshop. When I'm not designing, I like playing football (soccer for you Americans) and raging on GTA V.</p>
                <p> If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/japhcl">@japhcl</a>.</p>
                <p> If you're interested in learning how to code websites like I do, be sure to click the image below which gives you 50% off your first month at Treehouse.</p>
            </section>

            <section class="right">
              <a href="http://referrals.trhou.se/jackclarke" target="_blank"><img src="http://wac.a8b5.edgecastcdn.net/80A8B5/static-assets/assets/content/referral-badge-green.png"></a>
            </section>

            <footer>
                <a href="http://twitter.com/japhcl">
                    <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
                </a>

                <a href="https://www.facebook.com/japhcl">
                    <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
                </a>
                <p>&copy; 2014 Jack Clarke</p>
            </footer>

        </div>

    </body>
</html>
Paul Johnson
Paul Johnson
18,924 Points
Paul Johnson
Paul Johnson
18,924 Points

Try wrapping the p elements in a div like this 

<section>
                <img src="img/jack.jpg" alt="Photograph of Jack Clarke" class="profile-photo">
                <h3>About</h3>
        <div id="about">
                <p> Hi, I'm Jack Clarke. This is my design portfolio where I share all of my best work. I like designing websites and ruining photos on Photoshop. When I'm not designing, I like playing football (soccer for you Americans) and raging on GTA V.</p>
                <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/japhcl">@japhcl</a>.</p>
                <p>If you're interested in learning how to code websites like I do, be sure to click the image below which gives you 50% off your first month at Treehouse.</p>
        </div>
                <a href="http://referrals.trhou.se/jackclarke" target="_blank" id="thouse"><img src="http://wac.a8b5.edgecastcdn.net/80A8B5/static-assets/assets/content/referral-badge-green.png"></a>
</section>

Then in the responsive.css add the following in the first media query

#thouse {
        float:left;
        max-width: 30%;
        padding: 0 2%;      
    }
#about {
        float: left;
        max-width: 30%;
    }
Jack Clarke
Jack Clarke
1,335 Points

Thank you very much, Paul Johnson. It is finally perfect. There are few padding and margin issues that I need to fix but otherwise, it is great. Thanks!

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Try floating the second image to the right and decreasing the width of your text? :-)

Jack Clarke
Jack Clarke
1,335 Points

Hi,

Thanks, but it is still hanging low like this https://www.dropbox.com/s/p6a064ve33h9jgn/Screen%20Shot%202014-05-27%20at%2013.31.48.png.

Any other ways I can do it?

Jack Clarke
Jack Clarke
1,335 Points
Jack Clarke
Jack Clarke
1,335 Points

Hi,

Thanks, but it is still hanging low like this https://www.dropbox.com/s/p6a064ve33h9jgn/Screen%20Shot%202014-05-27%20at%2013.31.48.png.

Any other ways I can do it?

Jack Clarke
Jack Clarke
1,335 Points

Oops, double-posted :p

Sebastian Bachmann
Sebastian Bachmann
7,046 Points
Sebastian Bachmann
Sebastian Bachmann
7,046 Points

Hi,

or you define a new section for the image, like this for example:

      <section class="left">
        <!-- profile picture 200x200 -->
        <img src="img/nick.jpg" alt="Photograf of ..." class="profile-photo">
        <h3>About</h3>
        <p>Hi, i am ...</p>
        <p>If you'd like to follow me on twitter, my username is <a href="http://www.twitter.com/...">...</p>
      </section>
      <section class="right">
        <p>Test</p>
      </section>

and in your css file you go like this

.left 
{
  float: left;
}

.right {
  float: right;
}

Hope that helps and you get the idea ...

Regards, Sebastian

Jack Clarke
Jack Clarke
1,335 Points
Jack Clarke
Jack Clarke
1,335 Points

Hi,

Sorry to annoy you all but it nothing seems to be working for me at all. I have tried all of the suggestions but they just don't want to work!

Looks like I will just have to be content with the Treehouse image being below.

Thanks for you help!

Sebastian Bachmann
Sebastian Bachmann
7,046 Points
Sebastian Bachmann
Sebastian Bachmann
7,046 Points

So Jack Clarke

see my code and look for the changes in the html code where i added another section and the classes left and right. And have a look into the css definitions in the main.css file in the about page section.

Regards, Sebastian