Ajax Loader
×
HTML
<div id="container">
1
<div id="container">
2
<div id="header">
3
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus dignissimos laborum sed repellat ab ad ut nostrum est aut pariatur. Deleniti illo et saepe temporibus odio quas iste ea numquam.
4
</div>
5
<div id="wrapper">
6
  <div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ipsum soluta libero rerum eum totam! Obcaecati dolore aut veniam facere suscipit quaerat aliquid nulla numquam nam id accusamus ad quo.</div>
7
  <div id="content"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae vitae corporis fugiat incidunt ratione animi officiis porro quo debitis aspernatur? Dolor cumque perferendis possimus assumenda rerum quidem a deleniti ut.</div>
8
  <div>Fugit minima recusandae a quo id voluptatem exercitationem atque quae maiores dignissimos iste veniam velit autem corrupti quas perspiciatis dolore vitae sed. Molestiae architecto ratione dolorum voluptatibus animi odit esse.</div>
9
  <div>Officiis vitae eaque repellendus eius adipisci perferendis quaerat illum possimus praesentium saepe? Pariatur laudantium in eos mollitia quos possimus consectetur modi odit itaque ipsa aperiam corporis at officiis enim explicabo?</div>
10
  <div>Sit fugiat repellendus officiis at doloribus illum perferendis quo dignissimos unde similique atque porro magnam corporis. Consequatur molestiae pariatur ullam necessitatibus aperiam voluptate provident quasi eaque consequuntur sed repellat itaque.</div>
11
  <div>Explicabo corporis est quam tempore velit accusamus dolorum suscipit modi sed hic facilis consequuntur itaque magnam architecto reiciendis nam sit labore non illo ab? Earum totam delectus explicabo fugiat numquam.</div>
12
  <div>Quas voluptatum nostrum neque quaerat nemo aut aspernatur eligendi esse accusantium quae quod reprehenderit est animi nulla quia ut facilis sunt recusandae tempora dolores quidem error labore officia iure id!</div>
13
  <div>Eaque libero sequi tempora placeat aspernatur ut blanditiis ad quod molestias natus non id temporibus nam qui ea pariatur deleniti dolorem dolore nesciunt neque vel asperiores quia aperiam quos odio.</div>
14
  <div>Molestias consequatur ea quis iure nisi nesciunt provident optio veniam. Deserunt consequuntur consectetur illo praesentium nostrum rerum illum sunt est tempora eos deleniti quasi vero aspernatur beatae pariatur id dolorem!</div>
15
  </div>
16
</div>
17
 <div id="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque facilis non sapiente repellendus. Et quis dicta porro nulla fuga harum optio minus tempora consequuntur aliquam reprehenderit distinctio excepturi ea doloribus?</div>
18
  </div>
 
CSS
#container {
1
#container {
2
  display: table;
3
  width: 600px;
4
  margin: 0 auto;
5
}
6
 
7
#sidebar {
8
  display: table-cell;
9
  background-color: blue;
10
  width: 120px;
11
} 
12
 
13
#content {
14
  display: table-cell;
15
  width: *;
16
  background-color: green;
17
}
 

Untitled

CSSDeck G+