Fix floating box in Html

Question

So I want my boxes to stay the same position even when I shrink my window. But for now when I shrink them, they will resize and push the floating box to the bottom space and not making a line together.

 .bodybox1 { border:1px solid black; width:45%; background:white; margin:1% auto 2% auto; text-align:center; font-size:2em; padding:3%; overflow:hidden; } .boxcoverblack { text-align:center; width:120px; padding:7%; border:1px solid black; margin-top:2%; } .signuparea { width:30%; float:right; border:1px solid black; text-align:center; padding:3%; overflow:hidden } .signuptext { text-align:center; width:180px; padding:7%; word-spacing:15px; border:1px black solid; line-height:35px; } .freeshipping { float:left; /*image*/ } 

 <div class="bodybox1"> <img class="freeshipping" src="https://via.placeholder.com/500x300" width="500" height="300" > <div class="signuparea"> <div class="signuptext">Sign up to get freeshipping coupon code! ( per phone number ) </div> <div class="boxcoverblack">Sign up</div> </div> </div> 

help me please....

http://jsfiddle.net/abxf6c9h/

Answer 1

You need to use flexbox and a bit of arrangements : use

display:inline-block 

instead of

float:left

use vertical-align:top to remove the auto centering align from the wraping div and finaly

 display:flex;
 flex-wrap:nowrap;

to the parent of the 2 involved divs

Here's the result fiddle

Answer 2

.bodybox1 {

  display:flex;
  justify-content:center;
  border: 1px solid black;
  width: 100%;
  background: white;
  margin: 1% auto 2% auto;
  text-align: center;
  font-size: 2em;
  padding: 3%;
  overflow: hidden;
}

Try this. I guess you want this box displayed as flexed. Tell me if that gave you a hint . I just added:

display:flex;
justify-content:center;

See my fiddle:

http://jsfiddle.net/abxf6c9h/1/