Divs inside inline-block div does not fit parent size

13,653

Solution 1

How about something like this

HTML

<div class="parent">
  <div class="child">Orange DIV</div>
  <div class="expenseItems">Green DIV</div>
</div>

CSS

.parent {
  border-style: dashed;
  border-width: 1px;
  padding: 25px;
  display:inline-block;
  background-color: aqua;
}
.child {
  float: left;
  background-color: orange;
}
.expenseItems {
  display: inline-block;
  background-color: green;    
}

http://jsfiddle.net/QGwtc/

OR use clearfix on the parent

Solution 2

Seems like you're not closing your 2nd div properly, this might also cause some problems.

<div class="expenseItems" style="background-color:green">
<div> <!-- </div> -->
</div>
Share:
13,653

Related videos on Youtube

woryzower
Author by

woryzower

Updated on June 04, 2022

Comments

  • woryzower
    woryzower over 1 year

    I am creating a input form and I have two child and 1 parent div:

    <div style="border: dashed; border-width: 1px; padding: 25px; display:inline-block; background-color:Aqua">
    <div style="float: left; background-color:Orange">
    </div>
    <div class="expenseItems" style="background-color:green">
    <div>
    </div>
    

    I want two child divs side by side and parent covering his childs widths exactly thats why I used inline lock . Here is what i get until now

  • xec
    xec about 10 years
    -1 In your jsfiddle link, the second <div> is not floated (effectively proving yourself wrong), and the container is full width instead of stretching to contents as specified in the question.
  • xec
    xec about 10 years
    OK, but this new demo doesn't really illustrate anything, and judging by the text and the image in the question, placing the content next to each other is not the problem.
  • xec
    xec about 10 years
    This requires a static width, while the question states that he put inline-block on the parent in order to have it stretch it its content.
  • Bhojendra Rauniyar
    Bhojendra Rauniyar about 10 years
    Yeah, for that purpose I have linked a demo at last. without the width jsfiddle.net/zxGxX/2
  • MaveRick
    MaveRick about 10 years
    but he said he wanted two children div to be side by side contained by the parent div, but if you are talking about the width... he already set a padding so the container should be bigger than the amount of two divs width + 25px x2 am i missing something here?
  • xec
    xec about 10 years
    I think we can both agree that the question is quite clumsily worded, but I believe he's asking why the second div is overflowing the aqua colored container (rather than making it stretch)
  • woryzower
    woryzower about 10 years
    I'm getting same behaviour if I use your second approach. When I removed float left on expenseItems , expenseItems aligned with first child but parent didn't cover expenseItem
  • woryzower
    woryzower about 10 years
    this causes full width parent which I don't want to prefer
  • Bhojendra Rauniyar
    Bhojendra Rauniyar about 10 years
    for second approach you need to set float value for each.
  • Valentin
    Valentin about 10 years
    @woryzower maybe you could explain more clearly what you're trying to achieve. Did you see my fiddle jsfiddle.net/QGwtc ? The parent only stretches to the width of it's contents. Isn't that what you were looking for?
  • woryzower
    woryzower about 10 years
    It worked now. Source of the problem was margin property preexisting in expenseItems class. It was my fault not to specify it in question. Could you explain why this worked? e.g. why we used a float :left in first child and a inline-block in second child
  • Valentin
    Valentin about 10 years
    @woryzower you can have both children using float:left and it would be the same result, same goes for display:inline-block but that would add a space between the children, because html will render that line break between them as a single blank space.