I have some css and html that I am trying to modify, to make it so a div expands horizontally into a scollable div, but all I get is "stacking" once the width is reached.
fiddle
The absolute positioning is pretty important in the document structure, so I will need to keep most of the css as it is.
Any ideas?
add white-space:nowrap; in "mli" class
fiddle http://jsfiddle.net/cWpGS/51/
If I understand you correctly, the text is extending fully into the container. Your problem was that the container only extended to the end of its parent div, which had a very small width assigned. Changing the width of the container div makes the text not wrap as much:
jsFiddle
I think this will make sense
.q-d-list-container {
display:block;
position: absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
background:#f1f1f1;
border:1px solid #C4C4C4;
}
#q-d-list {
display:block;
background:white;
border:1px solid #D4D4D4;
width: 150px;
position:absolute;
left:5px;
top:5px;
bottom:5px;
overflow : auto;
overflow-y: hidden;
white-space: nowrap;
}
.mli {
padding:4px 0 4px 6px;
margin:0;
cursor:pointer;
}
Here is the demo
Related
I have a div with an absolute positioning which is again a child of absolute positioned element. setting width:100%;left:1px;right:1px to the child not working. Problem i face is, its getting beyond the parent the element.
<div class="outer">
<div class="inner">
</div>
</div>
.outer{
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
}
.inner{
position:absolute;
width:100%;
height:100%;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
Refer here
Just take away the 100% on the child element and the inner div will fit the parent.
.outer{
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
}
.inner{
position:absolute;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
This is because you have the width and height to be 100%, meaning it'll be also 80px PLUS the top left right and bottom properties so the box lays over the other. Now if you want it to go inside the box and be perfectly proportioned remove height and width:
.inner{
position:absolute;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
You can also make this:
.outer{
margin-top: 10px;
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
padding: 1px;
}
.inner{
position:relative;
width:100%;
height:100%;
background:red;
}
Have a problem centering an element (div, but thats beside the point) in the browser window horizontally. Have no problem positioning it compared to its parent element, but want it to break free from this HORIZONTALLY - but still keep its relation to it vertically. Maybe I'm asking too much? :-) I can do it with position:fixed, but then the element freezes in one position in the browser regardles...
#parent li {
display:inline;
text-align:center;
float:left;
position:relative;
padding: 12px 10px 4px 10px;
margin-right:10px;
height:28px;
border:none;
}
.child {
margin:16px 0px 0px 0px;
float:left;
z-index: 100;
position:absolute;
text-align:left;
padding:0;
border:1px solid #BBBBBB;
border-top:none;
line-height:14px;
}
I can also ask in another way: this is what I want horizontally:
.child {
margin:16px 0px 0px 0px;
float:left;
z-index: 100;
left: calc(50% - 400px);
left: -moz-calc(50% - 400px);
left: -webkit-calc(50% - 400px);
position:fixed;
top:inherit;
text-align:left;
padding:0;
border:1px solid #BBBBBB;
border-top:none;
line-height:14px;
}
that leaves it in the middle regardles of the parent. Great. BUT - when you scroll down on the page, if the child is visible, it stays put, whereas the rest of the content scrolls. And if you have scrolled a bit so the parent is not in its original position from the top, the child will not align with the parent but appear from top where the parent originally was, pixel wise... which is not optimal... :-/
Give some (top,bottom) property to your position in div.
#parent li {
position:relative;
top:50px;
left:50px;
}
.child {
position:relative;
top:50px;
left:50px;
}
I am working on a site where a 3rd party in-line HTML editor is being used (CKEditor). I have the editor control wrapped in a DIV that is relatively positioned and has a z-index that places is at the top of the visible stack. The problem is that on some pages there are images that are floating (float: right) on the right side. Some of the CKEditor styles are setting elements overflow property to hidden (overflow: hidden).
So although my containing DIV has a larger z-index than the floating image the CKEditor elements are not overflowing on top of the image. This creates the a result that looks as if the top right corner of the editor has been cut out.
Is there a way I can work around this without trying to edit CKEditor styles? Check out this example sinario:
http://jsfiddle.net/nmartin867/StHJA/
HTML
<body>
<div class="floating">
I'm floating!
</div>
<div class="container">
<div class="inner">
Why am I not overlapping?
</div>
</div>
CSS:
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:visible;*/ <--This would work
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
float:right;
}
You could do this but I am not sure if it applies to your situation.
.inner{
background-color:yellow;
position: absolute;
width:100%;
text-align: right;
}
Alternatively when you want to override third party styles but do not wish to edit them in the third party application you can recreate the same css class in your own stylesheet and force it to overwrite the third parties by using important! eg:
float: none !important;
Have you tried absolute positioning instead? Because you are floating a DIV that is not in the same container you want to overlap, it will position outside in the body itself. Also, you did not set the z-index for the floated DIV, so it will be layered behind because it is ahead of the other container in sequential order.
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:hidden;*/
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
/* float:right;*/
position:absolute;
top:0px;
right:0px;
z-index:2;
}
I am not sure if this is the effect you want to accomplish, but this will position the first container on the top.
This is how i configured the divs in HTML
<div id="wrapper"><div id="content"><div id="details-middle" class="box">
..........content.........
</div></div></div>
And this the css for the div's
#wrapper {
border-radius: 12px;
font-size:13px;
line-height:140%;
width:1008px;
margin:0 auto;
margin-top: 15px;
margin-bottom:15px;
}
#content {
margin-left:20px;
width:1008px;
}
#details-middle
{
float:left;
width:700px;
}
.box {border: 1px solid #CCC;
border-radius:12px;
margin-bottom:7px;
padding:10px 12px;
background-color: #FFF;
}
Everything is showing out of the div's ..
You are floating details-middle, which means non floated elements will not make room for it, unless they themselves are floated, or you clear the float.
My preferred solution is to give the parent overflow: hidden; which will force the parent to make room for its floated children:
#content
{
margin-left:20px;
width:1008px;
overflow: hidden; /* change here */
}
Not exactly sure what you're wanting, there isn't a lot of description in regards to your question, but you need:
$('#details-middle').text();
to gather just the text from that DIV.
If you're not wanting to display children elements of the DIV, then refer to this answer I gave recently - it might be your scenario too:
jQuery pull out text inside div but not in p tag
I have this code.
Wish div align blue with red div without affecting the rest of the page.
Notice that the div#leftcontent not go to the bottom of the page and I'm not understanding why.
Maybe the solution is to put the div#leftcontent aligned to the bottom of the page. But how?
Thanks.
you have to change the red div:
bottom: 0px; /*delete*/
position:relative;
maring-top: 86px; /*to align to the blue*/
check this out: http://jsfiddle.net/85unG/48/
and for the height, the reason the its not touching the bottom is:
div#wrap {
height: 768px; /should be 739 px;/
}
CSS absolute positioning to the rescue!
First ditch the fixed height and the overflow:auto for div#wrap. Replace overflow:auto with overflow:hidden:
div#wrap
{
width:1024px;
/*height:768px; /* Forget about it! */
margin:5px auto;
border:2px solid #ccc;
/*overflow:auto;/* Forget about it! */ overflow:hidden;
position:relative;
}
... now note that div#wrap has a relative position:
div#wrap
{
width:1024px;
margin:5px auto;
border:2px solid #ccc;
overflow:hidden;
position:relative; /* AWESOME */
}
This means div#wrap is non-statically positioned, so we can position things absolutely within it... like div#footer and div#social-networks:
div#wrap div#leftcontent div#footer {
position:absolute;
bottom:0px;
}
div#wrap div#nav div#social-networks {
position:absolute;
bottom:0px;
}
This will position the bottom edge of div#footer and div#social-networks 0px away from the bottom edge of its non-statically positioned ancestor - namely, div#wrap.
Bad news though: positioning things absolutely can screw up the natural flow of things, so you have to manually reserve some space for div#footer and div#social-networks. Do this with padding:
div#wrap
{
width:1024px;
margin:5px auto;
border:2px solid #ccc;
overflow:hidden;
position:relative;
padding-bottom:50px; /* this is new... you can choose a better number than 50px */
}