CODEWITHSUNDEEP
htmlcss
Paul de Koning
Paul de Koning

Reputation: 532

CSS 100% width inside div

Sorry, I couldn't word my title properly. I have got a question about my CSS code. I tried putting everything in JSfiddle but that would work, sorry.

I don't know how I can make the div 'infoMovie' extend until the end of the div 'displayMovie'.

HTML:

<div class="content">
            <div class="displayMovie">
                <div class='imageCover'>
                    <img src='Endgame-movie-cover.jpg' width="100">
                </div>
                <div class='infoMovie'>
                    <div class='imageTitle' >
                        End game
                    </div>
                    <br>
                    <div class='imageDesc'>movie about everything in life lollllllllllllllllllllllllllllllllll
                    </div>
                </div>
            </div>
        </div>

And CSS:

.displayMovie {
        width: 100%;
        display: inline-block;
        border-bottom: 1px solid black;
    }

.imageCover {
    border-right: 1px solid black;
    padding: 10;
    float: left;
}

.imageDesc {
    border-top: 1px solid black;
    word-break: break-all;
}

.imageTitle {
    font-weight: bold;
    font-size: 18pt;
    margin: 5 10 5 10;
    display: inline-table;
}

.infoMovie {
    display: inline-block;
}

So basically I want to extend infoMovie to 100% of the rest of displayMovie.

Image of how the web page looks: I want to change the 'this is a movie which contains loads of action' until the end of the page

I want to change the 'this is a movie which contains loads of action' until the end of the page

Upvotes: 0

Views: 1384

Answers (1)

Rounin
Rounin

Reputation: 29511

.infoMovie {
display: inline-block;
}

means the .infoMovie div will be no wider than the content it contains.

You can remove this style declaration.

You want .infoMovie to exhibit the normal block-level behaviour of a div element.

As a block-level element (<div>), it will extend to the width of its parent, naturally.

Upvotes: 2

Related Questions