I would like to have a child div extend to be the same width as it's parent's parent. So with HTML structure like this:
<div class="pp">
<div class="p">
<p>
Some text
</p>
<div class="c">
This is the thingy!
</div>
<p>
Some more text
</p>
</div>
</div>
I would like div.c to extend to the borders of div.pp.
I know this is possible with negative margins, but in my situation I am not aware of the margins of div.pp beforehand. I'm aware I could write some JavaScript to do this, but I am interested in a CSS only solution. I'm also aware that changing the structure of the HTML could solve this problem, however that is also not an option.
Here is fiddle illustrating the HTML and some helpful CSS:
https://jsfiddle.net/y37mLkzu/1/
There is an example there of fixing this with negative margins.
I am not sure if this will work in your situation, but it is the only other way without using a fixed minus margin and only using pure CSS. I have added :before and :after to .c and absolute positioned them at either side of the .c element. I have also added overflow hidden to the .pp wrapper to cut off the excess absolute positioned elements.
p {
margin:0;
}
.pp {
padding: 0 6px 0 6px;
width: 100px;
background-color: black;
overflow: hidden;
}
.p {
background-color:white;
}
.c {
background-color:red;
position: relative;
}
.c:before, .c:after {
content:"";
position: absolute;
top:0;
background: red;
height:100%;
width:100%;
}
.c:before {
left:-100%;
}
.c:after {
right:-100%;
}
<div class="pp">
<div class="p">
<p>
Some text
</p>
<div class="c">
This is the thingy!
</div>
<p>
Some more text
</p>
</div>
</div>
Cant you use positions? Just curious to know. If I use position:absolute, it will work.
Related
I'm planning to create a layout where one of the DIV is fixed using Bootstrap. However, the DIV is creating an undesirable effect.
JSFIDDLE: http://jsfiddle.net/cstoq3ec/
Here's the HTML
<div class="container">
<div class="row">
<div class="col-6">
<div class="simple">
This is just a plain block
</div>
</div>
<div class="col-6">
<div class="simple">
This is just a plain block
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="fixed">
hey
</div>
</div>
<div class="col-6">
<p class="scroll">
This is the scrollable section.
</p>
</div>
</div>
</div>
CSS:
.fixed {
position: fixed;
width: 100%;
background-color: red;
color: #fff;
box-sizing: border-box;
}
.scroll {
height: 1000px;
background-color: grey;
color: #fff;
}
.simple {
background-color: grey;
color: #fff;
margin: 15px 0;
}
Notice how the red color DIV is extended all the way to the right side! I want it to stay within its DIV. How should I proceed?
You can't. that's why you have position:absolute.
Once you use position:fixed on an element you get it completely out of the HTML flow so it does not matter what their parents are and their size. You used width:100%so it's 100% of window width.
Is you wonder why, then, it is affected by parent padding (left and top margin), it is because you haven't set any "left, top, bottom or right value" and modern browsers automatically set the values based on the parent. use your own value to check as you can see here: FIDDLE
.fixed {
position: fixed;
width: 100%;
background-color: red;
color: #fff;
box-sizing: border-box;
top:0;
left:0;
}
which, btw, in my opinion you should never rely on as You may have unexpected problems in some browsers. Once you use absolute or fixed position is highly recomend to set at least "top and left values".
If You need the fixed element same width as Your parent I would use javascript / Jquery so you calculate the width of the parent and then use the value to your fixed element.
I'm designing a web page with a small label off to the right of the body on some lines. For this, I created an absolute-positioned <div> inside of a relative-positioned one.
The label is appearing exactly as I want it. However, even though the absolute-positioned <div> dimensions are 0 x 0, it still is taking up some room on the line.
This can be seen at http://jsfiddle.net/sznH2/. I would like the two buttons to line up vertically. Instead, the button next to the label is pushed left a few pixels.
Can anyone see what is causing this spacing and how to eliminate it?
HTML:
<div>
<div class="pull-right">
<button>Hello world!</button>
</div>
</div>
<div>
<div class="pull-right">
<button>Hello world!</button>
<div class="outer-relative">
<div class="inner-relative">
<span>XXX</span>
</div>
</div>
</div>
</div>
CSS:
body {
width: 500px;
margin-left: auto;
margin-right: auto;
}
.pull-right {
text-align: right;
}
.outer-relative {
display:inline-block;
position:relative;
height: 0px;
width:0px;
}
.inner-relative {
position: absolute;
left: 0px;
top: -15px;
background-color: Lime;
}
Inline block elements will render the spacing between the tags. Check this out: http://jsfiddle.net/sznH2/4/
<button>Hello world!</button><div class="outer-relative"><div class="inner-relative"><span>XXX</span>
Remove the spaces and you're good to go
I think You Need to make pull-right postiton:relative
and outer-relative absolute
http://jsfiddle.net/tousif123/sznH2/3/
is this what are you looking for?
.pull-right {
position:relative;
}
.outer-relative {
position:absolute;
}
HTML
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="outside"></div>
</div>
CSS
.wrapper { width: 960px; margin: 0 auto; position: relative; }
.image { float: left; }
.outside { position: absolute; top: 0; left: -20px; }
I want .outside to extend outside the .wrapper, however there are two problems: as is, .wrapper does not extend down to accommodate for the floated .image; setting .wrapper to overflow: auto fixes the height issue, but hides the absolutely positioned .outside. How can I get both the height to stretch automatically and not have the absolutely positioned element be cut off?
EDIT: my wrapper is set to relative, sorry - forgot to add that. For further clarification, here are some crappy diagrams:
EDIT 2: I got it to work by adding a wrapper around the image and copy and setting it to overflow: auto. I wanted to avoid unnecessary markup, but oh well... Thanks everyone!
You just need to clear your float.
Add another empty div like:
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="outside"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear: both; }
Float the wrapper (add float: left to the css for .wrapper), or put <BR style="clear: both;"> after the floated image.
Put the absolute div outside the wrapper, rather than inside it.
But why are you doing position absolute? I bet you don't need to do that, and if you gave more info on what you are trying to do there might be an alternative.
Position absolute will position it absolutely to the body unless its parent has a position other than static. If you want it positioned absolutely to the parent (.wrapper), you need to give .wrapper a position such as position:relative;
Then, add a div to clear your floats:
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="clear"></div>
<div class="outside"></div>
</div>
CSS:
.wrapper {
background-color:red;
width: 200px;
margin: 0 auto;
position:relative;
}
.clear {
clear:both;
}
.image {
float: left;
}
.outside {
background-color:yellow;
position: absolute;
top: 0;
left: -20px;
width:100px;
height:20px;
}
Demo: http://jsfiddle.net/AlienWebguy/6Fmy2/
Resolved by adding an additional wrapper with overflow: auto around .image and .copy.
<div id="parent" style="overflow:hidden; position:relative;">
<div id="child" style="position:absolute;">
</div>
</div>
I need to show child element which is bigger than it's parent element, but without removing overflow:hidden; is this possible?
parent element has position:relative;
child element gets stripped as soon as it's out of it's parents borders.
(elements have additional css defined I just put style attributes for clearness)
It's completely impossible to do what you want with both overflow: hidden and position: relative on the parent div.. instead you can introduce an extra child div and move overflow: hidden to that.
See: http://jsfiddle.net/thirtydot/TFTnU/
HTML:
<div id="parent">
<div id="hideOverflow">
<div style="width:1000px;background:#ccc">sdfsd</div>
</div>
<div id="child">overflow "visible"</div>
</div>
CSS:
#parent {
position:relative;
background:red;
width:100px;
height:100px
}
#child {
position:absolute;
background:#f0f;
width:300px;
bottom: 0;
left: 0
}
#hideOverflow {
overflow: hidden
}
#parent {
position: relative;
background: red;
width: 100px;
height: 100px
}
#child {
position: absolute;
background: #f0f;
width: 300px;
bottom: 0;
left: 0
}
#hideOverflow {
overflow: hidden
}
<div id="parent">
<div id="hideOverflow">
<div style="width:1000px;background:#ccc">sdfsd</div>
</div>
<div id="child">overflow "visible"</div>
</div>
The code below works like a charm.
<div id="grandparent" style="position:relative;">
<div id="parent" style="overflow:hidden;">
<div id="child" style="position:absolute;">
</div>
</div>
</div>
The Problem has a Name: "offsetParent". As soon as an element gets the position abolute|relative or has its position/size altered by a transformation, it becomes the offsetParent of its children. The original offsetParent for all elements (and therefore the area in which overflowing content will be shown or relative to which absolute positions are given) is the viewport of the browser or the iFrame. But after an absolute or relative position had been applied to an element, ist bounding box is the new origin for positioning and clipping of all of ist children.
In a Project, I had a 'popup' window containing a pulldown menu. The pulldown could easily extend over the limits of the window. But as soon as the window was moved (by using a transformation or relative positioning), the pulldown appeared at a wrong place (having the top-left Position of the window as additional Offset) and was clipped at the window's borders. The quick hack I used was to append the pulldown as child of Body (instead fo the window) and position it absolute, using the coordinates of the button that opens the menu (from the clientBoundingBox of the button) and the offset from the button's offsetParent) as absolute position of the pulldown. Then the Body again was the limiting area. This is, however, a bit tricky if it comes to multiple Levels of z-axis ordering (as the pulldown's z-axis is relative to Body, which might be different from the one the window has). But since the window has to be visible (therefore on top) to open the menu, this was negligible.
Of course, this solution requires the use of JavaScript and cannot be done by simple CSS.
You can't eat the cake and keep it. If you take something out of the layout context, it becomes ist own, indepenent (and limited) layout 'frame'
I usually use overflow:hidden as clearfix. In this case, I give up and just add an additional div.
<div id="parent" style="position:relative;">
<!-- floating divs here -->
<div id="child" style="position:absolute;"></div>
<div style="clear:both"></div>
</div>
Use css...
* {margin: 0; padding: 0;}
#parent {width: auto; overflow: hidden;}
#child {position: absolute; width: auto;}
With width auto it will always append to the smallest possible size; and with the reset it will help maintain natural flow.
But if the child is bigger in any way than the parent, then it will not be possible. But with this CSS I think you will achieve what you want to the maximum of what is possible.
I did this in a very simple way
<div class="rootparent">
<div class="parent">
<div class="child"></div>
</div>
</div>
.rootparent {
position:relative;
border:1px solid #ccc;
width:150px;
height:150px;
}
.parent {
overflow:hidden;
}
.child {
position: absolute;
top: -10px;
right: -15px;
width: 30px;
height: 30px;
border: 1px solid red;
}
Here is jsfiddle link
thirtydot's solution is actually a good idea.
Here's a clearer example: http://jsfiddle.net/y9dtL68d/
HTML
<div id="grandparent">
<div id="parent">
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
</div>
<div id="child">
dudes
</div>
</div>
CSS
#grandparent {
position: relative;
width: 150px;
height: 150px;
margin: 20px;
background: #d0d0d0;
}
#parent {
width: 150px;
height: 150px;
overflow:hidden;
}
#child {
position: absolute;
background: red;
color: white;
left: 100%;
top: 0;
}
I believe, every front-end developer encountered this situation, at least once. Let's say you need to absolute position something… And then you try to move it in some direction, and boom it disappears… You forgot the parent was set to overflow:hidden and now your element is lost in the hidden infinite vacuum.There is a css trick to do this.Please find the below demo example for it...
<br><br><br>
<div class="grand-parent">
<div class="parent">P
<div class="child">child</div>
</div>
</div>
css code:
.grand-parent {
width:50px;
height:50px;
position:relative;
background-color: grey;
}
.parent {
width:10px;
height:30px;
overflow:hidden;
background-color: blue;
}
.child {
position:absolute;
width:50px;
height:20px;
background-color: red;
top:-10px;
left:5px;
}
I want to float a div to center. Is it possible? text-align: center is not working in IE.
There is no float to center per se. If you want to center a block element inside another do this:
<div id="outer">
<div id="inner">Stuff to center</div>
</div>
with:
#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }
Now that won't make the text wrap around it (like it would with a float left or right) but like I said: there is no float center.
This has always worked for me.
Provided you set a fixed width for your DIV, and the proper DOCTYPE, try this
div {
margin-left:auto;
margin-right:auto;
}
Hope this helps.
The usual technique for this is margin:auto
However, old IE doesn't grok this so one usually adds text-align: center to an outer containing element. You wouldn't think that would work but the same IE's that ignore auto also incorrectly apply the text align center to block level inner elements so things work out.
And this doesn't actually do a real float.
floating divs to center "works" with the combination of display:inline-block and text-align:center.
Try changing width of the outer div by resizing the window of this jsfiddle
<div class="outer">
<div class="block">one</div>
<div class="block">two</div>
<div class="block">three</div>
<div class="block">four</div>
<div class="block">five</div>
</div>
and the css:
.outer {
text-align:center;
width: 50%;
background-color:lightgray;
}
.block {
width: 50px;
height: 50px;
border: 1px solid lime;
display: inline-block;
margin: .2rem;
background-color: white;
}
Following solution worked for me.
.algncenterdiv {
display: block;
margin-left: auto;
margin-right: auto;
}
One of my websites involves a div whose size is variable and you won't know it ahead of time. it is an outer div with 2 nested divs, the outer div is the same width as the first nested div, which is the content, and the second nested div right below the content is the caption, which must be centered. Because the width is not known, I use jQuery to adjust accordingly.
so my html is this
<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>
and then I center the captions in jQuery like this
captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");
Use "spacer" divs to surround the div you want to center. Works best with a fluid design. Be sure to give the spacers height, or else they will not work.
<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>
<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>
This worked for me..
div.className {
display: inline-block;
margin: auto;
}
this could help you..:D
div#outer {
width:200px;
height:200px;
float:left;
position:fixed;
border:solid 5px red;
}
div#inner {
border:solid 5px green;
}
<div id="outer">
<center>
<div id="inner">Stuff to center</div>
</center>
</div>
No, it isn't.
You can either have content bubble up to the right of an element (float: left) or to the left of an element (float: right), there is no provision for having content bubble up on both sides.
<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">
<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>
Float the div in the background to the max width, set a div inside that that's not transparent and center it using margin auto.
this works nicely
width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space
This resizes nicely with adaptive layouts also..
CSS example would be:
.centered-div {
position:fixed;
background-color:#fff;
text-align:center;
width:40%;
right:0;
margin-right:30%;
}
This worked for me.
I included an unordered list on my page twice.
One div class="menu" id="vertical" the other to be centered was div class="menu" id="horizontal". Since the list was floated left, I needed an inner div to center it. See below.
<div class=menu id="horizontal">
<div class="fix">
Centered stuff
</div>
</div>
.menu#horizontal { display: block; float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }
Try this, it helped me: wrap the div in tags, the problem is that it will center the content of the div also (if not coded otherwise). Hope that helps :)