My layout needs quick help

HTML & CSS
1

I have this, but it needs work: http://page-test.co.uk/layout-test.html

(1) If you close the browser as small as possible (i.e. mobile phone) and then gradually open it the layout should support all screen sizes as it expands. It works reasonably well, but the media query at 1300px needs finishing. It should move the blue navigation bar to the top left of the layout and all move in line with the rest of the layout. So everything should be in the centre of the screen when 1300px triggers with the blue nan bar to the left of the grey area.

Btw. I won’t actually use 1300px, I’ll use something less, but this is just to test and get it working.

(2) There are obvious other small issues that need fine tuning so I would appreciate any other help to get this finished.

Thanks.

2

It’s not really clear to me where you want that blue navigation in relation to the other elements. Can you make a basic screen shot of what you want? It doesn’t look like the blue area belongs on the left from the way the elements are organized.

3

Hi, Thanks for looking.

This should help more:

The image is roughly how it would look if the browser was fully open on a 1900px wide screen. The top image is how it looks now and the bottom image is how it should look (if the media query made the change at 1300px).

4

If you are fixing it at a max-width then something like this should work.


@media only screen and (min-width: 1300px) {
/* move the nav bar to the left of the main content */
#wrapper{max-width:1300px;margin:auto}
#content{float:right;width:990px}
#left-nav{float:left;margin:10px 0 0}
.menu-link { display:none; }
}
5

Thanks to both for the help.

I’ve made further changes and now here is just one final problem.

http://page-test.co.uk/layout-test.html

The attached image shows at the top what currently happens and at the bottom what should happen.

Obviously it’s because I’ve set a fixed width on Content but anything else and #left-nav just sits below Content.

Also, it’s important that the #left-nav can change in width. When completed I need to just apply any width to #left-nav and find everything flows and works the same. It should also work if a width of 0px is applied to left-nav.

Thanks agin for the help.

6

I’m not sure you are going to fulfill all those conditions without several layout changes each time. Anyhow, as an immediate fix, you could change this:

#content {width: 990px;}
#left-nav {width: 200px}

to something like

#content {width: 80%;}
#left-nav {width: 18%}
7

Great. Good idea! Thanks.

I think that should do it.

8

Hi,

As in my example and as Ralph said you are really tied to widths to make this work properly.

If your left-nav is always to be last in source then you could do what you want by moving it to the top of the html and absolutely placing it at the bottom which will allow it to become floated and thus push the content out of the way (floats must come first which is why it can’t be done with the left nav at the end of the html).

Here is a working example:


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Layout test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />
<style type="text/css">
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	margin: 0;
	padding: 0;
}
body { font-size: 14px; }
p {
	text-align:center;
	padding:5px;
}
#top-nav {
	margin-top:10px;
	background:gray;
}
/* grid */

#content {
	width: 100%;
	margin: 0 auto;
}
#wrapper {
	max-width:1700px;
	margin:auto;
	padding-left: 2%;
	padding-right: 2%;
}
.row {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	max-width: 1350px;
}
.one-box, .two-box, .four-box, .six-box {
	margin-right: 0px;
	float: none;
	min-height: 1px;
	background: gray;
	margin-top: 10px;
	width: auto;
}
/* left nav */

#left-nav {
	width: 200px;
	margin: 10px auto;
	min-height: 300px;
	background: gray;
	position:absolute;
	left:0;
	right:0;
	top:100%;
}
/* set minimum heights */

#top-nav, .one-box, .two-box, .four-box, .six-box {
	min-height:60px;
	border-width: 1px;
}


/* media queries */

@media only screen and (min-width: 470px) {
.one-box, .two-box, .four-box, .six-box {
	float:left;
	margin-right:3.7%;
}
.six-box { width: 29.5%; }
.two-box, .four-box { width: 46.2%; }
.one-box { width: 96%; }
}
 @media only screen and (min-width: 1000px) {
.six-box { width: 12.8%; }
.four-box { width: 21.3%; }
.two-box { width: 46.2%; }
.one-box { width: 96%; }
body { font-size:1.2em; }
}
 @media only screen and (min-width: 1300px) {
/* move the nav bar to the left of the main content */
	
#content {
	width:auto;
	overflow:hidden;
}
#left-nav {
	float:left;
	margin:10px 10px 0 3%;
	position:static;
}
.menu-link { display:none; }
}


.wrap{
	clear:both;
	position:relative;	
	width:100%;
}
.wrap:after{
	content:".";
	clear:both;	
	display:block;
	height:0;
	visibility:hidden;
}
</style>
</head>

<body>
<div id="wrapper">
		<div id="top-nav"> </div>
		<div class="wrap">
				<div id="left-nav"> </div>
				<div id="content">
						<div class="row menu-link">
								<div class="one-box">
										<p><a href="#left-nav">Menu</a></p>
								</div>
						</div>
						<div class="row">
								<div class="one-box"> </div>
						</div>
						<div class="row">
								<div class="four-box"> </div>
								<div class="four-box"> </div>
								<div class="four-box"> </div>
								<div class="four-box"> </div>
						</div>
						<div class="row">
								<div class="two-box"> </div>
								<div class="two-box"> </div>
						</div>
						<div class="row">
								<div class="six-box"> </div>
								<div class="six-box"> </div>
								<div class="six-box"> </div>
								<div class="six-box"> </div>
								<div class="six-box"> </div>
								<div class="six-box"> </div>
						</div>
				</div>
		</div>
</div>
</body>
</html>