I have these two divs:
<div id="ing" style="position:relative;">
<div id="comm" style="position: absolute; width: 27% !important; height: 141px; right: 18px; top: 1px; ">
</div>
</div>
And then in JS I set tinymce to the "ingredients" div. How to make these two divs share a scrollbar like this: http://jsfiddle.net/userdude/hThsx/
Problem her is that your editor uses a contenteditable iframe with an own document.
So this iframe has an own scrollbar and you cannot do anything about it except adjusting the iframe dimensions to the inner documents dimensions. In this case there won't be a scrollbar for the editor iframe.
Now you may follow Cobra_Fasts idea of putting a wrapper div around your two divs and let it have a scrollbar.
Related
I have an HTML structure with a mosaic of image : 4 images per row.
When I click on an image, I would like to make a full-width div appears below the row where the image is.
And I need to have that element (.div-full-with) to remain in flow.
Here is a schema :
I’ve tried absolute positioning but the element is not in flow of course.
.div-full-with {
background-color: #333;
position: absolute;
left: 0;
right: 0;
height: 100px;
top: 30px;
}
I’ve tried some other technics (calculate, etc) but I can’t achieve this.
If the structure was static, it would be very easy. But I'm in a loop and I have to make it in a template like this where there is only only one element :
<div class="col-md-3">
<img src="..."/>
<div class="hidden-div">some content in full width</div>
</div>
I want a div to appear on top of a Zurb Foundation reveal modal.
However, my div refuses to be shown on top of the modal.
The z-index of the modal is 1006. When I set my on-top div to 1010, or even 99999, it still sits underneath the modal.
The only way I can get it to work is by setting the foundation modal's .reveal-overlay's z-index to 0 (even 1 puts it on top of my div), but that messes up other elements.
How can I put an element on top of a Zurb Foundation modal?
Your div needs to on the top level of the dom for this to work.
The following will work.
<div class="reveal">
<h1>my reveal</h1>
</div>
<div style="z-index: 1100; width:500px; height: 500px;
top: 100px; position: absolute;left: 200px;">On top of the reveal</div>
</body>
</html>
I am working on building Email Based HTML. Now as we know, Position attribute is not well supported in Email clients so i will have to go on without that. Now, looking at my options... i can go for either Margin or padding to position the elements.
The input elements can be relatively positioned or absolute. I'll just take the absolute part for now. So, my input will be for example
One Parent DIV (top:0, left:0)
A Child DIV (top:20, left:20)
Second Child DIV (top:20, left: 200)
Now, in a normal browser based HTML, these elements would easily be placed on their appropriate positions. But without the position: absolute or even top, left attributes. It get's tricky as the margin attribute arranges the elements relative to the other elements. Here is a sample run:
<div style="width: 600pt; height: 600pt; border:2px solid red; margin-left:20pt; margin-top: 30pt">
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
<div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
</div>
Fiddle
My Expected outcome was, all the black divs overlapping each other, placed on the same position. That is possible if it calculates the margins according the the "Parent Element" but it is margining left from parent and top from the previous elements.
So My question now is, Is there a side way of using marging-left, top as top, left attributes and producing the same behavior as they would with position:absolute? Or simply, placing these three elements on top of each other using margin or padding attributes (No position, as it is not supported by Email clients)
I also know, using Divs for email isn't the best approach and i should consider using tables but trust me, the kind of HTML i am dealing with can only be generated using Divs and some playing around with margin or paddings. Any help will be appreciated.
You can use negative margins to achieve overlapping.
margin-top: -50pt
http://jsfiddle.net/pkdqh7kt/1/
Here is an example of stacking your divs horizontally:
http://jsfiddle.net/pkdqh7kt/2/
Also you can check this table to find out which CSS properties are currently supported by major email clients.
I would like to place a floating sidebar, next (left side) to my content div (auto centered). I would like to place it 790px from the top and when scrolled, it would still be on the top left side of the content div. I have found solution with javascript. But no of them is working with placing the sidebar next to a centered content (I need it dynamic, for all resolutions). All solutions I have found are changing the sidebar position to fixed (in javascript code), when scrolled (bellow 790px). But if I want it still next to my centered div, I need to use absolute position for the sidebar (even when scrolled), right? Is there any solution for this, please? Thank you very much.
use fixed - it creates the illusion of a following div - for example:
html:
<div id="sidebar">
[ sidebar content ]<br>
[ sidebar content ]<br>
</div>
<div id="container">
[content]<br>
....
</div>
css:
#sidebar {
position: fixed;
top: 60px;
width: 200px;
left: 0;
border: 1px solid #0f0;
}
heres the code - take out the javascript stuff and unnest the divs and let me know if that was acceptable :D
I am trying to make a selectable list in Google Closure . I got almost everything , but when i added the scroll functionality to the container. i realized that something is wrong with my style if the outline element
<div class="Selectable"
style="height: 400px; overflow-y: scroll" id ="list2">
<div class="selectable-item">0 </div>
<div class="selectable-item">1</div>
.....
.....
.....
<div class="selectable-outline" style="left: 88px; top: 97px; width: 76px; height: 725px; "></div></div>
</div>
here is the fiddle.
http://jsfiddle.net/dekajp/uC5jm/4/
i want div ( outline ) to be contained within scrollable parent. the scroll height of parent is around 2000. could not figure this out !!
Thanks for you help !!!
The outline element is positioned absolute, therefore you'll need the parent of that element to be position relative so that the outline element won't break containment.
/* you need to also capitalize selectable */
.Selectable {
position: relative;
/* more styling */
}
JSFIDDLE