I don't know if this is possible with only html and css, but I have an absolute div inside a relative container and want to have a regular div under the container.
HTML:
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
CSS:
#container{
position:relative;
overflow:auto;
}
#content{
position:absolute;
width:955px;
z-index:1000;
}
The goal is to prevent the "content" div from overlapping into the footer. It worked with overflow:auto, but I got another vertical scrollbar appearing for the container div.
Any other ways to get around this?
So, how about hiding only vertical scrollbar:
#container {
position: relative;
overflow: auto;
overflow-y: hidden;
}
?
If you're looking for something more fancy to hide scrollbars then you could use JavaScript mousescroll event to do it.
http://viralpatel.net/blogs/2009/08/javascript-mouse-scroll-event-down-example.html
Or you could use some jquery plugin to handle scrollbars, there are plenty of them, jScrollpane, Scrollable...
It is possible to do this with only HTML and CSS. You may find the setup of the HTML and CSS code from http://www.cssstickyfooter.com/ useful since it is using the same layout as your code and it trying to achieve a similar goal.
I have combined the code used to create a sticky footer with your code in the Fiddle below:
http://jsfiddle.net/bPybY/1/
You'll have to change the layout differently since element with absolute position doesn't have a layout space. Like this:
<html>
<head>
<style>
#container{
position:relative;
}
#absoluteContent{
position:absolute;
width:955px;
z-index:1000;
}
</style>
</head>
<body>
<div id="container">
<div id="absoluteContent">
<div id="content">content
</div>
<div id="footer">footer
</div>
</div>
</div>
</body>
</html>
Related
This problem is related to how i can show div with absolute position regarding the div, Not the page.
I have div#Div_Report, Which has multiple page div#page1, div#page2,..., And each page div has content with same css.
My problem is if i give absolute position to page's div.Div_ClientName, Then div#page2 data is overlapping to div#page1.
I know this can easily fix by relative position, But due to some reason i cant use relative position.
So how we can set page content with in page div with absolute position?
Here is my HTML:-
<div id="Div_Report">
<div id="page1">
<div class="Div_ClientName">Childrens Network - Hendry Glades</div>
</div>
<div id="page2">
<div class="Div_ClientName">Childrens Network - Hendry Glades</div>
</div>
</div>
CSS:-
.Div_ClientName{
top:180px;
}
.Div_ClientName{
position:absolute;
}
.Div_ClientName{
left: 175px;
}
#page2{
margin-top:200px
}
Fiddle Link
Try this CSS:
#page1, #page2 {
position:relative;
float:left;
}
... it isn’t, by any means, a nice solution ... but it solves the problem with things overlapping.
How to dynamically change width of Div1 inside a scrollable Div2 to Div2's width.
Check this Jsfiddle http://jsfiddle.net/xdKrF/34/
You will see that the green background stops at 1 point(at default width size).
I would like to make the div with the green background expand to the whole scrollable div.
Important requirement, TEXT must never be altered and must stay in 1 line.
Does anyone have a simple solution to this?
Complex/hacky solution I can think of is scrollable will have 1000% width and when its not scrollable it would be default/100%. Using #media.
HTML
<div id="container" style="overflow:auto">
<div id="content">
Well hello
</div>
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
CSS
#content{
white-space:nowrap;
background:green;
}
OK, I have found a solution.
Wrap a container and apply float:left; for it.
http://jsfiddle.net/2ugbkb6r/
May be there is will be better answer, but it's working. Just add display:table; to #container http://jsfiddle.net/xdKrF/36/
Here is the code: (
JS Fiddle)
#content{
white-space:nowrap;
background:green;
}
#container {
margin: 0 auto;
width: 90%;
overflow: auto;
word-wrap: break-word;
}
<div id="container">
<div id="content">
Well hello
</div>
<p>
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
</p>
</div>
I am currently learning polymer and encountered the following problem:
I'd like to have a split layout where the left side is a list of items and the right side can display additional information about the selected item.
I tried to achieve this with the following (simplified) code:
<body fullbleed vertical layout>
<style type="text/css">
.card_container {
margin: 16px;
position: relative;
}
.details_container {
/* position: fixed;
*/ }
.white-bg {
background-color: white;
margin: 8px;
max-width: 650px;
}
.white-bg.details {
margin: 24px 24px;
}
</style>
<div layout horizontal center-justified>
<div id="card_container" class="card_container" layout vertical>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
</div>
<div class="details_container" layout vertical flex>
<div class="white-bg details" flex relative>
<p>Some sample text...</p>
</div>
</div>
</div>
</body>
The layout looks quite nice, until I assign position: fixed to the details_container div.
I created a JSBin that demonstrates the problem: http://jsbin.com/ziqayufojeco/2/edit?html,output
Just uncomment the position: fixed; attribute.
Any ideas how to fix that?
I don't actually know what the specifications say, but I'm not surprised that you cannot use flex in combination with position: fixed.
The flex attribute (which is shorthand for CSS flex properties) tells CSS how to position and size a element relative to it's sibling elements. OTOH, position: fixed tells CSS that you want the element to be very specifically positioned.
I can understand that you would like the calculated size to be the same regardless of position: fixed, but it doesn't work that way. I'd like to suggest an alternative, but I can't figure out what outcome you were after.
I dont know why postion: fixed is not working in polymer starter app element.
But to adding fixed element functinality you can use postion: sticky with display:flex
I want to make a simple two column layout, where the right column is out of the container but still makes the container height expand.By using position:absolute it goes were it should but dosent expand.
This is the html code
// Note: I dont add the head tag to save space in here :)
<html>
<body>
<div id="container">
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
</html>
And the css code
#container {
width:900px;
margin:0 auto;
}
#left {
width:700px;
float:left;}
#right{
width:230px;
margin-left:760px;
position:absolute;
}
I cant use float:right, because it will floated to the right of the container. Maybe the structure has to be different I dont know.
Try setting a position: relative on #right, and giving it a margin-left greater than the width of the container: http://jsfiddle.net/8MEqL/
This seems incredibly simple but I have no idea why I can't put a div tag inside of a container div tag as it will not show up in Firefox or Chrome properly, but it works in IE6...??? Code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
</div>
</body>
</html>
CSS: style.css
body {
background:white;
font-family: sans-serif;
}
#container {
margin:0 auto;
width:960px;
background:#e3e3e3;
border:1px solid black;
}
#nav {
padding:10px;
margin-top:10px;
float:left;
width: 400px;
height:100px;
background:white;
border:1 px solid black;
}
It's as if the container is not expanding with the DIV tag inside of it..what gives?
This is a common issue people face with CSS. Whenever you float something, it's parent collapses as you are seeing. You can work around it in the following ways:
set an explicit height on the container
put overflow:hidden or overflow:auto on the container
use the clearfix hack: http://nicolasgallagher.com/micro-clearfix-hack/
I find #2 to be the easiest and best in most cases. Use #3 when overflow:hidden/auto has an undesirable side effect.
It is because the #nav div is floated left. Floated elements are just that--floating, and have no height unless something anchors the box below it by clearing the floats.
.clear { clear: both }
and add a div below the floating div to clear it.
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
<div class="clear"></div>
</div>
See this SO question for a very detailed answer on clearfixes: What methods of ‘clearfix’ can I use?
Do overflow: hidden for #container.
This is one known limitation of floating.
Before: http://jsfiddle.net/N669N/
After: http://jsfiddle.net/N669N/1/