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 Diego Villaseñor
Diego Villaseñor
12,615 Points

Trouble handling floating images

Hi all, I've been working on a portfolio site, and I have had some trouble handling floating images. Specifically, in one page where I have a section with two images floating to the left (other similar pages just have one image, and then there's no problem).

  1. In the mobile version I have the following problem: the floated images are not centered (here's a link with an image of the page as displayed in Chrome http://www.mediafire.com/view/f4xw1957v3ffe7n/max-width%20480px.png ).

  2. In the medium sized version the the problem is somewhat different, the soundcloud iframe should appear below the images, but it doesn't ( http://www.mediafire.com/view/5wbls4o9yp9brwl/medium%20display%20(max-width%201399px).png ).

  3. The version for larger displays works almost fine, except at very large sizes, where the second image doesn't appear to be the same size as the first one ( http://www.mediafire.com/view/7n7o1x5d7edt4dr/very%20large%20(max-width%201400px).png http://www.mediafire.com/view/7n7o1x5d7edt4dr/very%20large%20(max-width%201400px).png ). Is there a way to fix this?

Here's a copy of my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Diego Vid Eco</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div id="headerWrapper">
      <header>
        <h1>Diego Vid Eco</h1>
        <h2>Compositor</h2>
        <nav>
          <ul>
          <li><a href="index.html">Dossier</a></li>
          <li><a href="acerca.html">Acerca</a></li>
          <li><a href="contacto.html">Contacto</a></li>
          </ul>
        </nav>
        <nav id="masinfo">
          <ul>
            <li><a href="por-las-marcas-de-la-cueva.html">Por las marcas de la cueva</a></li>
            <li><a href="espiritu-penetrando-en-arbol.html" class= "selected">Espíritu penetrando en Árbol</a></li>
            <li><a href="21-nubes.html">21 Nubes</a></li>
            <li><a href="redwood-region.html">Redwood Region</a></li>
          </ul>
        </nav>
      </header>
      </div>
    <div id=wrapper>
      <h4>Espíritu Penetrando en Árbol (Microdrama) (2013): fenomenología sonora de una fantasía</h4>
      <section class = "notas">
        <p>Espíritu penetrando en Árbol nace de la exploración del modo en el que una representación visual puede ser escuchada. Se toma un dibujo y se decide sobre él un recorrido visual. Según la intuición del oído, el sonido emanará automáticamente como respuesta al gesto gráfico. El proceso será siempre el mismo: la reacción de un cuerpo ante su encuentro con otro.</p><p>
Es también, la convergencia entre lo imaginario y lo real: los sonidos y el silencio del bosque, su existencia evidente para el oído, y la sonoridad desconocida del espíritu.</p><p>
El intérprete, él mismo bosque, árbol, espíritu y compositor. Todos los eventos, un mismo devenir: asombro ante la corporalidad del sonido, no se le puede producir sin el cuerpo en movimiento. Se diría de una situación sonora, que toma posesión del músico; o de otro modo, que es sólo el efecto de una danza.</p>
      </section>
      <section id ="wrapscore">
        <ul>
        <li><img src = "img/EPEA1.png" alt = "Una selección de la partitura de la obra"></li>
        <li><img src = "img/EPEA2.png" alt = "Otra selección de la partitura de la obra"></li>
        </ul>
      </section>
        <section class="sound">
            <iframe scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141450360&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
      </section>
      <footer>
        <a href = "http://www.soundcloud.com/diegovideco"><img src = "img/Soundcloud-Icon.png" alt = "Soundcloud Icon" class = "social-icon"></a> 
        <a href = "http://www.facebook.com/axvdejl"><img src = "img/facebook-Icon.png" alt = "Soundcloud Icon" class = "social-icon"></a> 
        <p>&copy; Diego Villase&ntilde;or de Cortina 2015</p>
      </footer>
      </div>
  </body>
</html>

/*===============
     GENERAL
================*/

/*
font-family {

 }
*/


a {
  text-decoration: none;
}

iframe {
  width: 100%;
  height: 300px;
}

* {
box-sizing: border-box;
}  


/*===============
     FONT
================*/

h1 {
 font-size: 2.1em;
}

p {
  font-size: 1.2em;
  color: white;
}

a {
  color: white;
  font-weight: 800
}

a:hover {
  color: #bbb;
}

/*===============
     BODY
================*/
/*
#headerWrapper {
  width: 100%;
}
*/



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

body {
 background-image: radial-gradient(#598839, #598838);
}


/*===============
     Header
================*/
header {
  background: black;
  max-width: 100%;
  margin: -16px 0 0 0;
  padding-top: 1%;
}

h1{

  margin: 0 0 10px 0;
  padding: 16px 0 0 0;
}

h1,
h2 {
  float: left;
  text-align: center;
  width: 100%;
  color: grey;
}

h2 {
  margin-top: 3px;
}

/*===============
     Navigation
================*/

nav {
 text-align: center;
 padding: 10px 0;
 margin: 5px 0;
 max-width: 100%;
}

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

nav li {
  display: inline-block;
  padding: 0%;
}

nav a {
  padding: 15px 10px;
  font-size: 1.7em;

}

nav .selected {
  color: #888;
}

#masinfo {
  background: #111;
/*  padding: 0 -14px -13px -14px;*/
  overflow: auto;
}

#masinfo li {
  margin: 1px;
  padding: 5px 5px 0;
  color: #787
}
/*===============
     CITA
================*/

