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 Pol Ribas Pibernat
Pol Ribas Pibernat
8,952 Points

List overflow over a DIV

Hi,

I am trying to make a list of books with its picture and details in a list inside a div. I have nearly finished it, but the details go over the other books.

How it looks like: http://nimb.ws/uNtd6K

I would like to wrap the text to continue below it and not go over the next book featured image.

Here you have the HTML:

<ul class="lista-libros">

    <?php foreach ($libros as $item) { ?>
        <li class="item-libro">
            <div class="imagen-portada-libro">
                <?php echo $item['portada']; ?>
            </div>
            <div class="detalles-libro">
                <ul>
                    <li><strong>Título:</strong> <?php echo $item['titulo']; ?></li>
                    <li><strong>Autor/a:</strong> <?php echo $item['autor']; ?></li>
                    <li><strong>Año:</strong> <?php echo $item['año']; ?></li>
                    <li><strong>Editorial:</strong> <?php echo $item['editorial']; ?></li>
                </ul>
            </div>
        </li>
    <?php } ?>

</ul>

And here you have the CSS:

.lista-libros { position:relative; margin: 0 auto; list-style: none; overflow-y:hidden; overflow-x: auto; text-align:center; white-space:nowrap; -webkit-overflow-scrolling:touch; height:180px; }

.item-libro { max-width: 100%; width:270px; display:inline-block; vertical-align: top; margin-top:10px; margin-bottom:10px; margin-left: 10px; }

.imagen-portada-libro{ position:relative; float:left; height:160px; display: inline-flex; margin-right:8px; padding:2px; box-shadow: 0px 0px 5px #888888; }

.detalles-libro li { text-align:left; word-wrap:break-word; }

.detalles-libro { width:100%; }

Thanks!

2 Answers

Gryphon Chandler
Gryphon Chandler
12,668 Points
Gryphon Chandler
Gryphon Chandler
12,668 Points

Hey Pol,

Since .item-libro is 270px, the 2 divs inside it should add up to no more than 270px. If you are in Chrome, press CTRL I, and check if those 2 divs are adding up to more than 270px. If they are, you should set them like so:

.imagen-portada-libro {
    width: 100px;
}

.detalles-libro {
    width: 170px;
}
Pol Ribas Pibernat
Pol Ribas Pibernat
8,952 Points

Hi gryphon!

I have tried it but the texts doesn't do anything... It keeps going over the image. I have also tried to respect the margins & paddings because .imagen-portada-libro = 100px + 2px (padding) + 8px (margin) = 110px. So I set .detalles-libro width to 160px instead of 170px. but it isn't working.

thanks!

Gryphon Chandler
Gryphon Chandler
12,668 Points
Gryphon Chandler
Gryphon Chandler
12,668 Points

Check out the overflow and word-wrap CSS properties, maybe they can help.