I have a navigation bar on top, horizontally. This navigation bar is centered in the middle of the page and has no fixed width.
Below, I have a content box, which gets a max-width approaching the width of the top navigation, it is also centered.
Now, I want another navigation box at the left side of the content (can be with fixed width, but better not), but the content still to be centered (not a box including both navigation and content).
problem with center http://img688.imageshack.us/img688/4306/problemcenter.png
So the code looks like this:
<nav id="main-navigation"></nav>
<nav id="sidenav"></nav>
<section id="content"></section>
Any ideas?
Have a look at this demo.
#sidenav is positioned absolutely with its parent being #content.
If I may, I would like to recommend the following:
Wrap the elements above with a container.
Apply position:relative to this new container.
Next, apply position:absolute to #sidenav.
Finally, go ahead and position #sidenav by applying right:100%
to it.
And there you have it! All you need to do now is style it accordingly.
Here's a fiddle for a working example.
This might be what you're looking for: fiddle!
Related
I am creating basic html page and i have one main container div and it contains one header div that is fixed at the top and working fine. and next to header, i have animation div, images div and next to images I have one description div and i have divided the description div into two div. div1{float:left} and div2{float left}... Now when i open the page and scroll down to reach the div 1 and div2. I want that div2 should be fixed under the header when it reaches to the header bottom...
Is it possible to solve with simple css or javascript or something else required.
if possible with css then how to proceed
Ok I think I see what you mean. You want the float-menus div to not go on top of the menu block (static-header div). Correct? In that case you just need it to be a higher z-index. Float-menus is currently z-index:201; so just make static-header a bigger number.
#static-header{
z-index:301;
}
See my updated fiddle: https://jsfiddle.net/z9bxhbfs/
I've got a fixed header element that I would like to stay fixed on scroll. The scrollable area, however, I would like it to be positioned directed after the fixed element, but I don't want to use position: absolute and remove it from the document flow.
I've created a Codepen here to illustrate the problem I'm having. I would like the red element (.top) to stick on scroll, without hiding the first list item.
Is there a way to go about doing this in CSS (possibly using flexbox) that doesn't require any JS?
Any help is appreciated.
Thanks in advance!
If my understanding of your question is correct, you want to make no changes except for the scrollable content to not be hidden behind the fixed header.
The fixed header seems to have a natural height of nearly 20px.
So you can apply a top margin to the scrollable content which pushes it down from the top, until it clears the header.
Try adding this to your CSS:
div.list { margin-top: 20px;}
This will push the div containing all the list items 20px from the top.
DEMO: http://codepen.io/anon/pen/EVWYJd
UPDATE
The answer above works when the height of the fixed header is known. But based on feedback in the comments, the height of the header varies. So a solution is needed that keeps the scrollable content beneath the header regardless of the height of the header.
This issue has been addressed in these posts:
How do I use CSS to position a fixed variable height header and a scrollable content box?
Creating a variable height "fixed" header in CSS with scrollable content
I am using bootstrap to design web application. I have two main divs, sidebar div with span 2 which has position : fixed and right div which is of span 10. These divs has float : left property as per bootstrap css file as I am using row-fluid class.
So the problem I am facing is when window size is reduced after certain limit, user is able to scroll the content of right div and which is overlapping with left div. So I want hide the content of right div which overlaps on left div ( ie. left div, the fixed div, should behave like a left wall of browser window for right div).
I have tried using overflow property and also tried changing z-index of divs, but nothing seems to be working here.
jsfiddle link - here is the link I have reproduced the problem, there if you scroll left in result area, you can see the content of right div is overlapping with left div(nav list), as I have given left-margin : 240px to rightDiv. So what I want is, the right div content should not overlap left div, and it should be hidden behind.
Any suggestion on how to get it right or is there any other way to achieve the same?
I'm not 100% sure exactly what you are trying to do. If it's just hiding whatever is overlapping then applying a background-color to the fixed div will achieve this.
JSFiddle.
You can left padding equal to the width of left navigation to prevent the overlapping (imitate)
padding-left:140px;
JSFiddle
How can I make the content text on this page, http://morriswebsitedesign.com/about.html, line up with the navigation links? I used to use the absolute property or tables, but now I'm trying to figure out how to use float.
I want it to look like this:
A BBB
where A is nav and B is content.
In CSS when using float, the item you add float to should also have a width.
http://jsbin.com/azetuk/
But when floating you need to know about clearing those floats. Here is a good read:
http://css-tricks.com/the-how-and-why-of-clearing-floats/
If you want logo beside content too, wrap menu and logo in div then float that element
http://jsbin.com/itaqok/
Your text and navigation links are too wide to fit in their containing div. If you want them to line up, you'll have to increase the size of the containing div, or decrease the size of the text and/or navigation links.
When I use the following style, for example, they line up perfectly on my computer:
#content { width:700px; }
You'll have to wrap the miniature logo and the navigation links in a div with the style float:left;. You can then remove the float:left from the miniature logo and the ul.
First remove the float:left from the #content, that will make your #content to be at the right side of the menu.
Second if you don't want part of the text to be under the menu, give it an overflow:hidden.
#menu{float:left}
#content{overflow:hidden}
This way you won't need to give any width to your content.
In order to make some space between them you can give a margin-right and margin-bottom to your menu.
#menu{margin-right:20px; margin-bottom:20px}
I see that in your css your 'p' have margin-top. And that makes the top of your content not to be aligned to your menu. You can use css3 to remove the margin of the first element.
#content p:nth-child(1){margin-top:0}
EDIT:
To align the #content with the logo:
#logo2{width:200px; float:left}
#menu{width:200px; float:left; clear:left; margin-bottom:100px}
#content{display:inline}
First you need your logo and your menu act as a column, to get that both must have the same width, and be floated to the left. The clear left will make your menu to move under the logo.
Then select your #content remove any float:left and give it a display:inline, that way it won't act as a block anymore.
The margin-bottom of the menu is to make that your text won't move under your menu, but you can try giving your menu a bigger height.
I have got an issue in a header where I want the middle element to stay centered between the two flash end pieces. I put the middle element after the right div in the html, thought I specified the css right, but when I STRETCH the page to the right, the middle element does not move/stay centered. Are you able to see what I'm doing wrong?
From looking at the code on the page you supplied, you need to remove the float:left from the headerCenter div