css - Div nest structure -


i have met problem don't know wrong. code here:

<html> <head> <style type="text/css">  #top{   width:100%;   height: 78%;   background-color: #ccc;  }   #left{   width: 45%;   height: 100%;   display: inline-block;   background-color: green;  }  #right{   width:50%;   height: 100%;   display: inline-block;   background-color: pink;}  </style> </head> <body>    <div id="top">       <div id="left">          <div id="inside">asd</div>       </div>      <div id="right"></div>    </div> </body> </html> 

if add nothing "inside" div, layout alright , this: enter image description here

but if add tag or few words in "inside" dev .the layout wrong. enter image description here

i'm new html,so don't know problem,who can tell me why happens? i've been driven crazy!!!help~~~~:(

you can use float (see other answers), don't have if don't want to.

#left, #right { vertical-align:top; } 

will want.


aside: should add <!doctype html> top of page. in case, you'll need add

html, body { height: 100% } 

to css.


Comments

Popular posts from this blog

html5 - What is breaking my page when printing? -

html - Unable to style the color of bullets in a list -

c# - must be a non-abstract type with a public parameterless constructor in redis -