I am about coding af new website but I am having some trouble fulfilling all design and SEO requirements. The site in fullscreen will have a max-width of 950px, a top and a bottom with full width of the page and a center area with a left part with width 200px and a content area with dynamic width – when the site is shown on small screens the top and bottom will remain top and bottom but left will be moved beneath content. The requirements to SEO is, that the content, in code, should be placed above the left part and no javascript used to fix design issues.
My big problem is placing the left part because if I use absolute position the bottom will not be bottom of the page – and using float gives me trouble when the screen is less than 950px but more than 320px where I change position of left.
Can anyone give me an example with these requirements?
EDIT:
A simple example with absolute position;
<!doctype html>
<html>
<head>
<title>TEST</title>
</head>
<body>
<div style="max-width: 750px; background-color: Red;">TOP</div>
<div style="max-width: 750px; position: relative;">
<div style="margin-left: 200px; background-color: Green;">CONTENT</div>
<div style="width: 200px; position: absolute; top: 0; background-color: Silver;">LEFT<br>LEFT<br>LEFT<br>LEFT</div>
</div>
<div style="max-width: 750px; background-color: Blue;">BOTTOM</div>
</body>
</html>
Closed – does not seem to be possible without the use of JavaScript.