How to position the menu block on the right?

S

SplashWeb2017-03-09 21:59:52

css

SplashWeb, 2017-03-09 21:59:52

Hello!
There is a certain pattern:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content='text/html; charset=windows-1251'>
<link href="/style.css" rel="stylesheet" type="text/css"></head>

<body>

<div class="main">
<div class="menu">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
  </ul>
</div>

<div class="content">
<h1>Что такое Lorem Ipsum</h1>
Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</div>
</div>

</body>
</html>

body {margin: 0; background: #fff; padding: 0;}
div {font-family: Arial, Tahoma, sans-serif; font-size: 16px; color: #666; padding: 0; margin: 0;}
a:link, a:visited {color: #111; text-decoration: underline;}
a:hover {color: #000; text-decoration: underline;}
h1,h2 {font: normal 20px 'Arial'; color: #222; margin: 0; padding: 4px 0; text-decoration: none; line-height: 20px;}

.main {display: table; width: 1000px; margin: 40px auto;}

.menu {display: table-cell; width: 200px; background: #f5f5f5;}
.menu ul {margin: 0; padding: 0; list-style: none;}

.content {display: table-cell; background: #efefef; padding: 20px;}

The task is to place the menu block after the content without changing the HTML template.
That is, in the source code of the template, first there is a "menu" then "content", but externally it should be displayed first "content" then "menu".
The catch is that you can't use flex.
Can you please tell me which method can be used?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

Maxim Timofeev, 2017-03-10
@SplashWeb

option 1 with js:
https://jsfiddle.net/egp31fma/2/
option 2 with pure css:
https://jsfiddle.net/egp31fma/4/