responsive DIV columns

i am building a new site and a sample page with the issue at hand on the dev url is http://serv7wkdcxic.sn.sourcedns.com/~yacht/wpsite/listings/royal-princess.

The site overall is responsive, but I put in a DIV with two columns and the second column, when it shrinks down, doesn't drop below the first but moves on top of it.  In this case it is text running over a picture.

What do I do so the text would drop below the image?

The css is below.

.yacht-details {

	background-color: #f5f5f5;

	font-size: 16px; 
	
	line-height: 2em ; 

	overflow: hidden;

	margin: 0 0 30px;

	padding: 15px 20px 0;

}



.yacht-details-col1,
.yacht-details-col2{

	float: left;

	margin: 0;

	padding: 0 0 15px;

	width: 50%;

}

Open in new window

dougfosterNYCAsked:
Who is Participating?
 
Neil_BradleyWeb UX/UI DeveloperCommented:
Hi Doug,
you could simply write a media query to counteract the floating nature of your 2 divs when the screen soze drops below a certain size. Something like this
@media only screen and (max-width: 960px)
.yacht-details-col1, .yacht-details-col2 {
float: none;
width: 100%;
}
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.