My divs are not showing?

Question

I have being practicing html/css. My problem is right div is not appearing. If it also shows it is overlapping with another div.

Just take a look at this code. Am using brackets editor. Just tell me what is wrong in the code.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body{
 
  background: #5C258D;
  background: linear-gradient(to left, #5C258D , #4389A2); 
 width: 100%;
}
.nav{
 height: 50px;
 width: 100%;
 background-color: #fff;
 border-bottom: 1px solid #999;
 position: fixed;
 top:0px;
 
}

.left{
 width:964px;
    height: 100%;
 margin-top: 50px;
 align-items: center;
 float: left;

 
 
}

.images{
 width:871.5px;
 
 height:262.5px;
 margin-left: 50px;
    margin-right: auto;

 
}
.pro{
 margin-top:50px;
 
    border-left:3px solid white; 
 
 
}
.cov{
 float: right;
 
 margin-top: -87.5px;
 margin-left: 90.5px;
 border: 2px solid white;
 

}
.con{
 width:783px;
 margin-left: 139px;

 
}

#tab1{
 height: 70px;
 width: 783px;
 background: #fff;
   border-bottom: 1px solid #999;
 
}
#tab2{
 height: 70px;
 width: 783px;
 background: #fff;
   border-bottom: 1px solid #999;
}
#tab3{
 height: 500px;
 width: 783px;
 
 background: #fff;
   border-bottom: 1px solid #999;
 
}
.right{
 width:390px;
 height: 100%;
    margin-top:-600px;
 margin-right: 10px;
 float: right;
 background: #000;
 
 
}
.all{
 width:100%;
 height: 100%;
 clear:both
}

<html>
<head>
 <link rel="stylesheet" type="text/css" href="index.css">
 <title></title>
</head>
<body>
 <div class="nav">
 
 </div>
 <div class="all">
    <div class="left">
     
  <div class="images">
     <div class="pro">
   <img src="11864.jpg" alt="Smiley face" height="175" width="185"  >
   </div>
     <div class="cov">
   <img src="default_cover_5_ff9ff46d48dc181084c9c23a120b68d8.jpg" height="175" width="779">
   
   </div>
   
   </div>
     <div class="con">
       <div id="tab1">
      
     </div>
     <div id="tab2">
      
      </div>
      <div id="tab3">
            
      </div>
     
     </div>
   
   
     
  
  </div>
    <div class="right">
   <div class="trends">
     </div>
  </div>
 
 </div>

</body>
</html>

score 0 · Answer 1 · answered Jan 02 '16 at 12:03

0

add this to your CSS

html, body { height: 100%; }

Your .right div has height 0, since it's 100% height don't have anything to relate to. The above rule changes that.

answered Jan 02 '16 at 12:03

Johannes

64,305
18
73
130

why did you set `margin-top:-600px;` for this div? This moves that div 600 px out of its parent element (BTW: Currently there is not content in there, you might want to fill it with some blind text - background color panes often don't show the correct result since that also depends on the actual content) – Johannes Jan 02 '16 at 12:33
ya its working correctly but if i reduce the browser size the div is overlapping with other div – Bajwa kapoor Jan 02 '16 at 12:48

My divs are not showing?

1 Answers1