Position one <div> under another

Position one

under another

Basically as the title says, I'm trying to position one

of an image underneath the other but having trouble.

My CSS so far is:

#rightimg img{    max-width: 25%;    height: inherit;    left: 0px;    right: 0px;    border: solid black 2px;    float:right;    padding:0px;  }    #rightimg:after{    content:'';    clear:both;    clear:right;  }  

clear: right; is my most recent attempt to alter the issue but didn't work - tried removing clear: both; and having just the right one, but didn't work. Also tried using
but just moved the entire

Image to follow:

Trying to achieve (blue is image, white is text):

Current HTML:

        
        
          
Letting Management
              
Lorem ipsum dolor sit amet, pri et case persecuti, enim iuvaret nec at, adhuc labores eos ei. Eu eum prima ignota, falli audiam minimum ne ius. His an inani scripta. Case phaedrum ei eos, amet dicam eloquentiam ex pro. An modus perpetua duo, ei mel erat dicat, eam ea mucius argumentum. Sit ea elit accusam, exerci maiorum iudicabit ne mea.
      
  

Not sure if it should go under my column that is floated to the left or right.

Answer by thril for Position one

under another

A simple option is to use a table:

Try jsFiddle:

    
      
      
TEXT
     
  
    
      
      
TEXT
      
     
    
  

CSS:

.thickBorder {     border: solid black 2px;  }  

Answer by AdamJeffers for Position one

under another

Ok... so, first of all, can I suggest you adopt a responsive framework such as Bootstrap? It will make your life soooo much easier!

Just include this in the of you page...

or download the files and include them yourself as local resources.

Then you can use the following markup to give you the architecture you're looking for.

HTML

      
                
      
          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed ultrices ante. Sed dolor est, fringilla id egestas id, pulvinar ac nisl. Integer sed laoreet nisl, id finibus ligula. Proin auctor tempor nunc, quis lobortis justo accumsan et. Duis viverra malesuada tincidunt.
      
  
    
      
          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed ultrices ante. Sed dolor est, fringilla id egestas id, pulvinar ac nisl. Integer sed laoreet nisl, id finibus ligula. Proin auctor tempor nunc, quis lobortis justo accumsan et. Duis viverra malesuada tincidunt.
      
      
                
  
    
      
                
      
          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed ultrices ante. Sed dolor est, fringilla id egestas id, pulvinar ac nisl. Integer sed laoreet nisl, id finibus ligula. Proin auctor tempor nunc, quis lobortis justo accumsan et. Duis viverra malesuada tincidunt.
      
  
  

Answer by Nenad Vracar for Position one

under another

You can try Flexbox

.content {    display: flex;    flex-direction: column;  }    .box {    padding: 50px;    display: flex;    flex-direction: row;    align-items: center;  }    .box .text {    flex: 1;    padding: 10px;  }

    
            
        
This is title
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sequi eaque, dolor vitae recusandae minus a quis asperiores voluptatum praesentium accusantium eligendi optio laboriosam minima ea reprehenderit ut nam. Possimus!
      
    
        
       
        
This is title
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sequi eaque, dolor vitae recusandae minus a quis asperiores voluptatum praesentium accusantium eligendi optio laboriosam minima ea reprehenderit ut nam. Possimus!
      
          
          
             
        
This is title
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sequi eaque, dolor vitae recusandae minus a quis asperiores voluptatum praesentium accusantium eligendi optio laboriosam minima ea reprehenderit ut nam. Possimus!
      
    
        

Answer by rpl for Position one

under another

https://jsfiddle.net/x30mpo9z/

You can see here that I added 2 classes for left and right floated/positioned images, .image-left and .image-right. I float the .content div left, and the .row div is set with a clear:both

This fiddle is a very minimal solution that you can expand on.

Answer by Chris Gleason for Position one

under another

Just replace the blue boxes with your images, and you should be all set. The important thing is you need extra HTML surrounding each element to create rows.

This removes the need for absolute positioning, and allows you to float the items without breaking into other elements above and below them.

* {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box  }  .row {    clear: both;    padding: 10px;    overflow: hidden  }  .left_row .content {    float: left;    padding: 0 10px 0 0;    width: 75%  }  .right_row .content {    float: right;    padding: 0 0 0 10px;    width: 75%  }  .right_image,  .left_image {    background: blue;    border: solid black 2px;    float: right;    height: 100px;    padding: 0;    width: 25%  }  .left_image {    float: left  }

    
    
      Lorem ipsum content here. Lorem ipsum content here. Lorem ipsum content here. Lorem ipsum content here. Lorem ipsum content here. Lorem ipsum content here.    
  
  
    
      Lorem ipsum content here. Lorem ipsum content here. Lorem ipsum content here. Lorem ipsum content here. Lorem ipsum content here. Lorem ipsum content here.    
    
  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 71