How to prevent overflow of content from its parent container in HTML/CSS?
Question
I want the red dotted line to be within the black solid line, ie, I don't want the content to overflow beyond the black solid line. I have added the min-height for the container class as well, yet the content overflows. Can you suggest modifications in my code for the same. Thanks!
Here's the HTML code-
.container{ position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; min-height: 300px; border: 1px solid black; } .item_1{ position: absolute; left: 10%; height: 210px; width: 210px; border: 1px dashed green; float: left; } .item_2{ position: absolute; left: 50%; width: 210px; transform: translate(-50%); height: 210px; border: 1px dashed green; float: left; } .item_3{ position: absolute; right: 10%; width: 210px; height: 210px; border: 1px dashed green; float: left; } .img{ padding: 5px; } .content{ text-align: center; font-family: Roboto; font-weight: bold; min-height: 90px; border: 1px dashed red; }
<html> <head> <link rel="stylesheet" href="second.css"> </head> <body> <div class="container"> <div class="item_1"> <img src="1.jpg" alt="Arya Stark" class="img"> <div class="content"> <h3>Arya Stark</h3> <p>I am Arya Stark of House Winterfell.</p> </div> </div> <div class="item_2"> <img src="2.jpg" alt="Jon Snow" class="img"> <div class="content"> <h3>Jon Snow</h3> <p>I am a bastard and the king in the north.</p> </div> </div> <div class="item_3"> <img src="3.jpg" alt="Tyrion Lannister" class="img"> <div class="content"> <h3>Tyrion Lannister</h3> <p>I am the dwarf of Casterly Rocks and the hand to Danerys Targaryen</p> </div> </div> </div> </body> </html>
2 answers
solution1
4 2017-08-11 21:01:46
Because the internal items are absolutely positioned, it takes them out of the "flow" of the document. The .container doesn't know where they end.
If you're trying to get an evenly-spaced 3-column layout, consider flexbox or CSS grid .
Example using flex:
.container { display: flex; justify-content: space-around; border: 1px solid black; } .item { border: 1px dashed green; width: 210px; } .img { padding: 5px; } .content { text-align: center; font-family: Roboto; font-weight: bold; min-height: 90px; border: 1px dashed red; }
<div class="container"> <div class="item"> <img src="https://secure.gravatar.com/avatar/06f9bcd6524b095222a3b735927405d7?s=200&d=retro&r=pg" alt="Arya Stark" class="img"> <div class="content"> <h3>Arya Stark</h3> <p>I am Arya Stark of House Winterfell.</p> </div> </div> <div class="item"> <img src="https://secure.gravatar.com/avatar/06f9bcd6524b095222a3b735927405d7?s=200&d=retro&r=pg" alt="Jon Snow" class="img"> <div class="content"> <h3>Jon Snow</h3> <p>I am a bastard and the king in the north.</p> </div> </div> <div class="item"> <img src="https://secure.gravatar.com/avatar/06f9bcd6524b095222a3b735927405d7?s=200&d=retro&r=pg" alt="Tyrion Lannister" class="img"> <div class="content"> <h3>Tyrion Lannister</h3> <p>I am the dwarf of Casterly Rocks and the hand to Danerys Targaryen</p> </div> </div> </div>
solution2
1 2017-08-12 01:44:45
You have your container (an empty box) basically with nothing in it, since you use absolute position on all of your items. To give your container the 'weight' of items inside of it (what you're looking for) you would need to change your styles on the items to make the container realize that there is something inside of it.
I wouldn't use anything fancy for this. I'd just use percentage values for everything. (even tho I didn't in my fiddle) That will keep it simple and provide some basic understanding of columns in a fluid grid. 33% for 3 col, 25% for 4 col etc.
We can start by editing your container a little bit, since the new styles will handle the height you're looking for.
.container{
position: relative;
text-align:center;
width: 100%;
border: 1px solid black;
}
That will provide a better container centering the items in it.
Then you can add the correct styles to the items.
.item_3, .item_2, .item_1 {
vertical-align:top;
padding: 10px;
display: inline-block;
max-width: 140px
}
That should give a decent idea of what you're wanting to achieve. It is better this way because your container now has 'weight' and will be fluid to the height of the items inside of it. I'm sure you can handle adjusting the padding and max-width areas to get that to your liking.
Here is a Fiddle example: https://jsfiddle.net/70pLs8j1/
That should get you more on track for what you're looking to do.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.