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!

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

Ryan Decker
Ryan Decker
3,451 Points
Posted by Ryan Decker
Ryan Decker
3,451 Points

Is it possible to add a background behind floated images? Is it possible to add borders around floated images?

I was trying to add a border behind my floated images. Initially they were in a "container" div, but since floating are no longer inside it.

Also haven't been able to add a border around the images.

Here's the code I have:

/*-----------General-------------*/


}

* {box-sizing:
    border-box;
  }

body {
    margin: 0;
      font: 1em/1.2 "Helvetica Neue", Arial, sans-serif;
    width: 100%;
}


#state {width: 100px;
margin: 0;}

img {width: 100%;

}

.round {border-radius: 100%;
}


/*-----------Font/Size-------------*/

h1, h2 {
    color: #fff;
}


h1 {
    font-size: 6rem;
    padding-bottom: 5px;
    padding-top: 10px; 
}

h1 {font-family: 'Coda Caption', sans-serif;}



h2 {font-size: 2rem;}



/*-----------NAV-------------*/

.nav {padding-left: 0;}

 li {display:inline-block;
     color: #fff;
     margin: 10px 20px 0 20px;
}

li:hover {color: gold;
font-size: 1.8rem;} 

ul {list-style: none;
  font-size: 1.5rem;
}

/*-----------Header-------------*/

#header {
    text-align:center;
    padding-top: 50px;
    background: 
    linear-gradient(0deg, #fff 2%, transparent),
    url('../img/sky2.jpg') no-repeat center;
    background-size: cover; 
    padding-bottom: 300px;


}

/*-----------Gallery-----*/

#container {width: 80%;
margin: auto;
padding: 20px;
}

.one, .two, .three {width: 25%;
margin: auto;
padding: 4%;
float: left;
}




/*-----------QUERIES-------------*/

@media (max-width: 800px) { 
h1 {font-size: 4rem;} 
.one, .two, .three {width: 70%;
padding: 30px 16%;
margin: auto;}
} 

@media (max-width: 600px) { h1 {font-size: 3rem;}
.one, .two, .three {width: 80%;
padding: 10%;
margin: auto;}
} 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Pittsburgh</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Coda+Caption:800' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>

  <div id="header">
    <ul class="nav">
     <a href="#"><li> Home </li></a>
     <a href="#"><li> About </li></a>
     <a href="#"><li> Info </li></a>
    </ul>
    <h1>PITTSBURGH</h1>
    <div id="pa"><img src="img/pa.png" id="state"></div>
    <h2>The Steel City</h2>
    <h2>&hArr;</h2>
  </div>

  <div id="container">
    <div class="one">
    <img src="img/map.jpg" class="round">
    </div>
     <div class="two">
    <img src="img/strip.jpg" class="round">
    </div>
     <div class="three">
    <img src="img/ice.jpg" class="round">
    </div>
  </div>  
</body>
Larry Neese
Larry Neese
2,544 Points
Larry Neese
Larry Neese
2,544 Points

Regarding adding a border around floated images, I was successfully able to add a border around a floated image I was working with which is contained inside an <li> element. See below for html and css:

      <li id="test1">
        <a href="img/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
          <p>Experimentation with color and texture.</p>
        </a>
      </li>

#test1 {
    border-style: solid;
    border-width: 5px;
}

2 Answers

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Yes to both question, but keep in mind that according to some circumstances, you might want to use a clearfix altought floated elements are still in the flow.

I created this pen to show you. You have two wrapper and both have a kiwi image inside it, one of the wrapper has a clearfix class, which is cf this allows to fix the issue you can have in some cases, like the wrapper under which doesn't have this cf class. Add one, you'll see, It'll fix the issue.

Gordon Reeder
Gordon Reeder
2,521 Points
Gordon Reeder
Gordon Reeder
2,521 Points

I guess that you can do backgrounds. I never tried it. But you can do borders. Like this:

.floating_img_r
{
    float:right; 
    border:4px solid #336699; 
    margin:20px;
}