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 Daniel Widyanto
Daniel Widyanto
5,626 Points

Image width exceeding its parents width

Hello,

I'm having exercise on my own to practice what I learnt in CSS Layout Techniques. It's been quite difficult, but I'm able to build my theme bit-by-bit.

Right now I'm stuck in this issue. Why did the image (img tag) inside the #banner has bigger width than its parents (#banner section) ?

My HTML code is:

<!DOCTYPE html>
<html>
  <head>
    <title>Iridium Fluid Theme</title>
    <!-- Prevent zoom out when viewing over small gadgets -->
    <meta name="viewport" content="width=device-width">
    <!-- Reset the CSS -->
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <!-- Add in the fonts -->
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200' rel='stylesheet' type='text/css'>
    <!-- Add our style -->
    <link rel="stylesheet" href="css/style.css" type="text/css">
  </head>

  <body>
    <div id="header-wrapper">
      <header>
        <img id="logo" src="image/butterfly_icon-164x128.png">
        <h1>The Iridium Fluid</h1>
        <h2>Practice makes perfect!!</h2>
        <nav>
          <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
      </header>
    </div>

    <div id="banner-wrapper">
      <section id="banner">
        <a href="#"><img src="image/pics01.jpg"></a>
      </section>
    </div>
  </body>
</html>

And my CSS code is:

/*---------------------------------------------------------------------------*/
/* Iridium fluid theme
 * Inspired by http://html5templates.com/iridium
 */
/*---------------------------------------------------------------------------*/
#header-wrapper {
  background: url('image/divider1-bg.png') repeat-x left bottom;
  padding: 0 0 12px 0;
}

header,
header h1,
header h2,
header ul {
  text-align: center;
  margin: 0 auto;
}

header h1 {
  font: normal 4em/1 'Yanone Kaffeesatz', 'sans-serif';
  text-transform: uppercase;
}

header h2 {
  font: normal 2.75em/1 'Yanone Kaffeesatz', 'sans-serif';
}

header ul {
  padding: 0 0;
}

header li {
  list-style: none;
  background: #31363C;
  border-radius: 5px;
  margin: 2px 2px;

}

header li a {
  display: block;
  font-size: 1.25em;
  color: #919497;
  text-decoration: none;
  text-transform: uppercase;
  padding: 8px 0;
}

header li a.active,
header li a:hover {
  color: #FFF;
}

/*---------------------------------------------------------------------------*/
#banner-wrapper {
  background: url(image/banner-wrapper-bg.png) repeat;
}

section#banner {
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
}

section#banner img {
  margin: 10px auto;
  width: 100%;
  padding: 10px 10px;
  border: 1px solid #E1E1E1;
  background: #FAFAFA;
}

The issue is within section#banner img. Although its width is specified as 100%, the result is that its width is exceeding section#banner width.

Appreciate your help a lot =)

Thank you in advance

Best Regards, -Daniel

2 Answers

Geert-Jan Hendriks
Geert-Jan Hendriks
23,126 Points

You've added padding and a border to the image, so the width of your image is 100% + 20px (padding) + 2px (border). When you remove the padding and border, the image wil fit.

Daniel Widyanto
Daniel Widyanto
5,626 Points

Thanks !! You're right about the padding, but I want the padding to create the border (otherwise the border won't be visible). I managed to solve it by adding "box-sizing: border-box;"

section#banner img {
  margin: 10px auto;
  width: 100%;
  padding: 10px 10px;
  border: 1px solid #E1E1E1;
  background: #FAFAFA;
  box-sizing: border-box;
}
Ryno Botha
PLUS
Ryno Botha
Courses Plus Student 4,055 Points
Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points

Try using Width: auto; instead of width: 100%;

Check this Link out:

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Hope it was what you where looking for ^^

Also look at this:

http://www.impressivewebs.com/width-100-percent-css/

Daniel Widyanto
Daniel Widyanto
5,626 Points

The "width: auto" doesn't resize my image when the viewport is smaller. The image now is oversize, if I downsize the browser size.

Thanks for the suggestion though.