Помогите расположить блоки

[ram222]

Есть шаблон вида
<div id="topheader">шапка</div>
<div id="left">меню</div>
<div id="content">контент</div>
<div id="right">доп меню</div>
<div id="footer">подвал</div>
стили:
#topheader{
width: 100%;
float: none;
}
#left{
width: 30%;
float: left;
}
#content{
width: 50%;
float: left;
}
#right{
width: 20%;
float: left;
}
#footer{
float: none;
width: 100%;}

требуется поменять блоки МЕНЮ и КОНТЕНТ в коде местами, но чтобы визуально всё осталось как есть.
Или тыкните на такой готовый шаблон или пример сайта.
Ещё лучше чтобы КОНТЕНТ был первым в коде.

 

[mdss]

Есть шаблон вида

а стили где?

 

[Sunday]

тыкните на такой готовый шаблон или пример

Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

 

[ram222]

стили например вот так:
#topheader{
width: 100%;
float: none;
}
#left{
width: 30%;
float: left;
}
#content{
width: 50%;
float: left;
}
#right{
width: 20%;
float: left;
}
#footer{
float: none;
width: 100%;}

 

[e80]

Поменяй в html их местами и все.
то есть сначала content, потом left:
<div id="topheader">шапка</div>
<div id="content">контент</div>
<div id="left">меню</div>
<div id="right">доп меню</div>
<div id="footer">подвал</div>

 

[DevOrc]

А можно, используя флекс модель поменять порядок блоков прямо в CSS Для просмотра ссылки Войди или Зарегистрируйся

 

[Droid37]

Поменяй в html их местами и все.
то есть сначала content, потом left:
<div id="topheader">шапка</div>
<div id="content">контент</div>
<div id="left">меню</div>
<div id="right">доп меню</div>
<div id="footer">подвал</div>

плюсом ширину поправить
#left{
width: 50%;
float: left;
}
#content{
width: 30%;
float: left;
}

но для чего это надо?

 

[Sherzod]

но для чего это надо?

Это скорее всего нужно автору для оптимизации сайта под поисковые системы. Контент находится выше, поисковик видит его первым и показывает в запросе сразу описание.

 

[s300]

Поменяй в html их местами, чтобы было так:
<div id="content">контент</div>
<div id="topheader">шапка</div>
<div id="left">меню</div>
то есть сначала content, потом left.

а в CSS так:
#left{
width: 300px;
float: left;
}
#content{
margin-left: 300 px;
width: 50%;
}
т.е. в CSS в Left надо заменить 30% на 300px, а Content будет отступать от левого края на 300px. Если, конечно, я не ничего не напутал. Единственное неудобство - левая колонка будет фиксированной ширины 300 px.

Если при этом возникнут проблемы с позиционированием правой колонки, то ей в CSS укажи так:
#right{
width: *%;
float: left;
}
кажется *% означает ЗАНЯТЬ ОСТАВШИЕСЯ ПРОЦЕНТЫ, но в этом я не уверен, если не прав - подскажите.

 

[humen]

csstemplater.com - очень удобный сервис, сам давно им пользуюсь(плюсанул Sunday).
Но сейчас все модней становится пользоваться css скелетами такие как бутстрап, скелетон и т.д.
Они хороши тем, что тебе дается удобный конструктор, из которого можно сделать все что хочешь, и при этом в css файле будут прописаны @media правила, для правильной работы сайта на устройствах с разными разрешениями.