What changes do I need to apply for this to happend?

HTML & CSS
1

Hello everyone,
I got a form on the left and text on the right on this page:
http://petpal.co.il/pet-13018

I want to change it so when screen goes below a certain width, the form will go below the text, what changes do I need to make for it to happend? i’ll probably have to change the order of the elements in the html too?

2

Hi,

You could just float them both using percentages but the right column would need to be first in source.

If the form must stay at 250px then you can use a technique like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	border:1px solid #000;
	max-width:1000px;
	margin:auto;
	overflow:hidden;
}
.right {
	float:right;
	width:100%;
	margin-left:-260px;
}
.left {
	width:250px;
	float:left;
	background:blue;
}
.inner {
	margin:0 0 0 260px;
	background:green
}
 @media screen and (max-width:600px) {
.right, .left, .inner {
	float:none;
	margin:0 0 20px;
	width:auto;
}
}
</style>
</head>

<body>
<div class="wrap">
		<div class="right">
				<div class="inner"> Right column stuff Right column stuff Right column stuff Right column stuff Right column stuff Right column stuff Right column stuff Right column stuff Right column stuff Right column stuff Right column stuff Right column stuff Right column stuff</div>
		</div>
		<div class="left"> Left columns stuff Left columns stuff Left columns stuff Left columns stuff Left columns stuff Left columns stuff Left columns stuff Left columns stuff Left columns stuff Left columns stuff Left columns stuff Left columns stuff Left columns stuff Left columns stuff </div>
</div>
</body>
</html>

The negative left margin on the right float creates negative space that draws the left column inside. This would cause an overlap so the inner div uses a margin-left to avoid the first float.

Then in your media query just remove the floats and margins and the text will line up as you want (I also remove the width from the form as its nice to have it full width on smaller devices but you can leave it at 250px max if you want).

Flexbox can also move columns around quite easily also but only works on the most modern browsers.

3

Change the markup. Put the form AFTER the paragraph text. Then use a media query to unfloat the form below a certain width.

You’ll need to float hte paragraph when you change the markup.

4

It will still stay in the same place because the paragraph is floated :wink: (unless there wasn’t room).

The element will need a width which could be awkward for fluid text. It’s probably ok if there are no longer lines of text than shown or if it is indeed a fixed width but then that that leaves things to chance which I don’t like doing because it often comes back to bite you at a later date.

The negative margin method above accommodates all the content no matter how wide the content stretches.

5

Thanks Paul that worked :smile: