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 CSS Foundations The Box Model Floats

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by 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,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 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;
}