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 Gabriel Rojas
Gabriel Rojas
1,380 Points

I want my div to occupy the entire remaining area on the right of a floating element

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/estilos.css">
</head> <body> <header> <div id="branding"> <div class="logo"> <img src="https://pbs.twimg.com/profile_images/748043752703406080/VSejBGEs.jpg" width="300" height="300"> </div> <div class="textlogo"> <h1>Michel Focault</h1> </div> </div> </header> </body> </html>

/* CSS */

header { background: green; overflow: hidden; }

.logo { float: left; }

.textlogo { float: left; width: 100%; background-color: red; }

3 Answers

Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points

So... let me clean that up for you.

<!DOCTYPE html> 
  <html> 
    <head> 
      <link rel="stylesheet" type="text/css" href="css/estilos.css">
    </head> 
    <body> 
      <header> 
        <div id="branding"> 
          <div class="logo"> 
            <img src="https://pbs.twimg.com/profile_images/748043752703406080/VSejBGEs.jpg" width="300" height="300"> 
          </div> 
          <div class="textlogo"> 
            <h1>Michel Focault</h1> 
          </div> 
        </div> 
      </header> 
    </body> 
  </html>

/* CSS */

header { 
  background: green; 
  overflow: hidden; 
}

.logo { 
  float: left; 
}

.textlogo { 
  float: left; 
  width: 100%; 
  background-color: red; 
}

Alrighty. Let's look at what is happening here. You have some boxes within boxes. Nice. The boxes that your image and h1 are stored inside of, however, are only as big as the content within them.

Imagine this, you are trying to buy a house. But you didn't specify what size house you wanted to purchase. The only thing you specified to your Realtor is the space YOU take up. I will make no assumptions about your personal size, I will only say that the house may be a tight fit no matter what size you may be. Let us assume that this house MUST be able to fit a large painting that is absolutely your favorite painting in the world (<img src="" />) It needs its own special room. We know the height and width of the painting, and the room will accommodate the painting, but what does that tell us about the size of your house? The height of the painting is 300px, so should the house be 300px tall? Perhaps you want to give it some extra room? (personal preference) At least... we know the height is 300px, therefore the rest of the div should be 300px tall.

We know the height will be 300px, but is that necessary? Essentially we want a house to take up 100% of the width the property provides, and that is our property (header) footprint. We can say that our houses name is #branding, and make #branding a percentage of that or a fixed value like px. #branding can take up the entire header property by setting that to 100% as well, but when we start putting our stuff like the painting (.logo) inside and float it left, it will sit on the far left-side of the screen and take up 300px width, but what about the h1? If we set that to 100% of the entire property... that may make our property height increase, but not get the result we desire, because it's taking up TOO much space.

So how do we fix that?

Gabriel Rojas
Gabriel Rojas
1,380 Points

I agree the painting should have it's own special room. Mi idea was to position the h1 element next to the img using float, but I could not find a width for the .textlogo div that decreased proportionally in relation to the size of the browser.

My idea was simple...one div next no another, each one occupying as much space as available (total width = |00%), so the guy below, Justin, proposed a solution: to use the calc property to calculate the width of the .textlogo div. It worked! There is so much to learn. I have to go on. Thanks!

About your question, I'm still researching...any suggestions?

Justin Otero
Justin Otero
4,959 Points
Justin Otero
Justin Otero
4,959 Points

The reason your .textlogo div is not directly up against your .logo div is because it's width property is set to 100%. Since .textlogo is a div which by default is a block-level element, which means it will take up 100% of it's parents width. This question stems from needing a better understanding on how html by default affects layout, and how you can modify layout through CSS.

Below is a link to a codepen that has your original code, and 3 different versions of your code to demonstrate how you may achieve what you want in 3 similar but different ways.

https://codepen.io/justinotero/pen/veQgzb?editors=1100

Hope this helps!

Gabriel Rojas
Gabriel Rojas
1,380 Points
Gabriel Rojas
Gabriel Rojas
1,380 Points

Thanks for your quick answer...First, I must tell that I understand I should learn the flexbox method asap, but if I can't understand the basics, how can I move forward later? Anyway, your solution:

.header2 {
  background: red;
}

.logo2 {
  float: left;
}
.textlogo2 {
  float: left;
  width: calc(100% - 300px);
  background-color: red;
}

is absolutly stunning for me, because it solved the width problem concerning the div which contained the h1 element by doing this calculation (I didn't knew this property at all). I Will learn this flexbox thing you speak about asap. Thanks Again!