Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent a specific child div from expanding the parent div

Tags:

css

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 divs 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 divs below, it will expand the parent div.

I'd like to only allow the bottom divs 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?

like image 795
Robou Avatar asked Jan 08 '14 11:01

Robou


People also ask

How do I make div not go out of parent div?

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.

How do I stop DIVS from expanding?

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

How do you make a div not bigger than a parent?

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.

How can parents prevent children from overflowing?

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.


2 Answers

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;
like image 158
web-tiki Avatar answered Oct 16 '22 22:10

web-tiki


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

like image 8
Pete Avatar answered Oct 16 '22 21:10

Pete