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;
}
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>
Related videos on Youtube
Author by
woryzower
Updated on June 04, 2022Comments
-
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 . is what i get until now
-
xec about 10 yearsA copy-paste of your code does not look like the result image you supplied, maybe something odd is going on with the content inside? jsfiddle.net/8XPTu/1
-
Valentin about 10 yearsjust use clearfix on the parent webtoolkit.info/css-clearfix.html
-
-
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 about 10 yearsOK, 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 about 10 yearsThis requires a static
width
, while the question states that he putinline-block
on the parent in order to have it stretch it its content. -
Bhojendra Rauniyar about 10 yearsYeah, for that purpose I have linked a demo at last. without the width jsfiddle.net/zxGxX/2
-
MaveRick about 10 yearsbut 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 about 10 yearsI 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 about 10 yearsI'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 about 10 yearsthis causes full width parent which I don't want to prefer
-
Bhojendra Rauniyar about 10 yearsfor second approach you need to set float value for each.
-
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 about 10 yearsIt 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 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.