image overflow 2 divs in WordPress

2 comments

1. Update your CSS like this

   #header > .container {
     height: 230px;                  /*  less high than image make it overflow below  */
   }
   #header {
     margin-bottom: 80px!important;  /*  increase the green elements margin some  */
   }
   

   Side note:

   It is sometimes tempting to use position: absolute for these kind of things, don’t, it most likely will give you issues later down the road, often with unwanted element overlapping.

2. You can play around with positioning a little bit (see below:)

   #header > .container {
     bottom: -100px;
     position: absolute;
     text-align: center;
     width: 100% !important;
   }
   header#header {
     padding-bottom: 200px;
   }
   

   That would give you this:

Comments are closed.