I am facing problem with nested divs. Text on parent div would get hidden from div in front.
Nested div "numReview" is set to be bottom left of parent div Bodyboxleft.
Reason I want numReview to be on bottom left is because some pages would have less content some pages would have more content. When on page with more content, div:numReview would hide bottom 80px of content in bodyboxleft div.
fiddle link page is below:
http://jsfiddle.net/CANu4/1/
You have a position: absolute; with float:left;..............
remove position:absolute; so that #numReview won't go over the text
#numReview {
width: 820px;
height: 80px;
float:left;
background-color: #C0BFBF;
}
And if you are using position absolute, use the top property to place it in required position, though as there is no need of absolute on the page, you could do without it.
Related
I have a parent with position:fixed; width/height:100%; overflow:auto and a child that also has position:fixed. When the parent's content overflows and the parent starts scrolling I would expect the child to stay fixed in relation to the viewport. It does not.
the scenario is a slide down panel on top of the content using css transforms. The slide-down panel has a close button that should stay in view while the panel's content scrolls. Change the .overlay-slidedown class on the .overlay element to .overlay-fade and, in that case, the close button will stay in it's place.
https://jsfiddle.net/xajk7uez/3/
If you add an extra layer within.overlay as a sibling to .overlay-close to only address the overflow-y: scroll; the position: fixed; on .overlay-close will work. This .overlay-content layer should also be 100% width/height
.overlay > .overlay-content {
width: 100%;
height: 100%;
overflow: auto;
}
See updated Fidle for the demo.
https://jsfiddle.net/n0wxfc60/2/
The Solution for your issue will be
placed the .overlay-close outside the .overlay
see my edits here https://jsfiddle.net/xajk7uez/5/
I believe this question addresses your issue.
So basically, I want two divs to sit inside another div. The first one is sitting inside with no issues, but the second one floats underneath the parent. When I add overflow:hidden I can't see the div anymore. The closest I've gotten to a solution was to add overflow:auto, but that just creates a scroll bar. I have tried resizing, different positioning, overflow and clearfix but so far I can't find a solution. Any ideas guys? JSFiddle demo here http://jsfiddle.net/QLbGc/ Thanks for any help, it's been annoying me for a couple of days now.
You forgot to put float:left; at the slideshow div
It should be
#slideshow {
background-color: #000;
margin: 15px;
height: 95%;
width: 60%;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}
So now you have the 'slideshow' div floating left and 'about' div floating right and they can fit inside the parent div.
Basically they were inside the parent div from the first time but the about div was under slideshow div.
Demo:
http://jsfiddle.net/QLbGc/2/
If you're looking to have the two divs side by side here's a fiddle for that.
http://jsfiddle.net/Hastig/QLbGc/6/
I stripped out a bunch of stuff as I wasn't sure you needed it or it was just stuff you were throwing at it to try and affect change.
Somebody mentioned you were missing a float: left; in what we assume you wanted as your left div.
Remember to compensate for margin and padding to match the container div.
In my example the main container was 500px wide. If I set each float div to 250px width when added to the 20px combined margins on those divs the total width goes to 520px and pushes that right div under the left div so you'll want each floated div at 240px to compensate. Same deal with percentages.
If I misundestood your intention and you're looking to hide one of those div use display: none; on it and double the width of the one you want to show.
try to put this code in your css.
.content::-webkit-scrollbar {
display: none;
}
I have one DIV, which changes height depending on data which a user enters into it. Once they are finished, they click a button and a second DIV appears below it with all the data displayed in a table.
The second DIV is always on the page, but it's opacity is set to 0.
As the first DIV can be anywhere from 100px to 1000px in height, how can I get the second DIV to always display directly below it? Ive been playing around with margins and paddings but I just can't get the second DIV to appear dynamically in the right spot.
Preferably using CSS if thats an option.
Thanks.
You have to make sure that the CSS position property is set to relative in your divs. Something like:
HTML:
<div class="user_input_data"></div>
<div class="results hidden"></div>
CSS:
div.user_input_data
{
position: relative;
}
div.results
{
position: relative;
}
div.hidden
{
display: none;
}
div.block
{
display: block;
}
Then you'd have to remove hidden class and add block class to show your results.
if div is a block (is default) it will show in bottom of first div
<div class="firstDiv"></div>
<div class="secondDiv"></div>
if you want second div overlap first div and move by scrolling you should use CSS position property
.secondDiv{
position:fixed;
right:0;
bottom:0;
}
I have this problem that is driving me mad... I've been struggling with it for hours but can't figure out how to over come it.
I am using jqDock and want to place a toolbar in a "box" in a column. There is quite a lot of code included but you can see a sample here: http://ag.wasen.net/index.php?option=com_content&view=section&id=2&Itemid=17
Look at "Simple File Lister v2.0 #2" in the right hand side column where the toolbar is perfectly place. Then look at the left hand side where the toolbar goes vertical and is completely off track.
These two modules (as they are called in Joomla) is using the exact same code!
The difference between these two modules, the left one and the right is that the left one inherits a lot of CSS from the "div" statements in the left column.
The problem seems to be with the inherited "width" from a previously loaded CSS file. If I look at it in FireBug and remove the declaration for #leftcolumn div {width: 191px;} in FireBug the toolbar on the left is working fine.
I have tried to insert my own "width" on all different DIV's and using "!important" but even if FireBug shows the "#leftcolumn div" as stiked-out it still affects my toolbar DIV.
Regardless of how I have tried to "nullify" the inherited "#leftcolumn div" width it still affects my DIV.
Any clues on how I would be rid of it?
Regards,
Anders
Try the below css - Paste this in you template.css file and try to set the width if required on different selectors.
#main_bg #leftcolumn div.module_menu div div div, #main_bg #leftcolumn div.module div div .jqDocked div {
width: 20px;
}
see below image for output: Open the image in new window so you can see clearly.
Problem 1. You are trying to fit a horizontal Dock that has a maximum expanded width of 263px (7 48x48 icons) into a column that is only 191px wide: the Dock is going to overflow!
Problem 2. The template you are using is setting a specific width of 191px on any div more than 1 level below the div.module child of div#leftcolumn. Additionally, your template is specifiying both width and padding on some elements, which is going to cause cross-browser inconsistency and also makes some of the elements extend beyond the bounds of the column.
Since jqDock does not provide many ids on elements, the rules needed in order to override your template are going to have to be at least as 'specific' as the template's, if not more so.
For example, replace your page's rules for...
.sflpage {...}
.sflmenu {...}
#main_bg #leftcolumn div.module_menu div div div,
#main_bg #leftcolumn div.module div div {...}
with...
/*position the Dock's container, ensuring it's visible, and killing
the padding imposed by the template...*/
#leftcolumn div.module div div div div.sflpage {
padding: 0pt;
position: relative;
top: -20px;
width: auto;
z-index: 9999;
}
/*put the Dock in the center of its container, and give it plenty
of width for a fully-expanded Dock...*/
#leftcolumn div.module div div div div.jqDocked {
left: 50%;
margin-left: -150px;
padding: 0px 0pt;
position: absolute;
top: 0pt;
width: 300px;
}
/*kill the width and padding imposed by the template...*/
#leftcolumn div.module div div div div.jqDocked div {
width: auto;
padding: 0;
}
/*center the dock...*/
#leftcolumn div.module div div div div.jqDocked .jqDockWrap {
margin: 0pt auto;
}
/*use this to set/tweak the label's styling...*/
#leftcolumn div.module div div div div.jqDocked .jqDockLabelText {
}
I would also suggest that you need more horizontal space for the Dock (ie. between the module header and the file list), that your labels need better styling so that are visible and readable.
I have a weird CSS problem. I have a banner that I need to position at the bottom of every page.
To this end I have set body to position: relative; and my banner to position absolute; bottom: 0px;
The problem is my banner positions differently on different pages such as the following:
http://www.plotsandhouses.com/node/1,
http://www.plotsandhouses.com/node/29,
http://www.plotsandhouses.com/node/30
The 'custom-page_closure_wrapper' div is what I am trying to position at the bottom of the pages. I can do this by setting position: fixed; but I don't really want the div visible at all times - only when the bottom of the page is visible or the user scrolls down to see it.
What am I missing?
To add on to Marc's answer, there is a CSS solution to it called the Sticky Footer.
The reason why your footer doesn't "stick" to the bottom of the page is because the height of the container where the footer is absolutely positioned in is not more than the height of the viewport. Therefore, by forcibly stretching the container to the full height, the technique ensures that the footer always stays at the bottom.
You can try adding the following in your CSS file:
body {height:100%;}
#custom-body-wrapper {height:100%;} /*this is the container of your absolute div*/
and removing the position:relative on your body tag.