I have a div which scrolls horizontally hooked to some buttons with jQuery. That is working fine, the problem is i have a nested div in the scrollable content which becomes clipped as it overlaps the container. I need overflow on the x axis but not on the y.
overflow-x: hidden, overflow-y visible should solve this, but doesn't. I does work if i remove the overflow, but i need the overflow-x to scroll the div.
Simplified html / css below - without scrolling logic as that is not what is problematic here.. should be easy?
Thanks a million :) Andy
<!DOCTYPE html>
<html>
<head>
<title>TestDiv</title>
</head>
<body>
<div style="width:100%; height:150px; border:1px solid blue">
TOP DIV
</div>
<div class="slide" style="height:150px; width:800px; border: 1px solid blue; background-color: pink;">
<div style="border: 1px solid blue; width:1200px; height:150px;" class="inner" id="slider">
<table cellspacing="0" cellpadding="0" border="2" style="table-layout:fixed; width: 1200px; height:150px">
<tr><td>AAAAAAAAA</td><td>BBBBBBBBB</td><td><div class="container"><div class="testDiv">XXX</div></div>CCCCCCCCC</td><td>DDDDDDDDDD</td><td>EEEEEEEEEE</td><td>FFFFFFFFF</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td></tr>
</table>
</div>
</div>
<div style="width:100%; height:150px; border:1px solid green;">
BOTTOM
</div>
</body>
</html>
<style scoped="scoped">
.slide
{
position:relative;
overflow-x: hidden;
overflow-y:visible;
}
.slide .inner
{
overflow-y:visible;
position:absolute;
left:0;
bottom:0;
padding:0px;
}
.container
{
width: 20px;
height: 20px;
background-color: black;
position: relative;
}
.testDiv
{
width: 235px;
position: absolute;
z-index: 999;
left:20px;
top: -180px;
height: 200px;
background-color: greenyellow;
}
</style>
The issue is that you are using "fixed" positioning. This will only work with "relative" positioning. To convert to relative positioning, you need to remember that the Top location is relative to the previous sibling element, whereas left is relative to the parent element.
Related
I'd like to have a child div which top is only visible for 10 pixels at the bottom of a parent div (with the rest of it outside the parent div). How can I do that?
Edit: I had not considered the CSS calc function, as suggested by Temani Afif. So here is my CSS. However the child is at the top of its parent. I must be missing something.
.parent_div {
position:relative;
width: 200px;
height: 200px;
border: 1px solid #000000;
}
.child_div {
position:absolute;
top: calc(100%-10px);
left: 25%;
width:50px;
height:50px;
border: 1px solid #dbdde3;
background-color: #ff0000;
}
.parent{
border:1px solid red;
width:100px;
height:100px;
background-color:red;
position:relative;
}
.child{
position:absolute;
top:calc(100% - 10px);
border:1px solid green;
width:50px;
height:50px;
background-color:green;
}
<html>
<head>
</head>
<body>
<div class="parent">
<p>
parent div
</p>
<div class="child">
<p>
child div
</p>
</div>
</div>
</body>
</html>
Just wondering if this is possible for css, i am try to have a layout where left hand column have a fixed width and right hand side have a flex width within a contain of fixed width.
here is the attachment for image
Thanks for any suggestion.
Check if this can help you
HTML
<div class="outer">
<div class="left">Test</div>
<div class="right">Test</div>
</div>
CSS
*{margin: 0}
.outer {
max-width: 1444px;
}
.left {
float: left;
width: 200px;
height: 600px;
background: red
}
.right {
margin-left: 200px;
background: yellow;
height: 600px;
}
You can do it with a table for sure. Not sure if anyone has a better/alternate method.
<html>
<head>
<style>
.container { width:400px; }
.left { width:100px; background-color:red;}
.right { width:100%; background-color:yellow;}
</style>
</head>
<body>
<table class="container">
<tr>
<td class="left">left section</td>
<td class="right">right section</td>
</tr>
</table>
</body>
</html>
You can achieve it by using the following code. Basically we are floating the left side div with fixed width and letting the right side div take up the rest.
HTML:
<div class='container'>
<div class='fixed-left'>abcd</div>
<div class='flexible'>12345</div>
</div>
CSS:
.container{
border: 1px solid black;
max-width: 440px;
}
.fixed-left{
float: left;
width: 200px;
border: 1px solid blue;
}
.flexible{
border: 1px solid red;
width: 100%;
}
Demo|Demo without Margin
You could use float for that:
HTML:
<div class="left-div">This is left DIV with lots of text text text text<br />and even more text</div>
<div class="right-div">
<div class="upper">This is upper right DIV</div>
<div class="lower">This is lower right DIV</div>
</div>
CSS:
.left-div {
width: 200px;
float: left;
}
.right-div {
float: right;
}
.upper {
max-width: 100%;
}
.lower {
max-width: 1444px;
}
Fiddle: http://jsfiddle.net/68u8N/
First, check out a working example of the layout I have:
http://jsfiddle.net/EPC8c/2/
What I'm trying to do is adding a top margin to this. Since I have most of this built on 100% height, things get a little weird when trying this: http://jsfiddle.net/EPC8c/1/ (fixed link)
The fluid layout now leaves the footer being pushed down past 0 or 100% of the page. This is probably working as intended, but I'm trying to find a solution to not cause this.
Any help with this would be amazing.
HTML
<div id="container">
<header></header>
<div id="content"></div>
<footer></footer>
</div>
CSS
html, body {
background: #ff3333;
margin:0;
padding:0;
height:100%;
}
#container {
position:relative;
background: #FFF;
margin: 0 auto;
width: 200px;
min-height:100%;
}
header {
height: 60px;
background: #888;
}
#content {
background: #FFF;
min-height: 200px;
padding-bottom: 60px; /*FOOTER HEIGHT*/
}
footer {
position:absolute;
bottom: 0;
width: 200px;
height: 60px;
background: blue;
}
Here's a solution, courtesy of this question: CSS 100% height with padding/margin
JSFiddle:
http://jsfiddle.net/EPC8c/5/
HTML:
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}
It's admittedly not the best solution and it relies on percentage margins, but one route would be to wrap it all in an absolutely positioned div with a percentage upper padding and a negative (equal) percentage bottom padding. Like this:
http://jsfiddle.net/EPC8c/3/
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
position: absolute;
width: 100%;
height: 90%;
padding-top: 10%;
padding-bottom: -10%;
}
I need to define a div which must stay with the top at the normal position, which differs from the top of the surrounding element:
position:relative
top:0
and which grows in the height up to the size of the surrounding element:
position:absolute
bottom:0
I have no idea how to combine the both. Whenever I use a relative box I loose the absolute bottom and whenever I use an absolute box I loose the relative top.
Can anybody help me how to do this in CSS?
Here is an example:
<html>
<head>
</head>
<style type="text/css">
#media screen {
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#head {
background-color: gray;
}
#rel {
background-color: green;
position: relative;
top: 0;
bottom: 0;
float: left;
}
#abs {
background-color: red;
position: absolute;
top: 0;
bottom: 0;
float: left;
}
}
</style>
<body>
<div id="head">
<h1>Head</h1>
</div>
<div id="abs">
<h2>absolute</h2>
</div>
<div id="rel">
<h2>relative</h2>
</div>
</body>
</html>
"relative" does not grow at all and "absolute" grows too much.
div {
top:0;
height:100%; /* height calculated based off the height of parent element */
margin:0;
}
height property CSS
Use display:table on the outer div and display table-row on the inner ones:
See this fiddle: http://jsfiddle.net/JKQ2y/15/
Html:
<div class="outer">
<div class="rel">
<div class="m b">text</div>
</div>
<div class="inner">
<div class="m r"></div>
</div>
</div>
Css:
.outer{
border:1px solid black;
height:100px; width: 100px
display:table;
}
.rel {
height:30px;
display:table-row;
}
.inner {
border: 1px solid red;
position:relative;
display:table-cell;
}
.m {height:100%;}
.m.b {border:1px solid blue;}
.m.r {border:1px solid red;}
HTML:
<div class="body">
<div class="head">
<div class="head-content">text</div>
</div>
<div class="growing-area">
</div>
</div>
CSS:
.body{
height:100px; width: 100px;
display:table;
}
.head {
height:0px;
display:table-row;
}
.growing-area {
position:relative;
display:table-cell;
}
defining a small height of the head is important but the real size is then controlled by the content or you can define the head-content height:
.head-content {
height:30px;
}
Fiddle: http://jsfiddle.net/JKQ2y/36/
I am writing some css code for a school website that looks like this
body{
background:#000099 url('repeat.png') repeat-x;
margin-bottom:50px;
}
div.wsite-theme{
background-color:#FFFFFF;
border-top:5px solid #AAAAAA;
}
div.wsite-header{
background:#DDDDDD;
border-radius:5px;
}
#wrapper {
width:960px;
margin:0pt auto;
}
#content{
width:850px;
min-height:694px;
position:absolute;
left:98px;
top:150px;
}
#content-main{
width:100%;
min-height:594px;
position:absolute;
top:0px;
}
#navigation{
min-height:1px;
position:absolute;
left:98px;
top:90px;
line-height:2px;
padding:10px 10px;
width:850px;
}
#header{
width:850px;
height:150px;
position:absolute;
top:5px;
left:98px;
}
#footer{
width:100%;
height:100px;
background:#DDDDDD;
position:absolute;
bottom:0px;
border-top:5px solid #AAAAAA;
}
with html that looks like this:
<html>
<head>
<title>{title}</title>
<link rel="stylesheet" type="text/css" href="main-style.css" />
</head>
<body>
<div id="wrapper">
<div id="header" class="wsite-header">
<h1 class="title1">{title}</h1>
</div>
<div id="navigation">
{menu}
</div>
<div id="content">
<div id="content-main" class="wsite-theme">
{content}
</div>
<div id="footer">
{footer}
</div>
</div>
</div>
</body>
</html>
(ignore content in curly bracers. it for the website editor our school makes us use)
So when i go on my page and type in the content it re-sizes and goes behind the footer . However what i intend for it to do is push the footer down as it re-sizes to fit the content. Earlier it was behaving this way, so what am i doing wrong?
EDIT: i guess i wasn't clear enough at first,i want the parent #content div to resize with the content main div so the footer is pushed down
Why are you using absolute position at all? Remove all of the position: absolute from all of your DIVs they are not necessary. Position them using margins instead and you will not have a problem with the DIVs changing size.
As Mathew mentioned, when you use the position: absolute property, it takes that element out of the flow of the document so it will not affect the elements around it. All of your DIVs are in the order you want them displayed, there is no need for absolute positioning on any of them.
Just took out the positioning and messed with the padding of the wrapper to get the same thing you are trying - http://jsfiddle.net/n3Xqx/
Don't use position: absolute;, it takes things out of the regular document flow.
EDIT: If you need to give more vertical spacing between the header/footer/content areas, then use margin
Add position relative to the wrapper.
Replace position absolute to relative for content and footer.
#wrapper {
width: 960px;
margin: 0pt auto;
position: relative;
}
#content {
width: 850px;
min-height: 694px;
left: 98px;
top: 150px;
position: relative;
}
#content-main {
width: 100%;
min-height: 594px;
position: relative;
top: 0px;
}
#footer {
width: 100%;
height: 100px;
background: #DDDDDD;
bottom: 0px;
border-top: 5px solid #AAAAAA;
position: relative;
}