Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations The Box Model Floats

Elena Paraschiv
Elena Paraschiv
9,938 Points

float if there is another image above?please help

How can I center and position the logo image above the div? Imgur Here is my code:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>Elena Paraschiv</title>
    <link rel="stylesheet"  href="css/normalize.css">
    <!-- fonturile -->
    <link rel="stylesheet"  href="css/main.css">
    <script="js/picturefill.min.js" async></script>
</head>

<body>

<header>
    <a href="img/logo.png" class="logo"> 
        <img src="img/logo.png" id="logo">
    </a>

</header>

<nav>

</nav>

<div class="group">
    <h2>About Me </h2>
<img src="img/me.jpg"/>


<p> Hej. Numele meu este Elena. Visul meu este sa calatoresc in toata lumea si sa fac designuri minunate de websiteuri. sa traiesc alaturi de oameni frumosi si sa-mi fac viata minunata. va iubesc si va doresc o viata frumoasa! </p>
</div>



</body>

</html>

CSS

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

body{
    background:#be9f23  ;
    margin:100px 0 0 0;
}


#logo{
   display: block;
    margin:0 auto;
}


.logo{
    display:block;
    position:center;

}

div{
    margin:0  auto;
    width:720px;
    background:#2862d7;
    color:white;
    border-radius:10px;
}
h2{
    margin:50px 10px;
}

p{

    width:500px;
    background:#23be85;
    color:white;
    float:left;

}

img{
    float:left;
    margin:0 25px 0 0;
    border-radius: 10px;

}




.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  *zoom: 1;
}

1 Answer

Gianmarco Mazzoran
Gianmarco Mazzoran
22,052 Points

Hi,

try something like this:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>Elena Paraschiv</title>
    <link rel="stylesheet"  href="css/normalize.css">
    <!-- fonturile -->
    <link rel="stylesheet"  href="css/main.css">
    <script src="js/picturefill.min.js" async></script> <!-- error fixed in the script tag -->
</head>

<body>

<header>
    <a href="#" class="logo"> 
        <img src="img/logo.png" id="logo">
    </a>

</header>

<nav>

</nav>

<div class="group">
    <h2>About Me </h2>
<img class="photo" src="img/me.jpg"/> <!-- assingn this img tag with the class "photo" -->


<p> Hej. Numele meu este Elena. Visul meu este sa calatoresc in toata lumea si sa fac designuri minunate de websiteuri. sa traiesc alaturi de oameni frumosi si sa-mi fac viata minunata. va iubesc si va doresc o viata frumoasa! </p>
</div>



</body>

</html>

and for the css:

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

body{
    background:#be9f23  ;
    margin:100px 0 0 0;
}

/* the style for centering the image above the div */
header {
  width: 100%;
  background: tomato; /* the tomato color is just make things visible and for personal taste!  */
  text-align: center;
}


div{
    margin:0  auto;
    width:720px;
    background:#2862d7;
    color:white;
    border-radius:10px;
}
h2{
    margin:50px 10px;
}

p{

    width:500px;
    background:#23be85;
    color:white;
    float:left;

}

/* the class that replace the img target, since this was override the img tag in the header */
.photo{
    float:left;
    margin:0 25px 0 0;
    border-radius: 10px;

}




.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  *zoom: 1;
}