Ive got two DIV elements one of which has absolute position (lower left corner of main DIV). The second DIV is hidden and only displayed by clicking on a link.
I need the second one to appear just below the first one. But since the first div's position is absolute the second one appearing on top of first one.
HTML Code:
<div class ="main-div">
<div class = "wrapper">
<div class ="first-div">
<span>my link</span>
//this is absolute positioned
</div>
<div class ="second-div">
//this only appears after clicking on a link
<form>
<textarea>
</textarea>
</form>
</div>
</div>
</div>
CSS:
div.wrapper {
width:inherit;
float:left;
bottom:6px;
position:absolute;
padding: 0 0 0 0;
overflow: auto;
}
div.second-div {
padding-top: 2px
}
div.main-div{
background:{colour} url({image}) no-repeat 0 100%;
width:557px;
padding:8px 13px 4px 13px;
min-height:61px;
position:relative;
}
Thanks in advance for any help.
I think the solution entails doing the following. Have a wrapper div:
<div id="my_wrapper">
content
</div>
Have this div absolutely positioned. Then inside of this div have two divs, your visible div, and the one that needs to "become" visible.
<div id="my_wrapper">
<div id="visible_item">Item</div>
<div id="may_become_visible">Not Visible Now Item</div>
</div>
Then you can show/hide as necessary and position the inside content correctly.
Ok, with you updated question I believe I've created what you're looking for with the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style>
HTML
{
margin: 0px;
padding: 0px;
height: 100%;
}
BODY
{
margin: 0px;
padding: 0px;
height: 100%;
}
div.first-div
{
width: inherit;
float: left;
bottom: 60px;
position: absolute;
padding: 0 0 0 0;
overflow: auto;
}
div.second-div
{
display: none;
position: absolute;
float: left;
bottom: 0px;
}
div.main-div
{
background:{colour} url({image}) no-repeat 0 100%;
width:557px;
min-height:61px;
position:relative;
float: left;
height: 100%;
}
</style>
<div class="main-div">
<div id="firDiv" class="first-div">
<span>my link</span>
//this is absolute positioned
</div>
<div id="secDiv" class="second-div">
//this only appears after clicking on a link
<form>
<textarea></textarea>
</form>
</div>
this is my content
</div>
</body>
</html>
Now, what this does is absolute position both the first and second divs at the bottom of the page, positioned so that they don't overlap each other. If you don't like the fact that the first div is up so high from the bottom of the page, you can modify the first-div style as such:
div.first-div
{
width: inherit;
float: left;
bottom: 20px;
position: absolute;
padding: 0 0 0 0;
overflow: auto;
}
and then update the link to
<span>my link</span>
Basically, what you're doing there is changing the first div to be closer to the bottom of the page but then moving it when the link is clicked so that there's more room for the second div.
It's not solving the underlying issue of displaying a relative positioned div under an absolutely positioned div, but hopefully is resolves your specific problem.
Just a guess, but have you tried adding the style clear: both to the second div? I doubt it will help, but it might.
You can also try adding a top margin for the second div that is equal to the height of the first div. Basically, something like:
<div id="second-div" style="padding-top: 40px">
Where 40px is the height of the first div. The issue there is that you'd need to know what the height of the first div is and if it is variable then this approach will not help.
Related
I am trying to create fixed position div inside relative container. I am using bootstrap css framework. I am trying to create a fixed position cart. So whenever user scroll page it will show cart contents. but now problem is, it ran outside that container div.
This has to work in responsive mode.
Here my try:
.wrapper {
width: 100%
}
.container {
width: 300px;
margin: 0 auto;
height: 500px;
background: #ccc;
}
.element {
background: #f2f2f2;
position: fixed;
width: 50px;
height: 70px;
top: 50px;
right: 0px;
border: 1px solid #d6d6d6;
}
<div class="wrapper">
<div class="container">
<div class="element">
fixed
</div>
</div>
</div>
Screenshot:
This is how position: fixed; behaves:
MDN link
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and doesn't move
when scrolled. When printing, position it at that fixed position on
every page.
Hence, to get what you want you have to use something more than fixed positioning:
Probably this:
.wrapper {
width: 100%
}
.container {
width: 300px;
margin: 0 auto;
height: 500px;
background: #ccc;
}
.element {
background: #f2f2f2;
position: fixed;
width: 50px;
height: 70px;
margin-left: 250px;
border: 0px solid #d6d6d6;
}
<div class="wrapper">
<div class="container">
<div class="element">
fixed
</div>
</div>
</div>
Make the element's parent container have position: relative
Instead of using top or left use margin-top and/or margin-left
If you only use top that will position the element based on the window, but if you use margin-top that will position based on the parent element. Same goes for left or right
<div class="parent">
<div class="child"></div>
</div>
.parent {
position: relative;
}
.child {
position: fixed;
margin-top: 30px;
margin-left: 30px;
}
I found the answer to that :
<div class="container">
<div class="inContainer">
<p> coucou </p>
</div>
<div>
<p> other thing</p>
</div>
</div>
You want that class="inContainer" are in class="Container" in fixed position but if you scroll with the navigator scroll you don't want that the class="inContainer" move outside the class="container"
So you can make something like that
.container{
height: 500px;
width: 500px;
overflow-y:scroll;
}
.inContainer {
position: absolute;
}
So class=inContainer will be always on the top of you're class=Container and move with you're class=container if you scroll with navigator scroll =)
(tested only with chrome)
No it's impossible because fixed property throws the element out of the flow so it doesn't depend to anything on the document and yes it is no more contained in your container : )
Yes, you can do it, just use margin-top property instead of top property.
When you use position: fixed and specify a top and or left position,
you'll find that the element will be fixed relative to the window, and
not to any other element of position: relative.
There is a way around this and that is not to specify top and left
positions but instead to use margin-left and margin-top on the
position: fixed element.
Source: https://www.gravitywell.co.uk/latest/design/posts/css-tip-fixed-positioning-inside-a-relative-container/
The behavior of the positioning is mentioned in the AdityaSaxena's answer https://stackoverflow.com/a/18285591/5746301
For creating a fixed position cart, you can also do it with using the jquery.
If we apply the Left or right value or margin, we may face some issue while responsive.
In the below snippet, I have placed the fixed element at the right of the container.
Even if the width of the container increased the fixed element placed accordingly.
Here is the jsfiddle Demo URL
//Jquery
$(document).ready(function(){
var containerWidth = $(".container").outerWidth();
var elementWidth = $(".element").outerWidth();
var containerOffsetLeft = $(".container").offset().left;
var containerOffsetRight = containerOffsetLeft + containerWidth - elementWidth;
$(".element").css("left", containerOffsetRight);
});
//CSS
.wrapper {
width:100%
}
.container {
width:300px;
margin:0 auto;
height:900px;
background:#ccc;
}
.element {
background:#f2f2f2;
position:fixed;
width:50px;
height:70px;
top:50px;
border:1px solid #d6d6d6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="element">
fixed
</div>
</div>
</div>
Hope this may help you.
Thanks
If you are looking to show the cart even when the user scrolls that is fixed then you should use position:fixed for the cart (if .container is your cart), because it should be shown with respect to screen/viewport. Your current code will only show the element which is positioned absolutely inside the container. If you want it to be like that then give :
.container {
position:relative;
}
.element {
position:absolute;
top:50px;
right:0px;
}
<div style="position: fixed;bottom: 0;width: 100%;">
<div class="container" style="position: relative;">
<div style="position: absolute;right: 40px;bottom: 40px;background:#6cb975;border-radius: 50%;width: 40px;text-align: center;height: 50px;color: #fff;line-height: 50px;">
F
</div>
</div>
</div>
You can just add
.element {
left:368px;
}
Fiddle: http://jsfiddle.net/UUgG4/
Before you read further, I am utilizing the OneByOne Jquery Slider plugin, the plugin content is what I am attempting to snap to the top of its container div. To read more about OneByOne, here is a link: http://codecanyon.net/item/jquery-onebyone-slider-plugin/684613
I am attempting to snap an inside div to the top of its container div, here is my (what I think is anyway), the related CSS:
#banner{
position: absolute;
}
.oneByOne1{
margin-right: auto;
margin-left: auto;
width: 960px;
height: 420px;
position: relative;
overflow: hidden;
}
#banner .oneByOne_item{
position: absolute;
width: 960px;
height: 420px;
overflow: hidden;
display: none;
}
The div I am attempting to snap to the top is the "banner" div, and the container div is "content", but with the OneByOne plugin, it's recognized as the oneByOne div block coded above, here is my relevant HTML:
<div id="content">
<div id="banner">
<div class="oneByOne_item">
<img src="img/storefront.jpg" class="item_1_1" />
</div>
<div class="oneByOne_item">
<img src="img/livemusic.jpg" class="item_1_2" />
</div>
<div class="oneByOne_item">
<img src="img/brokerecord.jpg" class="item_1_3" />
</div>
</div>
</div>
Here is a link to my current site: http://raider.grcc.edu/~ryanduffing/recordstore/
<div class="search_line"> has position:relative and top: -100px. The image inside has a height of 61px, so the div around it does too.
Because you have it positioned relatively, it is still taking up space in the DOM where it naturally would appear, but your top value is "pulling" it up to where it appears visually. Because it's still taking up space in the DOM, it's pushing your #content down the 61px.
I can't see a good reason to leave it how you've done it, so if you can alter it without breaking anything else, I'd recommend changing it to
.main_header .search_line {
position: absolute;
top: 39px;
right: 0;
}
I found a lot of questions on stack overflow about getting rid of white space, but I can't seem to figure out how to put it in.
I have a bottom navigation on my site that floats with the page, but if the window is small, the bottom part of the page gets covered up. I would like to insert some white space at the bottom, so when the window is smaller than the length of the page you can still read it.
I've tried adding:
margin-bottom: 50px;
padding-bottom: 50px;
to the div containing the top page content, but it doesn't work.
Is there something I am missing? Here's a demonstration: http://www.writingprompts.net/name-generator/
#left, #right {
margin-bottom: 90px;
}
or
#top_section > div {
margin-bottom: 90px;
}
It doesn't work on #top_section because you use absolutes and therefore the content actually over extends the div itself, but trust me, either of those two css' i gave you WILL work
Simply add the following rule:
#top_section {
overflow: hidden;
padding-bottom: 90px;
}
This will make #top_section be as big as the floating content inside it.
http://jsfiddle.net/rlemon/fSYmu/ This is a simplified example, having no idea what your layout looks like (I am not going to assume the demonstration is yours... unless you revise and tell me it is) i'll show you how I would do this
HTML
<div class="container"> <!-- main page wrapper -->
<div class="content"> <!-- main content wrapper, backgrounds apply here -->
<div class="inner-content"> <!-- content inner, where your content goes! -->
content
</div>
</div>
<div class="footer">footer</div> <!-- footer -->
</div>
CSS
html,body,.container {
height: 100%; margin: 0; padding: 0; // I am important so the page knows what 100% height is.
}
.content {
height: 100%; // see above... i need to cascade down.
background-color: green;
}
.content-inner {
padding-bottom: 100px; // offset for the footer.
}
.footer {
width: 100%;
position: absolute; // stick me to the bottom.
bottom: 0;
height: 100px;
background-color: red;
}
enjoy!
You need to use fixed position in CSS to achieve this.
HTML:
<div id="top-section">
Insert content here...
</div>
<div id="bottom-nav">
<div id="content">
Bottom content...
</div>
</div>
CSS:
#bottom-nav {
bottom: 0;
position: fixed;
width: 100%;
}
#content {
margin: 0 auto;
width: 960px;
}
I have this html code
<div id="b_container">
<div id="b_header">
<div class="header_left">link 1 </div>
<div class="header_left">link 2 </div>
<div class="header_left">link 3 </div>
</div>
<div id="b_content">content goes here</div>
<div id="b_footer">footer goes here</div>
</div>
I used this css code
#b_container
{
margin-right: auto;
margin-left: auto;
background: red;
width:900px;
padding: 10px;
}
#b_header{
background: #FFF;
padding: 5px;
}
.header_left{
float: left;
width:100px;
background: #CCCC00;
}
#b_footer{
background: #FFF;
padding: 5px;
}
#b_content{
background: #00FFFF;
padding: 5px;
height: 100px;
}
but the result shows the three divs (with class header_left) above the b_content. why ?
You have to stop the floating from the divs (with class header_left). You can do it with adding following line to #b_header:
overflow: hidden;
Also see this example.
An alternative is to add an empty div with clear: both; as last one in the div with id b_header. See this example.
but the result shows the three divs (with class header_left) above the
b_content. why ?
This is because you are not clearing the floats, you can do so by using overflow:hidden property or adding a div with clear:both property as the last child of the parent div
container.
Basically, with flaots, you need to clear them, just create a div with this css: clear: both.
That should do the trick.
See more about floats here
I have a page that I am trying to create with a div on the left containing an iframe and a div in the middle also containing an iframe.
The sidebar is to hold links and the content section is to load said links.
My goal is to get the sidebar expanded all the way down to the bottom of the page as well as the content section.
Here is my css:
html, body {
height:100%;
margin:0px;
padding:0px;
}
#wrapper {
position: relative;
min-height: 100%;
}
#sidebar {
position: relative;
float:left;
width: 150px;
overflow: hidden;
min-height: 100%;
}
#pdfholder {
float: right;
width: 600px;
}
And here is my html:
<body>
<div id="wrapper">
<div id="sidebar">
<iframe id="sidebarframe" name="index" src="./sidebar.html">
</iframe>
</div>
<div id="pdfholder">
<iframe id="pdfholderframe" name="viewer" src="./blank.html">
</iframe>
</div>
<div style="clear: both;"></div>
</div>
</body>
I know I am doing something wrong but I have gone through around 10 different websites and I cannot for the life of me find it!
You can give both containing divs a min-height of 100% and there's not much more you need to do:
http://jsfiddle.net/GolezTrol/eHMec/
You can give the iframes a height of 100% too, but it didn't become clear to me whether you need that or not.
From what I can understand from your question, this JSFiddle (simpler version here) should do the trick.
CSS
div
{
background: black;
}
div div
{
margin-left: 150px;
background: white;
}
div ul
{
float: left;
color: white;
}
HTML
<div>
<ul>
<li>Nav bar</li>
<li>More nav</li>
</ul>
<div>
Content
</div>
</div>
Obviously this is a very simple example and you should give your elements classes or IDs if needbe; I wanted to keep it simple.
The principle of this is a float: left, a margin-left: 150px and some background-color properties. You give your container div a background colour of whatever you want the sidebar to be coloured as, and then set the content divs background back to white, or whatever you want that to be.
The float: left for the navbar ul means the main content is pushed back to the top.
The margin-left: 150px gives the navbar 150px on the left of the content to expand into. Obviously you should change this to the width of the navbar.