css - Set full width for the inner div

Question

I have a parent div, Inside that div I have two levels of children div as follow,

<div class="grandParant">
    <div class="parant1">test</div> 
    <div class="parant2"> 
        <div class="child">Hello world this is a long test string</div>
         <div class="child">12</div>
         <div class="child">4545</div>
    </div>
</div>

from the above sample code, I need to show the entire first "child" class content(Hello world this is a long test string) without any break, ie in a single line. The width of the "parant2" div should also be incremented with respect to the child width. So how could this be done with css? I am not posting my css since it is a little bit lengthy, but you can see it in jsfiddle.

EDIT my expected output is more like the alphabet 'L'

| test |
| Hello world this is a long test string |
| 12                                     |
| 4545                                   |

my jsfiddle

score 1 · Accepted Answer

You can do that by removing "max-width" ...

Where ever if you give "max-width" it only get upto that extent only,beyond that width it will break the lines

Put css only like

min-width:100px;

Here is fiddel http://jsfiddle.net/9Sha7/8/

score 1 · Accepted Answer

If you remove the max-width take parant1 outside of it's grandparent, you'll get your desired result of non-wrapping:

DEMO: http://jsfiddle.net/9Sha7/18/

score 0 · Accepted Answer

take out the padding

.grandParant{
margin:0 auto;
float:left;
min-width:100px;
max-width:120px;    
height:150px;
position:relative;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background:#cccccc;
font-size:11px;
cursor:pointer;    
}
.parant1{
    width:auto;
margin-bottom:22px;

text-align:center;
    background:blue;
}
.parant2{

text-align:left;
width:auto;
background:#f3f3f3;
}

.child{
     width:100%;
position:static;
background:green;
}
}

score 0 · Accepted Answer

Just get rid of all the width attributes and the max-width, then it should be fine according to your requirements: http://jsfiddle.net/9Sha7/13/

score 0 · Accepted Answer

Remove max-width from your .grandParent class and give white-space:nowrap; to your .child class.

Working Fiddle

css - Set full width for the inner div

5 回答 5

Related

Reference