.cita {
  max-width: 100%;
  text-align: center;
}

.autor {
/*  max-width: 85%;*/
  text-align: right;
}


/*===============
     GALLERY
================*/

.gallery {
  margin:0;
  padding: 0;
  list-style: none;
/*  overflow: auto;*/


}

.gallery li {
  max-width: 40%;
  max-height: 40%;
  padding-bottom: 1%;
  margin: 1% 4%;
  float: left;
}

.gallery .mas {
  font-size: 1em;
  font-weight: 500;
  color: #dd8;
}

.mas:hover {
  color: #ee8;
}


/*===============
  + INFO 
================*/
h4 {
  text-align:center;
  font-size: 1.7em;
}

.score img {
  float: left;
  max-width: 40%;
  margin: 0 auto;
}

#wrapscore {
  max-width:40%;
  float: left;
}

#wrapscore ul {
    list-style: none;
}

/*#wrapscore li,*/
#wrapscore img {
  float: left;
  max-width: 100%;
  display: inline-block;
  margin: 0 0 5px;
  padding: -10px;
}

.notas {
  float: right;
  max-width: 55%;
  margin-left: 2.5%;
  text-indent: 50px;
  text-align:justify;
}

.sound iframe{
  height: 5%;
}

.italicas {
  font-style: italic;
}

/*===============
  Acerca 
================*/

.acerca,
.contacto {
  text-align: justify;
}


/*===============
  FOOTER 
================*/

footer {
  text-align: center;
  padding-top: 50px;
  clear: both;
}

.social-icon:hover {

    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

  -webkit-transition: 0.3s all ease-in;
  -o-transition: 0.3s all ease-in;
  -moz-transition: 0.3s all ease-in;
  transition: 0.3s all ease-in;
}

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


/*===============
  FLOAT CLEARFIX
================*/

.group {
  content: "";
  display:table;
  clear: both;
}



/*===============
  MEDIA QUERIES
================*/

@media (min-width: 1400px) {
  #wrapper {
    max-width: 100%;
  }
  .gallery li {
    max-width:23%;
    padding: 1.5%;
    margin: 0.5%;

  }
  .sound {
  margin-top: 80px;
  float: right;
  width: 55%;
  }
}

@media (max-width: 1399px) {
  .sound {
  margin-top: 60px;
  float: left;
  width: 40%;
  }
}

@media (max-width: 480px) {
  .gallery li {
    max-width:100%;
/*
    max-height: 70px;
*/
    padding: 7%;
    margin: 5px auto;
  }

  .notas,
  .score,
  .score {
    max-width:100%;
/*
    max-height: 70px;
*/
    margin: 10px auto;
    display: inline-block;
  }

/*
  .score img {
    max-width: 100%;
    margin: auto;

  }
*/

  .sound {
  width: 100%;
  }



  .cita,
  .autor {
    display: none;
  }

  #wrapscore {
    max-width: 100%;
    margin: 5px auto;
  }
}

Thanks in advance.

PS. Any other comments are also welcome :).

2 Answers

Maor Tzabari
Maor Tzabari
1,762 Points
  1. the images aren't center because it's inside of ul tag, and it gets the default padding, you need to overwrite it like that:

CSS: #wrapscore ul { padding:0; }

  1. learn more about the Clear method, when to use it, sometimes and specially when using the float, the div below will inherit some of it, so you need to clear the float and make the Sound div start to react as normal, so you will need to clear it like that:

CSS: .sound { clear:both; }

  1. I assume your images aren't the same width, if you want it to be give both of them the same width
Diego Villaseñor
Diego Villaseñor
12,615 Points
Diego Villaseñor
Diego Villaseñor
12,615 Points

Thanks Maor!