clear both is not working after display table

Question

I have following html

<div id="parent">
    <div id="one">one</div>
    <div id="two">two</idv>
</div>

<div id="other">some</div>

And this is the css

#one, #two{
    display: table-cell; 
    vertical-align: middle; 
    height: 47px; 
    background: red;
}

#parent
{
    display:table;
    border-collapse: separate; 
    border-spacing: 10px 0;
}
#other{
    background: blue;
    height: 200px;
}

As described in the question the clear both is not working but behaving like before div as if table-cell. The solution for this is to remove display: table;. But I would like to know is there any idea without removing display: table; and display: table-cell; from #one,#two divs.

demo

score 4 · Accepted Answer · edited May 23 '17 at 12:21

It's a typo.. You should've seen the red syntax on the js fiddle

<div id="parent">
    <div id="one">one</div>
    <div id="two">two</div>
</div>

Demo

This here

<div id="two">two</idv>

Should be

<div id="two">two</div>

Note: You've not used clear: both; in your demo, and you don't even require it, as you are not floating the elements, display: table; just changes the display of the elements rendered, yes it does make them inline because of table-cell doesn't mean they need to be cleared. You need to use clear property only when you've floating elements.

For more info on clear: both;

clear both is not working after display table

1 Answers1