Koekjes van dijk Koekjes van dijk - 13 days ago 6
CSS Question

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

Answer
.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.

Comments