E. Shio E. Shio - 1 year ago 38
CSS Question

Centered Content w/ Sidebar (no header)

I want to use a sidebar as navigation and have the content centered in the users screen. I had a working setup with a sidebar and the content was centered between the right side of the sidebar and the right side of the screen, but it was bothering me. How can I have a centered content and a sidebar. The content must not be able to go under or over the sidebar. The sidebar also can not be pushed off screen by the content when resizing. Don't worry about mobile, as I will deal with that later with a collapsing menu. :P

As you can see in the codepen, the content is centered, however it goes under the sidebar. :( I just built it as an easy start and visual, for anyone who is interested in tweaking the code.

Here is a link to my Codepen.

It would be really helpful if you base your codepen/ jsfiddle 's code off my codepen code. Thanks! :) Any help is greatly appreciated, and I thank you in advance.


<div class="site-header">

<ul class="main-navigation"><a href="#">Overview</a>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<div class="content">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>


.content {
position: relative;
float: right;
border: 1px solid yellow;
word-wrap: break-word;
white-space: normal;
margin: auto;
box-sizing: border-box;

.site-header {
padding: 1em;
display: inline-block;
top: 0;
left: 0;
right: 0;
width: 12%;
height: 100%;
float: left;
text-align: right;
position: fixed;
overflow: hidden;
z-index: 1;
border: 1px solid green;
box-sizing: border-box;
// background-color: blue;

.main-navigation {
position: absolute;
bottom: 40px;
right: 0;
cursor: default;
// border: 1px solid red;
list-style-type: none;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;

Answer Source

You can set a percentage width on the content of something like 90, and a 10% width on the sidebar.

     border: 1px solid red;
     width: 90%;
     width: 10%;
     border: 1px solid green;

Here is a jsfiddle if I understand what you want. https://jsfiddle.net/49t0kspp/