Normally should go above since on the LEFT... BUT WANTED GO BELOW

HTML & CSS
1

when i have media queries eg 480px and 768 px breakpoints and metaphorically footer is a grid of two columns (divs) and copyright on the left footer and menu on the right, how in smartphones go copyright below footer menu but not above. normally should go above since on the LEFT… BUT WANTED GO BELOW, HOW???

2

Hi,

If you have two floated columns then the column that will automatically drop will be the one first in the html so simply reverse the order if the html.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#footer {
	width:50%;
	margin:auto;
	border:1px solid #000;
	padding:10px;
	overflow:hidden;
}
#footer ul {
	float:right;
	margin:0;
	padding:0;
	list-style:none;
}
#footer li { display:inline; }
#footer p {
	margin:0;
	width:7em;
	float:left
}
</style>
</head>

<body>
<div id="footer">
		<ul>
				<li><a href="#">Menu link </a>|</li>
				<li><a href="#">Menu link </a>|</li>
				<li><a href="#">Menu link </a>|</li>
		</ul>
		<p class="copy">&copy; Me 2013</p>
</div>
</body>
</html>

At wide widths they are on one line but at small widths the copyright drops below.

3

is any way with float right copyright be the left column and floats below right column?

4

You should have your markup structured as Paul suggested. not only because it will solve this tiny problem ( I normally loathe changing the markup for the sake of style) but because it is , semantically, what you want anyway.

If CSS was OFF (no style sheets applied at all) your copyright would precede your footed nav, and that’s not what you want so the first problem to solve is semantic… which just so happens to essentially solve the problem that started this post. :slight_smile:

is any way with float right copyright be the left column and floats below right column?

FLOATS cannot float ( be displayed) above elements that precede them in the source order. So, no ( or not really).

HOWEVER:

if you were certain of the height of your copyright you could use AP and padding to do a switcharoo. It’s messy but if you have NO ACCESS to your source code then that the thing I’d do.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#footer {
 	margin:0 25%;
	border:1px solid #000;
	padding:10px;
	overflow:hidden;
	position:relative;
}
#footer ul {
	float:right;
	margin:0;
	padding:0;
	list-style:none;
}
#footer li { display:inline; }
#footer p {
	margin:0;
	float:left
}

@media screen and (max-width:480px){
 #footer p {
 	position:absolute;
	heigh:2em;
	bottom:0;
	left:10px;
	right:10px;
}
#footer {
	padding-bottom:2em

}
</style>
</head>

<body>
<div id="footer">
		<p class="copy">&copy; Me 2013</p>

		<ul>
				<li><a href="#">Menu link </a>|</li>
				<li><a href="#">Menu link </a>|</li>
				<li><a href="#">Menu link </a></li>
		</ul>
</div>
</body>
</html>