I Have this HTML
<div style="position: relative;">
<div style="top:0">
</div>
<div style='position: absolute; bottom:0; margin-bottom:0px;'>
</div>
</div>
This code is working absolutely fine for IE but on other browsers the two inner div are overlapping, I cannot give any specified height to the outer div.
You don't need absolute positioning :
<div style="position: relative;">
<div style="background:black;">
test
</div>
<div style='background:red;'>
test
</div>
</div>
See working fiddle.
Related
I have a div with a huge amount of text inside an outer div. The inner div contains a bunch of div itself I am using to format the article.
<div style="overflow: hidden;" id="article_area">
<div id="always_visible_stuff">
</div>
<div style="overflow: auto;" id="outer_div">
<div id="inner_div">
<div id="formatter1">
...
</div>
<div id="formatter2">
...
</div>
...
</div>
</div>
</div>
This displays a scrollbar, but I cannot scroll. Somehow the outer div doesn't seem to get the height of the inner div. What do I have to do to get a working scrollbar?
Set a height value on your .article-data element. Like for example :
<div class="article-data" id="article-data" style="overflow: auto;height: 100vh;">
I have the following HTML content. I have multiple elements (e.g., div with id = one, two, three) inside a div container which is scrollable.
In each element, I need to use CSS position 'absolute' which position related to its parent div (i.e., class='Anchor').
The problem I am having is, when I scroll the outer container, none of the divs with an absolute position moved. My understanding of position 'absolute' is it is positioned relative to its parent DIV element. How can I make those 'absolute' position move as I scroll the outer container?
<div style="overflow-y: scroll">
<div>
<div class="Anchor" id="one">
<div style="position: absolute"> something </div>
<div style="position: absolute"> something else </div>
</div>
</div>
<div>
<div class="Anchor" id="two">
<div style="position: absolute"> something </div>
<div style="position: absolute"> something else </div>
</div>
</div>
<div>
<div class="Anchor" id="three">
<div style="position: absolute"> something </div>
<div style="position: absolute"> something else </div>
</div>
</div>
</div>
You must set position: relative; on the parent div to get the child elements to move in relation to it.
The reality is, you can have the parent div set to any user-defined position, as long as the default static position isn't being used.
Try position: sticky on the div that you want to make float. Also beware the browser support is not that great for sticky.
Since this question is outdated my question is how do I create a fluid row within non-fluid container.
I want to have a non-fluid container as my default layout, however the map I am placing, i need it to be full-width non-fluid.
here is my html:
<div class="container">
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
row-fluid is not working with bootstrap 3, setting width: 100%; only takes width of its parent (non-fluid container).
JS Fiddle, Please increase output window width so you can see the difference.
Thanks in advance
Try following code. You can make a 100% width container inside fixed layout.
http://jsfiddle.net/m1L6pfwm/2/
HTML
<div class="row row-full"> content... </>
CSS
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
height: 100px;
margin-top: 100px;
left: 50%;
}
I'm not sure that a completely understand your question, but can't you just use Bootstrap's container-fluid to contain the map row?
http://bootply.com/KP9j6dKCES
<div class="container-fluid">
<div class="row" style="height:100px; background: #f00;">
this should take 100% width
</div>
</div>
Either use apropriate layout
or get same effect using following
<div class="row-fluid" style="position:absolute;z-index:5">
<div id="map-canvas" class="container-fluid"></div>
</div>
<div class="container" style="z-index:0">
<--fluid with respect to first static/relative parent-->
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
You can play same effect using Z-index but not with it's grand parent
I have the following split among 3 main div to be side by side. The very left div I want it to take up 60% of the screen and the rest 2 (description and resource) to take each 20%. When I run this all 3 are overlapping on the left portion. Below is my codes.
<div id="left" style="position:absolute;top:0px;left:0px;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="position:absolute;top:0px;left:0px;width:60%;height:400px">Map goes here.</div>
<div id="details" style="position:absolute;top:400px;left:0px;width:60%;height:400px">Details</div>
</div>
<div id="description" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">
</div>
<div id="resource" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">
</div>
They are overlapping because you've given them all absolute position and left 0. Absolute position removes the element from the normal flow of the page and puts it exactly where you indicate using the top/left/right/bottom properties. They will overlap as long as they have the same parent and same position properties.
Absolute position and left being 0 is making them overlap.
Please use css
see solution : http://jsfiddle.net/thecbuilder/vZ77e/
html
<div id="left">
<div id="map">Map goes here.</div>
<div id="details">Details</div>
</div>
<div id="description">description</div>
<div id="resource">resource</div>
css
#left, #description, #resource{
display:inline;
float:left;
height:100%;
}
#left{
width:60%;
background:#e6e6e6;
}
#description, #resource{
width:20%;
}
They are overlapping because you are using position absolute. instead place the divs at the top of the html page and do this instead:
<div id="left" style="float:left;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="float:left;width:60%;height:400px">Map goes here.</div>
<div id="details" style="float:left;left:0px;width:60%;height:400px">Details</div>
</div>
<div id="description" style="float:left;width:20%;height:100%;background:#ffffff;">
</div>
<div id="resource" style="float:left;width:20%;height:100%;background:#ffffff;">
</div>
This will place the divs beside each other
Is it possible to use a fixed width div and an expanding div? Something like:
<div style="float:left; width:200px">
</div>
<div style="float:left; width:100%"> // expand please
</div>
<div style="position:fixed; width:320px">
</div>
I'd like the middle div to just expand in width and take up whatever is left after position the left and right div. It works fine if I give each of them a width in %, but when using a fixed-width for some, they start overlapping when the browser frame gets small etc,
Thanks
How about:
<html>
<body>
<div style="float:left;width:200px;background:red">
</div>
<div style="float:right; width:320px;background:blue">
</div>
<div style="background:black">
</div>
</body>
</html>
<div style="left:0;width:30px;"></div>
<div style="left:30px;right:0;"></div>
You may need to make them absolute positioned and the parent relative.