I have a bizzare issue, I have a DIV that scrolls inside my page... But within that div I have 'header' that is FIXED.... and because my layout is fluid (100%) wide,it is making the "FXED" div cover over the scrollbars of the div below....
What is the best way to fix this? I have attached a simple screenshot of what's going on... hope it helps.
/* BLUE SECTION */
.floatingHeaderBox {
width: 100%;
}
/* RED BOX BELOW */
.contentBoxRight{
position:absolute;
width:80%;
left:20%;
height:100%;
background-color:#FFF;
border-left:1px solid #CCC;
margin-left:-1px;
}
.contentBoxRight{ overflow:auto; overflow-x:hidden; }
i think you can do it like this http://jsfiddle.net/yuliantoadi/bXukG/1/
i don't have your html, so i made it by my self.
If your floatingHeaderBox is inside your scroll box like this:
<div class="contentBoxRight">
<div class="floatingHeaderBox">Hdr</div>
</div>
You can just add a negative left margin to account for scrollbar. since x-overflow is set to hidden, you will not be able to tell that it moved. Add padding or a sub container to get your desired space back on the left side.
.floatingHeaderBox {
width: 100%;
margin-left:-18px;
}
Related
I have two divs, the parent that has rounded corners, overflow:hidden and an inline background image, and a child div that is position:absolute with a background color and opacity.
At my normal screen size, the child DIV pretty much fills the parent DIV, but I can just make out a slight line of the parent DIV on the corners.
The bigger issue is that when I zoom in to the page, at some screen sizes the child DIV is considerably smaller than the parent DIV, which obviously looks awful.
Here is my code:
.parent-div {
height:350px;
border-radius:4px;
overflow:hidden;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:relative;
}
.child-div {
position:absolute;
bottom:0;
left:0;
width:100%;
padding:15px;
text-align:left;
background-color:rgba(255,255,255,0.9);
}
I've googled this but can't find a solution that works. I have tried adding the border radius on the child DIV, but this doesn't work.
FYI - when not using border radius everything seems fine.
EDIT: I think I have kind of found the issue. I have another div around all of these with padding. When I get rid of this it works. When I change the padding size I can see that is causes the issue in the image above at various padding sizes.
EDIT2: Actually, I found that what was causing the issue was the overflow:hidden on the parent div. When removing this and just ensuring I had the border radius on the child div, everything worked as expected.
It's better if you provide a working fiddle, but I think that your problem is the meassure of .child-div. Try this:
.child-div {
box-sizing: border-box; /* here */
border-radius: 4px; /* to apply the same that the parent */
height: 100%; /* to make all height */
position:absolute;
bottom:0;
left:0;
width:100%;
padding:15px;
text-align:left;
background-color:rgba(255,255,255,0.9);
}
I'm busy with creating a website that preferably needs to have a background picture that covers the whole screen but when the visitor scrolls down other content appears.
So far I got this working with creating 2 div's (which I call #container_page1 and #container_page2). This is the css of the first div:
#container_page1 {
background-image:url(images/background.jpg);
background-size: cover;
position:absolute;
margin:0px;
width:100%;
height:100%;
}
This is the css of the second div:
#container_page2 {
background-color: #F00;
height: 2000px;
width: 1000px;
margin-right: auto;
margin-left: auto;
}
The problem is that the content of the second div appears underneath the first div, obviously caused by the fact that the first div is absolute positioned.
Of course I could get the content of the second div to be placed lower with margin or padding but this won't work nicely because of different screen resolutions.
Here you can see what I did so far: http://kmnew.kadushimarketing.com/index.php. You'll also see the "learn more" button that links to an anchor in the second div.
Does anyone has a suggestion to get the second div starting where the first div ends?
Wrap the two divs into one parent div. Then give that parent div an absolute position and position the two inner divs next to each other inside that div.
If you need each section to have it's own special background and be exactly the size of the browser, why do absolute position at all?
Using a style like:
body, html{
width:100%;
height:100%;
margin:0;
padding:0;
}
section{
width:100%;
height:100%;
background-image:url(images/background.jpg);
background-size: cover;
}
Then positioning all your content divs relative, you should be able to maintain browser-sized background and let the sections stack in order.
If you want to control the position of the section contents you could use a structure like:
<section>
<div class="content">
Section content goes here
</div>
</section>
With corresponding CSS:
section .content{
width: 500px;
margin:0 auto;
}
Which would fix the content to a width of 500px and center it on the screen. Hope this helps!
My container div doesnt expand vertically on one of my pages as I add elements. Hence the bottom most div overlaps onto my footer. The divs in the container are horizontal elements relatively positioned
On my home page it works fine container expands and no overlapping using the css below
If I had any hair left it would be pulled out by now!! :-))
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
height: auto !important;
min-height: 100%;
}
Seems to me to little context, because it is possible that the footer is overlapping your container div, which is set to start with a min-height of 100%, it depends on how the footer is defined related to your container div.
...............Demo
Hi now give to body, html height:100%; than give to any class or id height 100%;
as like this
body, html{
height:100%;
}
LIve demo
rule-selector
{
height: 100%;
}
If this doesn't work for you then a more particular rule might disable this rule, so make your rule-selector as particular as possible. If it is still not particular enough, then:
rule-selector
{
height: 100% !important;
}
Try this:
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
overflow:hidden ;
}
Best,
Cynthia
I'm using the jquery modal overlay pretty much out of the box as shown here:
http://flowplayer.org/tools/demos/overlay/index.htm
However, I have a dynamic search box within my overlay and when the contents are long I want to have a vertical scroll bar. So I added overflow:auto; to the CSS like this:
.simple_overlay {
/* must be initially hidden */
display:none;
overflow:auto;
/* place overlay on top of other elements */
z-index:10000;
/* styling */
background-color:#333;
width:675px;
min-height:200px;
max-height:600px;
border:1px solid #666;
/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}
Unfortunately, this automatically adds a horizontal scroll bar because of the close button:
/* close button positioned on upper right corner */
.simple_overlay .close {
background-image:url(../img/overlay/close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
I've played around with a few different options but with no luck. I don't have a huge amount of CSS knowledge unfortunately. If anyone could help me get the overlayed cross but no horizontal scroll bar that would be lovely.
Thank you
Tom
EDIT A friend on twitter helped me fix it. Basically I've just added another div inside the popup and set the scroll on that like this:
HTML:
<div class="simple_overlay" id="asearch">
<div id="searchbox">
<form id="amazonsearch" style='float:left;'>
<input class="title" id="amazon-terms">
<button>Search!</button>
</form>
<div id="amazon-results"></div>
</div><!--seachbox-->
</div><!--Overlay-->
CSS:
#searchbox {
overflow:auto;
width:500px;
min-height:200px;
max-height:500px;
}
Then the close cross is always positioned correctly and doesn't intefere with the scroll since the scroll only applies to the inner div :)
Maybe try overflow-y:auto instead? I'm unsure of level of browser support of that property these days.
Two problems, both caused by IE7
www.myvintagesecret.com
1) I have a Div called .postheader that holds the title and another div called .clip . As you can see, the clip should hover over the content and not push it down. (use any other browser to test). Its currently giving me a huge gap when it should only go as long as the text does.
.postheader {
background:url(images/posthead.png) no-repeat;
min-height:100px;
max-height:600px;
padding-right:25px;
overflow:visible;
}
.clip {
width:214px;
height:275px;
float:right;
position:relative;
}
Any ideas? I can make the max height smaller, but that causes the .clip div to be cut off.
2) In the sidebar, there are a bunch of items called .sidebaritem. They have a background image that is only not showing up in IE7. I can't figure this one out.
.sidebar-item
{
background:url(images/sidebar.png)top center no-repeat;
font-size: 12px;
margin-bottom: 20px;
padding-left: 18px;
padding-right:10px;
padding-top:8px;
min-height:200px;
}
1) Try this. I think using position:absolute instead of float:right will solve the problem.
.postheader {
background:url(images/posthead.png) no-repeat;
position:relative;
}
.clip {
width:214px;
height:275px;
position:absolute;
top:0;
right:25px;
}
2) Hmm.. It could be the space after closing ).
background:url(images/sidebar.png) top center no-repeat;
3) Response to comment: In that case... You should redo the background. Create wrappers with backgrounds only and put your content inside. Clip should be the top div inside wrapper and float to right. Do something like...
<div class="itemTopBg"><div class="itemBottomBg"><div class="itemLeftBg"><div class="itemRightBg">
<div class="clip">...</div>
... content with no bg... just text...
</div></div></div></div>
I think I solved 1) with these changes
.clip drop float right, change position to absolute, and give it a right of 0.
.postheader add position relative
.postheader h2 width of around 400px
Seemed to work in IE7 and firefox, not sure how it looked in other browsers though.