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

nicholas maddren
nicholas maddren
12,793 Points
Posted by nicholas maddren
nicholas maddren
12,793 Points

Dynamic width div styling

Hey guys I have this code:

HTML:

<div class="listing-container-spec">
          <img src="media/img/mercedes-test.jpg" alt="mercedes-benz">
          <div class="ul-listing-container">
            <ul>
              <li class="diesel-svg">Diesel</li>
              <li class="hatch-svg">Saloon</li>
            </ul>
          </div>
        </div>

CSS:

.listing-container {
    background-color:#eee;
    padding:0;
    border-radius:6px 6px 0 0;
    -moz-box-shadow:inset 0 0 10px #000000;
    -webkit-box-shadow:inset 0 0 10px #000000;
    box-shadow:inset 0 0 5px #9e9e9e;
    padding:1px 10px;
    overflow:auto;
}

.listing-container-spec {
    background-color:#153066;
    width:100%;
    height:auto;
    display:block;
    position:relative;
    overflow:auto;
}

.listing-container-spec img {
    max-width:60%;
    margin: 5px 0  5px 5px;
    float:left;
}

.model-listing-title {
    font: 600 1.5em 'Open Sans', sans-serif;
    margin-top:0.1em;
    width:75%;
    float:left;
    color:#000;
}



.price-listing {
    font: 700 2em 'Open Sans', sans-serif;
    margin-top:0.1em;
    float:right;
    margin-top:0.1em;
}

.diesel-svg {
    list-style-type: none;
    background:url(/../media/img/fuel.svg);
    background-size: 25px;
    background-repeat: no-repeat;
    padding-left:25px;
    float:left;
    color:#eee;
    font: 400 1.2em 'Open Sans', sans-serif;
    margin: 5px 10px;
}

.hatch-svg {
    list-style-type: none;
    background:url(/../media/img/saloon.svg);
    background-size: 45px;
    background-repeat: no-repeat;
    padding-left:45px;
    float:left;
    color:#eee;
    bottom:5px;
    font: 400 1.2em 'Open Sans', sans-serif;
    margin: 5px 10px;
    background-position: 0px 7px;
}

.ul-listing-container {
    width:39%;
    float:left;
}

Now as you can see .ul-listing-container is 39% width and .listing-container-spec img is 60%, when I make the viewport smaller the two elements don't scale down on the same float line they go onto other lines. How can I stop this, I want them to both dynamically scale down and stay on the same float?

Thanks

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Nicholas,

Does it look like this is happening when the container element is less than 500px wide?

What i think is happening is that with your two elements adding up to 99% this means you only have 1% extra space available.

When the parent is 500px wide then that 1% works out to 5px. You have a left margin of 5px on your img so I think that's the cutoff point where it all fits perfectly.

Below 500px there's no longer enough space to accommodate the 5px margin and it doesn't fit anymore.

I don't know if you really need that left margin or not but 1 solution is to remove that margin and float the img left and the ul right. This way you have a 1% buffer of free space in between.

Or change the 5px left margin to 1% and then it can shrink below 5px at the small widths.