I'm currently developping a website and encountered a problem with CSS.
I have a parent div
containing 2 or more children: one containing the name of a user that sits on top of the other children, and just below 1 or more side by side div
s which display items owned by the user.
At the moment it works fine, but if the user's name (top div
) is larger than the total width of the div
s below, it will expand the parent div
.
I'd like to only allow the bottom div
s to expand the parent div
and make the title div
use the full parent div
's width without being able to make it larger.
I created a fiddle about it: http://jsfiddle.net/mLxjL/2/
HTML:
<div class="matches">
<div class="match-container">
<div class="user-match-container">
<div class="match-owner user">You</div>
<div class="match">
<div class="thumbnail">
<img class="image-container" src="img-path">
<div class="thumbnail-count">2</div>
</div>
<div class="item-name">The Zeppelin of Consequence (Trading Card)</div>
</div>
</div> <span class="arrow">→</span>
<div class="user-match-container">
<div class="match-owner friend">PfaU- [W] King Arthurs Gold</div>
<div style="clear:both;"></div>
<div class="match">
<div class="thumbnail">
<img class="image-container" src="img-path">
<div class="thumbnail-count">2</div>
</div>
<div class="item-name">The Lost Hobo King</div>
</div>
</div>
</div>
</div>
CSS:
.match-container:before, .match-container:after {
content:"";
display:table;
}
.match-container:after {
clear:both;
}
.match-container {
border:1px solid #666;
background-image:url('img/stripes.png');
border-radius:5px;
padding:10px;
margin:10px;
float:left;
}
.match {
width:112px;
float:left;
margin: 0 2px;
}
.match .image-container {
width:112px;
height:130px;
display:block;
}
.match .item-name {
line-height:12px;
font-size:10px;
margin-top:4px;
text-align:center;
height:24px;
overflow:hidden;
clear:both;
}
.match-container .arrow {
float:left;
position:relative;
top:70px;
margin:5px;
}
.match-owner {
line-height:14px;
font-size:12px;
margin-top:4px;
text-align:center;
height:14px;
overflow:hidden;
margin-bottom:4px;
border:1px solid #666;
background-image:url('img/stripes.png');
border-radius:5px;
}
.match-owner.user {
background-color:green;
}
.match-owner.friend {
background-color:red;
}
.thumbnail-count {
position:relative;
top:-24px;
margin-bottom:-24px;
font-size:16px;
font-weight:bold;
border-top:1px solid white;
border-right:1px solid white;
border-top-right-radius: 7px;
font-size:18px;
background: rgb(160, 160, 160) transparent;
background: rgba(160, 160, 160, 0.70);
padding: 0 4px;
float:left;
}
.user-match-container {
float:left;
}
Is it possible to do this without using JavaScript?
We can achieve this by setting the overflow property of the full-page-width container div (the full width of the page) to hidden. This will hide the content that overflows to the left and right beyond the full page width and remove our unwanted horizontal scroll.
Answer: Use the CSS display Property You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
Try changing the margin in the child class to margin: 0 This will shift the child div to the left and down so that the bottom left corner of the child aligns with the bottom left corner of the parent.
Method 1 (Using Overflow Property): We can use the overflow property of CSS to prevent the parents from collapsing. Set the value of the overflow property as “auto” for the parent and it will not collapse any more.
You can use Absolute positioning
FIDDLE
position:absolute;
top:0;
left:0;
width:100%;
and on the container div :
padding-top: /*the height of the absolutly positioned child*/ ;
position:relative;
If you add the following styles you should achieve what you want:
.user-match-container {
position: relative;
padding-top: 22px;
}
.match-owner {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
top: 4px;
left: 0;
right: 0;
}
Example
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With