Make CSS Div height Equal To Contents without changing width

Question

I would like for the Div element's height to only expand to as wide as my table element becomes, but keep it's width as long as the screen size. using 'display: inline-block' will wrap both width and heights. for example the following code will fit also width.

<div style="display: inline-block; float: right; background-color: green;">
  <div style="float: right;">first item</div>
  <div style="float: left;">second item</div>
</div>

Any suggestions?

thanks!

Please create a code case for it (with the problem you are having) and paste that code into this question. — Henrik Ammer, Sep 14 '12 at 07:15
Good start. Now, which ones are you considering your table element? Is it the first `
` or do you have a table that wraps the added code? If the later, please add the table to the code aswell. — Henrik Ammer, Sep 14 '12 at 07:26
Here is a good explanation on why this can't be done directly http://stackoverflow.com/questions/5474951/css-make-divs-inherit-a-height — Breezer, Sep 14 '12 at 07:28
I think I found the solution. I added 'width=100%' after 'display: inline-block;' thanks for your help. — Ali, Sep 14 '12 at 07:31
@Ali So *that* was what you wanted. Then I can simplify it for you. Remove `display: inline-block`, `float: right` and the newly added `width:100%`. If the `
` is a block (like it is from the start) it will expand to the maximum width inside its container and if it uses up all of the width, no float is needed. — Henrik Ammer, Sep 14 '12 at 07:38

score 0 · Answer 1 · answered Sep 14 '12 at 08:42

You may try;

.container div{
    width:50%;
    background: green
}

with

<div class="container" style="background: green;width:100%">
  <div style="float: right">first item</div>
  <div style="float: left">second item</div>
</div>

here is a live demo. You may also try adding separate classes for left and right divs or may use CSS3 :nth-child() Selector

Make CSS Div height Equal To Contents without changing width

1 Answers1