I have a fixed div element at the top of the page. It can have varying height depends on word count. Underneath is a scrollable list. I would like the list to always appear a small distance below the fixed div element. So the margin top will be 10px. The set up is as follows:
<div fixed>
fixed item here
</div>
<div>
scrolling item here
</div>
You can use ion-header and ion-content to achieve this. Put the fixed header div in ion-header and the scrolling list inside ion-content.
P.S. you can even put ion-header and ion-content inside another ion-content if needed.
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 have an absolute div as the main content area on my page design. I have another div that occupies the top portion and which is 450px in height. I cannot know the height of absolute div before page load, so will only be able to find it out after page load has happened.
Now the problem is that my body also occupies 450px (height), so if I want to display something after the absolute div has ended I am unable to do so.
Summary :
Absolute Div : 600px (for example, don't know the actual height) Has position:absolute.
Top Div : 450px (No position:absolute)
Body Becomes 450 px as expected
How do I place a div below the absolute div. Currently the only thing I can think of is jQuery.
Here is a jsfiddle I made to the illustrate the problem. Even though the whole body displays blue, if you fire up the developer tool and inspect, you'll see that the html and body both occupy
UPDATE : Linky I'm trying to display the main content area above a few elements. Those circles that you see are seperate elements. And they need to stay that way.
I think you need to learn more about the positions!
Anyhow the current problem you are referring to will be solve if you change the position to relative!
<div id="First Div" style="height:100px;width:50px;position:relative;background-color:green;">
</div>
<div id="BelowDiv" style="height:100px;width:50px;position:relative;background-color:pink;">
</div>
But if you really need to place it somewhere static or in another word "absolute", then you need to place a container div and set the position to absolute, then place the other two or even more or inside the container Div.
<div id="container" style="position:absolute; top:y; left:x">
<div id="FirstDiv" style="position:relative;></div>
<div id="SecondDiv" style="position:relative;></div>
</div>
You can use jquery to append tags to your container. here is the sample link to do it!
If it didn't help try the height:auto and also overflow:visible for your container!
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!
I have a div element that is defined on the top of the page and I have this another div element that is defined at the bottom of the page.... is there any way that I can define the first div element (at the top) as a child of the div element that is at the bottom.
The problem is I need a div in header in the header file (header.php) this div acts as a container for an JS, but once the data is loaded I want it to be displayed inside another div.
Would postponing the loading of JS till the middle section of page is advisable...
Yes: make the top div a child of the bottom div by placing the child within the markup of the parent, and use absolute positioning to move the child to the top.
No, because it's not a child of that DIV. If you want it to be a child, make it a child, and then alter it's position with CSS to be on the top of the page.
No, though you can move it with JavaScript after the second element loads.
By "child" do you mean simply appears inside, yet the HTML is defined at the top? If so, you could also possibly simply change the positioning via CSS.
Are you constrained to output the HTML for the first div at the top of the page for any reason? The real solution here is to simply output elements where you actually want them.
No idea why you would want to do that but this markup should suffice:
<div id="wrap">
<div id="main">
<!-- Insert content, push off the top with "margin-top:150px", etc. -->
</div>
<div id="foot">
<div id="head">
<!-- Insert header stuff, position with "positon:absolute", etc. -->
</div>
</div>
</div>
Tweak width, height, margin and padding of elements to taste.