Title: Align to right of fixed element
Tags: css;css-position
Question: I have a navigation bar to the left of my page. This bar is fixed, so that it can scroll with the page.
Now I want to align my content to the right of it, but I do not want to explicitly specify the width/margin of either the navigation bar or the page content, so that the navigation bar can expand to fit its text.
How could I do such a thing using CSS?
I am using position: fixed to align my navigation bar like so:
#navbar,
#navbar &gt; ul,
#navbar &gt; ul &gt; li {
list-style: none;
margin: 0;
padding: 0;
border: 0;
#navbar &gt; ul {
position: fixed;
float: none;
background: #fff;
#navbar &gt; ul &gt; li {
float: none;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
Here is the HTML:
<div id='navbar'&gt;
<ul&gt;
<li&gt;<a class="nav" href='#home'&gt;<span&gt;Home</span&gt;</a&gt;</li&gt;
<li&gt;<a class="nav" href='#articles'&gt;<span&gt;Articles</span&gt;</a&gt;</li&gt;
<li&gt;<a class="nav" href='#about'&gt;<span&gt;About</span&gt;</a&gt;</li&gt;
</ul&gt;
</div&gt;
Comment: did you try text-align:right; ?

Comment: What? No I mean that I want the other elements on the page to treat the navigation bar as if it weren't fixed so that they would align to the navigation bar instead of the left of the page.

Comment: Since the navigation bar is fixed, it cannot communicate its size to the rest of the page (as far as I'm aware); therefore, the page content cannot size around it. The only way other than explicitly setting a width, padding, or margin somewhere would be to use JavaScript, I think.


Here is another answer: If you don't want to specify the width of either container you can work with float: left; and display: block; and then dynamically set a max width on one of the container via jQuery.
Check out my fiddle: http://jsfiddle.net/ZxQLV/
The sidebar can basically have any width and the content div will adapt to it. Try changing the content of both and run the fiddle again.
Comment for this answer: It works, but I need the container to scroll with the page, which is why I'm using `position: fixed`.

Here is another answer: Demo: http://codepen.io/theskumar/full/slgfi (resize browser to see the effect)
Code: http://codepen.io/theskumar/pen/slgfi
Further help
You should have two main level containers with width in %. One positioned absolutely which can scroll and other positioned fixed.
Now you can put contents in those container as you wish. They will fit and resize.
Comment for this answer: What do you mean by without width? Can you explain?
If you remove `width` it will take the natural width of the '.containers' but i won't recommend that. Important thing is `absolute` and `fixed` property width is optional. Any diagram or something for explanation.
Comment for this answer: @AndrewSun the issue is there is no way of knowing the width of a div containing only text. The text always wrap in the width of the container. If you have some fixed width elements in a the `nav` div then you can try using javascript to get the width of the `nav` div and set the width of `content` div after subtracting the width of nav. something like `$content.width($('body').width() - $nav.width())` on page load and window_resize event.
Comment for this answer: I have previously tried that, is there any way to do it without specifying the width of either element?
Comment for this answer: The thing is that the navigation bar should stretch to fit the text within it, rather than always take up a fixed percentage of the page. Effectively, I'm looking for what domdev had, but with the left sidebar scrolling with the page rather than remaining at the top.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:09/29/13', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<css><css-position>', 'Title': 'Align to right of fixed element', 'ViewCount': 577, 'id': 19075904, 'user_AboutMe': '', 'user_AccountId': 1915961.0, 'user_DisplayName': 'Andrew Sun', 'user_Reputation': 3951.0, 'user_Views': 717.0, 'user_id': 1808989.0}}