Stop image overlap when there is a large screen size - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text Alignment

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text Alignment

Description

Stop image overlap when there is a large screen size

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.main_container {<!--  w w w  .jav  a2 s  . c om-->
   border-bottom:2px solid Chartreuse;
   background-color:yellow;
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='blue');
   background:-webkit-gradient(linear, left top, left bottom, from(white), to(pink));
   background:-moz-linear-gradient(top,  white,  background: -moz-linear-gradient(top,  OrangeRed,  grey);
   padding:2.26% 0.626% 0.626% 0.626%;
   height:auto;
   max-width:100%;
   width:auto;
   position:relative;
}

.main_container img {
   width:9.126%;
   height:auto;
   margin-right:0.626%;
   float:left;
   position:relative;
}

.main_container .name:first-line {
   color:BlueViolet;
   font-weight:100;
   font-size:81%;
}

.main_container .name {
   font-weight:100;
   font-size:100%;
}

.main_container .time-ago {
   position:relative;
   float:right;
   color:Chartreuse;
   font-weight:100;
   font-size:81%;
}

.main_container .player {
   border-bottom:2px solid yellow;
   border-top:2px solid blue;
   position:absolute;
   width:91%;
   margin:0.626% 0 0.626% 9.626%;
   position:relative;
}

.main_container .player .controls { }
.main_container .player input[type="range"] {
   width:100%;
   -webkit-appearance:none;
   position:relative;
}

.main_container .player input::-webkit-slider-thumb {
   -webkit-appearance:none;
   background-color:pink;
   width:6px;
   height:6px;
}

.main_container .player_footer {
   width:100%;
   color:OrangeRed;
   font-weight:100;
   font-size:71%;
   height:3.6%;
   position:relative;
}

.main_container .player_footer .play_count { }
.main_container .player_footer .logo {
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   background-repeat:no-repeat;
   background-position:right;
   float:right;
   width:100%;
   font-size:100%;
}

.clear {
   clear:both;
}
</style> 
 </head> 
 <body> 
  <div style="background-color:white; height:100%; width:1600px; "> 
   <div class="main_container"> 
    <img src="https://www.java2s.com/style/demo/Opera.png"> 
    <div class="name">
      Lorem ipsum 
     <br>Lorem ipsum 
    </div> 
    <div class="time-ago">
      Lorem ipsum d 
    </div> 
    <div class="player"> 
     <a class="controls" id="play" href="" title=""></a> 
     <input type="range" id="seek" value="0" max=""> 
    </div> 
    <div class="buttons"> 
    </div> 
    <div class="player_footer"> 
     <div class="play_count">
       Lore 
     </div> 
     <div class="logo"></div> 
    </div> 
    <div class="clear"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials