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

Posted May 2, 2016 7:45am by

How to clear the text under the image?

I've set the image to float left, but unfortunately because I set a bunch of text in my about page, when I resize the browser to be smaller, the text reside under the image, how to keep it stay on the right?

May 2, 2016 7:53am

Hello Fadli, could you pls send a snapshot of your workspace or copy-paste the html and css codes into the comment below thanks!

May 2, 2016 7:58am

sorry if I incriminate you,

This is my about.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fadli Hidayatullah | Developer + Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Fadli Hidayatullah</h1>
        <h2>Developer + 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/fadli.jpg" alt="Photograph of Fadli" class="profile-photo">
        <h3>About</h3>
        <p>
          My name is Fadli Hidayatullah, I’m a web developer
and web designer. I start my career at 2016.
I have created many kinds of web sites
and web applications. When I’m not designing or
building things, I enjoy reading, thinking and
learning some new things.
        </p>

        <p>
          If you’d like to follow me on Twitter,
don’t bother to do it, username <a href="http://twitter.com/herocode27">@herocode27</a>.
        </p>
      </section>

      <footer>
        <a href="http://www.facebook.com/herocode27"><img src="img/facebook-wrap.png" alt="Facebook" class="social-icon"></a>

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

        <p>&copy; 2016 Fadli Hidayatullah.</p>
      </footer>
    </div>
  </body>
</html>

This is the Main.css

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

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

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

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

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

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

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

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

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


/*******************************
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;
}
/*******************************/



/*******************************
FOOTER
*******************************/

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

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

footer p {
  padding: 0;
  margin: 0;
}

/*******************************/


/*******************************
PAGE: PORTFOLIO
*******************************/

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

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background: #f5f5f5;
  color: #bdc3c7;
  border-radius: 0 0 5px 5px;
}

#gallery img {
  border-radius: 5px 5px 0 0;
}

#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%;
}


h3 {
  margin: 0 0 1em 0;
}

/*******************************/


/*******************************
PAGE: ABOUT
*******************************/

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

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

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

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

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


/*******************************/


/*******************************
COLORS
*******************************/

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

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

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

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

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

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

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

And this is the media queries

/* first breakpoints encapsulate for mobile in landscape mode */
@media screen and (min-width: 480px) {
  /*******************************
  TWO COLUMNS LAYOUT
  *******************************/

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

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

  /*******************************
  THREE COLUMNS LAYOUT

  3 * 5 = 15%
  100% - 15% = 85%
  85% / 3 = 28.33333333333333%;
  *******************************/

  #gallery li {
    width: 28.33333333333333%;
  }

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


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


}

May 2, 2016 11:29am

http://codepen.io/anon/pen/ONaxVV

Looks fine, once you go to the smaller width, your h3 and p jumps under the .profile-photo

Dont you think that image and text side by side will make your h3 and p very crowded?

4 Answers

May 2, 2016 8:06am

This is the correct behaviour when you float an element. Other elements will position around it when there is room.

Sounds like what you want is equal height columns which is tricky to do with css. There are ways though: https://css-tricks.com/fluid-width-equal-height-columns/

May 3, 2016 1:37am

Yep, thank you Mr. Paul Yabsley, it's fixed now.

May 2, 2016 8:53am

It's good practice to set small screens as a single layer column for readability but since I am on my phone I can't preview your code.

Make sure you set the width of your text content so the image and content total 100% of its container, also remember to add your gutters to create space between your content.

* {
  box-sizing: border-box;
}

This might also help to contain your elements because your margin and padding can cause funky stuff if not contained within the element. Include it at the very top of your css.

Remember how containers may collapse with floated elements so don't forget to apply a clearfix:)

Apologies if I'm getting a head of myself happy coding.

May 3, 2016 1:40am

I still have a problem that I struggled with this, when I moved to the another page; About/Contact page, the content inside the header pushed to the right a little bit, I'm very confused how to fix it. This is my page : http://port-80-7kzmur6iux.treehouse-app.com/How%20to%20make%20website/about.html

May 3, 2016 10:43am

I believe you should "fork" the workspace if you want people to access it.

May 4, 2016 3:27am

Here is my website, when you click the about or contact page, the content inside the header push to the right a little bit in tablet/desktop screen http://fadlihidayatullah.96.lt/

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Fadli Hidayatullah

Fadli Hidayatullah

How to clear the text under the image?

Kailash Seshadri

Kailash Seshadri

Fadli Hidayatullah

Fadli Hidayatullah

Vlad Legkowski

Vlad Legkowski

4 Answers

Paul Yabsley

Paul Yabsley

Fadli Hidayatullah

Fadli Hidayatullah

Mark Pryce

Mark Pryce

Fadli Hidayatullah

Fadli Hidayatullah

Julien riera

Julien riera

Fadli Hidayatullah

Fadli Hidayatullah