html - floating two div tags that equal 100% width moves second div to new line -


this question has answer here:

newbie everything.

i have 2 div tags, first has width of 80% , second width of 20%. 80%+20%=100% second div moves next line.

the objective use whole line without moving second.

<!doctype html> <html> <head> <style>  .border { border-style: dotted; }  </style> </head> <body>  <div class="border" style="width: 80%;">thing</div> <div class="border" style="width: 20%; float: left;">other thing</div>  </body> </html> 

try this:

css code:

.table_formate {   display:flex;   width:100% } .border {   border:1px solid #ddd; } 

html:

<div class="table_formate">   <div class="border" style="width: 80%; float: left; background: #dd0d0d;">thing</div>   <div class="border" style="width: 20%; float: left; background: #4abdac;">other thing</div> </div> 

jsfiddle link


Comments

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

c# - Selenium Authentication Popup preventing driver close or quit -

tensorflow when input_data MNIST_data , zlib.error: Error -3 while decompressing: invalid block type -