Div set to absolute position without pushing other div down below it - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Absolute Position

Description

Div set to absolute position without pushing other div down below it

Demo Code

ResultView the demo in separate window 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <meta charset="utf-8"> 
 </head> <!-- w  w w .ja  va 2s  . co m-->
 <body> 
  <div class="container"> 
   <div class="header"> 
    <div class="inner-container"> 
     <div class="search">
       Lorem ipsum 
     </div> 
     <div class="social"> 
      <img src="https://www.java2s.com/style/demo/Safari.png" alt="facebook"> 
      <img src="https://www.java2s.com/style/demo/Firefox.png" alt="facebook"> 
      <img src="https://www.java2s.com/style/demo/Firefox.png" alt="facebook"> 
      <img src="https://www.java2s.com/style/demo/Google-Chrome.png" alt="facebook"> 
      <img src="https://www.java2s.com/style/demo/Safari.png" alt="facebook"> 
     </div> 
    </div> 
   </div> 
   <div class="clear"></div> 
   <div class="blog"> 
    <div class="inner-container"> 
     <!-- I'd recommend not to use inline styles. It's easier to maintain your code when everything is in stylesheet.--> 
     <!-- Create for example an id #logo with width set to 350 --> 
     <img src="https://www.java2s.com/style/demo/Safari.png" style="width: 350px;" alt="Christina's Baking Adventure logo"> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials