is it possible to make the 'width' from a child DIV larger than the 'width' from the parent DIV... (with css only)
Please see the following example for more details:
http://jsfiddle.net/6UFs4/
<div id="main">
<div id="sidebar">DIV1
<div id="sidebar_2">DIV1 Sub</div>
</div>
<div id="page-wrap">DIV2</div>
</div>
#main
{
display: block;
width: 100%;
}
#sidebar
{
background-color: Aqua;
float: left;
width: 80%;
}
#sidebar_2
{
background-color: Lime;
}
#page-wrap
{
background-color: Gray;
}
The size from DIV1 Sub should be 100% from browser window and not limited from parent DIV. I tried using overflow: visible but it´s not working...
Any ideas? Thanks in advance.
You can use position:absolute and width:100%; to meet your requirements but you have to be careful about position of your element(x and y axis with respect to page) inorder to show your image at desired location
See the example:
http://jsfiddle.net/6UFs4/2/
Yes you can by changing its positioning.
jsFiddle
#sidebar_2
{
background-color: Lime;
position:absolute;
left:0;
right:0;
}
Just add this css to your child div:
#sidebar_2 {
position:absolute;
left:0;
right:0;
}
Demo: http://jsfiddle.net/6UFs4/4/
Related
I have the following problem:
I have a father-div, that's position is "relative". Inside this div I have 2 son-div's. The first son-div should be positioned relative to the father-div. But the second son-div should be positioned to the whole browser-window.
My HTML and CSS:
#father
{
position:relative;
}
#son1
{
position:absolute;
left:0;
top:0;
}
#son2
{
position:absolute;
left:670;
top:140;
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
My problem now is, that the son2-div is also positioned relative to the father-div.
Is there any possibility to tell the son2-div, that it should inerhit the "position:relative" of the father and make left and top absolutely absolute to the whole window?
My problem is: I should change this inside a very big, complex HTML-structure, so it's not possible for me to change the HTML-structure.
First change
#son2
{
position:absolute;
left:670;
top:140;
}
to
#son2
{
position: fixed; /*change to fixed*/
left:670px; /*add px units*/
top:140px; /*add px units*/
}
Result:
#father
{
position:relative;
margin: 40px auto;
width:200px;
height: 200px;
background: red
}
#son1
{
position: absolute;
left:0;
top:0;
width:20px;
height: 20px;
background: black
}
#son2
{
position:fixed;
left:70px;
top:140px;
width:200px;
height: 200px;
background: green
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
This is unfortunately not possible without changing the HTML structure. An absolute positioned div will always position itself according to its first relative positioned parent.
What you could possibly do however, is change your #father element's width/height so you can still position your #son2 element correctly. This really depends on your layout and how far you can edit the #father element without destroying the layout. Or if possible, change your CSS so you do not need position: absolute; on #son1 (after which you can remove the position: relative; from your #parent).
You should keep your 2nd son div outside of your father div.
#father
{
background-color: blue;
width: 200px;
height: 200px;
}
#son1
{
position:relative;
left:0;
top:0;
background-color: red;
width: 50px;
height: 50px;
}
#son2
{
position:absolute;
left:670px;
top:140px;
background-color: yellow;
width: 50px;
height: 50px;
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
Don't need to use position: relative; for parent div
son1 should be position: relative; for your aim.
I highly suggest use background-color and width , height to see the position of div on your page.
Also there is a simple mistake in your code:
left:670;
top:140;
You should specify the measurement unit;
left:670px;
top:140px;
Your div#son1 is already positioned to div#father by default (static position). You don't need to set any positions to them.
#father
{
/* don't set position. it's static by default */
}
#son1
{
/* don't set position. It's positioned to #father by default */
left:0;
top:0;
}
#son2
{
position:absolute;
left:670;
top:140;
}
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
Also, if you want your div#son2 to be positioned to the window (user visible area), but not the root element (body), you should set div#son2 to fixed
See this video for more details about fixed position.
https://www.youtube.com/watch?v=nGN5CohGVTI
We are currently struggling trying to break out of an div having overflow hidden.
We have a dropdown-menu that gets filled with suggestions when the user type (type 'c' in the search field to see). This dropdown-menu is currently hidden behind the menubar, because it has "overflow hidden".
We can break out, if we remove the top:100% and set position to fixed. But we would like it to stay absolute (i.e. for mobile devices).
Created an example here: https://edukarma.com/bootstrap/
The dropdown suggestion list can be found in .headerItem.headerSearch .searchField .twitter-typeahead .tt-dropdown-menu.
I ran into this issue and it can be quite frustrating. However after reading this article, I found the suggested answer to be quite satisfying.
Essentially, You must specify an outer parent (add a 'grandparent' tag) to be explicitly position:relative; (with overflow unspecified) and the direct parent to be overflow:hidden; instead of having both of these CSS options directly applied on the same direct parent.
The examples provided (for completeness and in case the 2012 article is lost):
Not working
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
position:relative;
overflow:hidden;
}
.child {
position:absolute;
top:-10px;
left:-5px;
}
Working! (The Child is free to roam anywhere)
HTML
<div class="grand-parent">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.grand-parent {
position:relative;
}
.parent {
overflow:hidden;
}
.child {
position:absolute;
top:-10px;
left:-5px;
}
A possible workaround is to replace overflow:hidden with the following:
.navbar .headerItem.headerSearch {
display: table; /* like overflow, creates new block formatting context */
margin-left: 180px;
padding-right: 15px;
margin-top: 11px;
}
.navbar .headerItem.headerSearch:after {
/* hack to make the table use all available width */
content: '. .';
/* with such big spacing, the 2nd dot will always wrap to the new line,
making the table-like block use the width of the container
instead of shrinking to content */
word-spacing: 99in;
/* make this helper invisible */
display: block;
height: 0;
overflow: hidden;
}
You can do this by setting the child to be position: absolute.
HTML
<section>
Parent
<div>Child</div>
</section>
CSS
section {
width: 300px;
height: 300px;
background: dodgerblue;
overflow: hidden; /* BOOM */
}
section div {
position: absolute; /* BOOM */
left: 100px;
width: 100px;
height: 400px;
background: gold;
}
Demo: http://jsbin.com/nukic/2/edit
Okay so this is quite hard to explain but basically I position the title div perfectly so that it is centered in the header div.
It remains in this position on some computers.
However, on other computers it jumps further down the page - even with the same positioning attributes. (This is tested on the same web browser.)
I have tried with absolute, relative etc. positioning, still no luck!
Note: This div contains text.
CSS:
#header {
position:relative;
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
}
#title {
position: relative;
top: -20px;
left: 315px;
}
Thanks!
Hi is difficult to understand exactly your issue but I can give you a few tips to have a nice center vertical and horizontal:
For horizontal alignment you can use display:inline-block if you want all the div centered:
#header {
text-align:center;
}
#title {
display:inline-block;
}
For vertical align use line-height equal to the total height
#header {
line-height:170px;
}
This only work for one line text if you want another option tell me
And the demo here http://jsfiddle.net/8JLzy/7/
Edit
To work with a text of more than one line you can do this : First your html add a wrapper inside #title:
<div id="header">
<div id="title">
<div class="center">Your Title</div>
</div>
</div>
And on the CSS work with display property:
#title {
display:table;
height:100%;
margin:auto; /*Make the horizontal*/
}
#title .center {
display:table-cell;
vertical-align:middle;/*Make the Vertical*/
}
New demo http://jsfiddle.net/8JLzy/16/
use line-height, not position:relative
#header {
/*position:relative;*/
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
font-size:1em;
}
#title {
line-height:0.5em; /* for example, or instead use padding-top: */
padding-left: 315px;
}
One for the CSS gurus - is it possible for a div to 'escape' the constrained in the boundaries of a div with fixed dimensions and overflow:hidden?
Ive recreated the example here: http://jsfiddle.net/Wt3q4/1/
Ive tried setting z-indexes on all the elements, and assigning the div with class b position:absolute with no joy.
Since .b is nested with an element that's position:relative;, setting .b to absolute won't do anything. That I know of, with the element structure you have defined, there isn't going to be a CSS work around.
Without knowing more about your layout and what you're trying to accomplish, it's difficult to advise. You could try setting up a "double container" if that makes sense, and use a jQuery function to move the element out of the overflow:hidden; element when you want to show it.
http://jsfiddle.net/Wt3q4/3/
HTML
<div class="a">
<div class="b">
<div class="c">
</div>
</div>
</div>
<div id="show" class="button">Show!</div>
<div id="hide" class="button">Hide!</div>
CSS
.a{
position:relative;
height:200px;
width:200px;
border:3px solid #f00;
background:#ccc;
}
.b{
position:relative;
height:200px;
width:200px;
background:#ccc;
overflow: hidden;
}
.c{
width:50px;
height:300px;
border:3px solid #00f;
background:#dad;
margin:30px;
position:absolute;
z-index:333;
}
.hidden{
display: none;
}
.button {
width: 50px;
padding: 5px;
text-align: center;
border: 3px solid #aaa;
background: #ddd;
margin: 20px;
float: right;
}
jQuery
$('#show').on('click', function(){
$('.c').prependTo('.a');
$('.b').addClass('hidden');
});
$('#hide').on('click', function(){
$('.c').prependTo('.b');
$('.b').removeClass('hidden');
});
Based on my understanding of CSS's block formatting context, your div.b is a child of div.a, which means that div.a sets the block formatting context for div.b. Once you set overflow: hidden on the parent element, any child content that flows out of the parent content box will not be visible.
This is more apparent if you set outline: 1px solid black on the parent container so that you can see the extend of the content box, both with overflow hidden and visible.
Your question does touch on the essentials of CSS's visual formatting model.
How about something like:
.menu > li > ul {
position: absolute; /* you still need this here */
background-color: #9F26B4;
width: 10000000000000000px;
margin-left: -100000px;
padding-left: 100000px;
list-style: none;
z-index: 1000;
top: 0;
left: 0;
}
This, for example, overflows the entire page from left to right (assuming that the body overflow-x is set to hidden) and then set element width to enormous width, margin it to negative left to fill any left content, and padding to the left to move object inside the element to desirable X position. What you think?
I've seen a few questions like this in my search, but either the question didn't get answered properly or no answer was given. So, I'll ask again.
<style>
.parent { overflow-y:scroll; overflow-x:visible; width:100px; }
.child { position:relative; }
.child-menu { position:absolute; top:0px; left:-100px; display:inline-block; }
</style>
<div class="parent">
<!-- Lots of the following divs -->
<div class="child">
Text Line
<div class="child-menu">some pop out stuff</div>
</div>
</div>
Alright, that's just an example. But basically, what I'm trying to accomplish is have the .child classes be scrollable on the y axis...scroll up and down. But I want the x-axis....the child-menu's to be visible outside the .parent container.
Does that make sense? So what is happening is that when the page renders, the browser is interpreting the overflow as auto altogether and not respecting the separate axis. Am I doing something wrong or are the browsers just not up to CSS3 spec yet on this? Mostly only tested on Chrome.
I figured it out!
The parent should be overflow:auto;
The .child should be position:relative;
The .child-menu should be position:fixed; with NO top or left positioning.
If you do this, it will keep it it inline with the content.
If you need to move the child-menu use margins and not top or left. Example margin-left:-100px;
EDIT
As it seems people still use this, please note that you will have to use javascript to move the fixed items as the page scrolls.
It solved here!
They use css and JS.
.child:hover .child-menu { display: block; }
.parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px }
.child { position:static; }
.child-menu { position:absolute; display:inline-block; display: none; }
https://css-tricks.com/popping-hidden-overflow/
https://jsfiddle.net/68fBE/2/
.parent {
overflow-y: auto;
width: 100px;
}
.child-menu {
display: block;
position: fixed;
top: auto;
left: auto;
}