CSS 3 columns doesn't work in Chrome

StackOverflow https://stackoverflow.com/questions/23594113

  •  20-07-2023
  •  | 
  •  

Pergunta

I am not good with CSS but I discovered that this issue is not my fault but chrome's. I don't understand why, I thought it was because of the user agent style forced, but even without it, I can't align three columns. Here is the code that fails (chrome on linux)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<style>
.col {display: inline;} 
.leftcolumn{ float: left; width: 15%; }
.rightcolumn{ float: right; width: 15%; }
.maincol{ display: inline-block; width: 70%; }
</style></head>
<body>
  <div class="container">
    <div class="leftcolumn col">asdfjlskdjf;lsadkjf; 
         lsjls;dkfjdsf dfsdfsdf sdfsdf
    </div>
    <div class="maincol col">
      <div id="results">
            sdf
            sf
            sdfs 
      </div>
    </div>
    <div class="rightcolumn col">asdfdsal kfj;lskd 
          f  j;sl kadj;l  skadjf
            asldfkj;ls kfj;lsaf;l saj
    </div>
  </div>
</body></html>

I can change the style if someone suggest me another way to do that.

Foi útil?

Solução

Change

<style>
.col {display: inline;} 
.leftcolumn{ float: left; width: 15%; }
.rightcolumn{ float: right; width: 15%; }
.maincol{ display: inline-block; width: 70%; }
</style>

to 

<style>
.col {display: inline-block;} 
.leftcolumn{ float: left; width: 15%; }
.rightcolumn{ float: right; width: 15%; }
.maincol{ float: left; width: 70%; }
</style>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top