Issue #1
Trying to make 2 divs align with eachother,
the fist div doesnt have a scrollbar, but the second has one. The scrollbar cause the second div to be offset from the first one.
Is there a way to align those 2 divs?
Issue #2
Why is the second div not scrolling when it has the overflow-y:scroll; ?
body, html {
margin: 0;
padding: 0;
border: 0;
outline: 0;
overflow:hidden;
}
.fixed-top-container {
text-align:center;
top:0px;
height:100px;
min-height:100px;
max-height:100px;
width:100%;
display:inline-block;
margin:0 auto;
padding:0;
background-color:rgba(0, 0, 0, 0.5);
}
.container {
width:100%;
height:100%;
background-color:#F0F0F0;
overflow-y:scroll;
}
.content {
width: 800px;
height:100%;
margin:0 auto;
background-color:#FFFFFF;
}
View JSFiddle for issue: http://jsfiddle.net/Aaeijh/qAh9g/1/
How can we get the bottom div to scroll?
Use the user friendly <textarea> instead of old <div> technique
<textarea rows="10" cols="50" class="container">
//your text here
</textarea>
JSFiddle
remove overflow:hidden; and overflow-y:scroll; ..
Related
Is it possible to center an absolute position div within a relative dive with margin 0 auto?
HTML:
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer{
background: red;
margin: 0 auto;
width:100px;
height:100px;
}
.inner{
position:absolute;
width:20px;
height:20px;
background:blue;
top:10px;
left:10px;
}
I was hoping that the absolute positioning would work within the outer one ok but I guess the margin. The above code can be seen here: http://jsfiddle.net/g4y4czff/
Ideally I'd like to use css to solve this but I reckon there's more likely to be a js solution.
Any ideas greatly appreciated.
C
New fiddle: http://jsfiddle.net/g4y4czff/1/
Just add position: relative to .outer
Reason is because the default position property is static
since you wanted it centered, here you have it centered horizontally and vertically too. Placing position:absolute; inside position:relative; allows it to be inside of it.
http://jsfiddle.net/g4y4czff/3/
.outer{
background: red;
margin: 0 auto;
width:100px;
height:100px;
position:relative;
}
.inner{
position:absolute;
width:20px;
height:20px;
background:blue;
top:0;
margin: auto;
left:0;
right:0px;
bottom:0;
}
I've got a snippet of code working fairly well thus far, but there's a small glitch that needs to be worked out.
The goal is to have two items next to each other where one is a fixed width and the other fills the remaining available width within a given container.
The fluid item is resizing appropriately, however there's a little hiccup every so often as the browser/container is resized.
See: http://jsfiddle.net/tedgrafx/kTeCC/
The two items are floating, but as you resize the width, at certain widths they don't float, and appear vertically stacked - pushing one below the other.
What can be done to remedy this little glitch so it appears seamless during resizing?
Any/all help would be appreciated.
HTML:
<div class="panel">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
CSS:
html, body{
margin:0;
padding:0;
}
.panel {
float:left;
width:100%;
margin:0;
padding:0;
}
.left {
float:left;
width:50px;
height:10px;
margin:0;
background:red;
}
.right {
float:right;
width:100%;
height:10px;
margin:0;
background:blue;
}
Javascript:
// Resize Top-Right Panel section on the Entity Panels.
$(document).ready(function () {
resizeRight();
$(window).resize(function () {
resizeRight();
});
});
function resizeRight() {
// Subtract the width of the TopLeft section from the width of the entityPanel div:
var right_width = $('.panel').width() - ($('.left').width());
// Set the width of the TopRight to an even number:
if (right_width % 2 == 0) { // Using the modulus operator to determine if 'mid_width' even number.
right_width = right_width + 1; // Now we set 'mid_width' to an odd number.
// Set the width of the TopRight section:
$('.right').css({ 'width': right_width });
}
}
You don't need the javascript really, you can lose the float on #right.
Unless I misunderstood what you wanted.
http://jsfiddle.net/kTeCC/7/
html, body{
margin:0;
padding:0;
}
#main {
width:100%;
margin:0;
padding:0;
}
#left {
float:left;
width:30px;
height:20px;
margin:0;
background:red;
}
#right {
height:30px;
margin:0;
padding-left: 5px;
background:blue;
}
br {
clear: both;
}
http://jsfiddle.net/kTeCC/16/
simple solution that only use position,top, left, right
html, body{
margin:0;
padding:0;
}
#main {
position:relative;
width:100%;
margin:0;
padding:0;
}
#left {
position: absolute;
left:0;
top:0;
width:30px;
height:30px;
margin:0;
background:red;
color:#fff;
}
#right {
position:absolute;
left:30px;
right:0;
top:0;
height:30px;
margin:0;
background:blue;
color:#fff;
}
Just as an addendum to what OneOfOne suggested; to have #left and #right not overlap (while not floating #right) you can add padding-left to #main and position #left with a negative margin-left: http://jsfiddle.net/rasmusfl0e/33pVN/
html, body{
margin:0;
padding:0;
}
#main {
padding-left: 30px;
background-color: pink;
}
#main:after {
clear: both;
content: " ";
display: table;
}
#left {
float: left;
margin-left: -30px;
width: 30px;
background: red;
}
#right {
background: blue;
}
And BTW - floating blocks will stack on top of eachother if their combined width is bigger than their container; the modulus thing you're doing to get even pixel widths on #right is your culprit.
So I've been playing around with web development and I've noticed that in Firefox, my elements are getting pushed to the right versus down, which is what it should be (which happens in Chrome).
I am by no means a Guru. Is there any way to prioritize wrapping versus pushing? I have tried inserting line breaks and setting both to display:block. That does not seem to be the problem.
This is the CSS for the bar:
.tiq-editor-bar
{
z-index:1;
overflow:hidden;
float:left;
width:100%;
border-top: solid 1px #AAA;
text-align:center;
display:none;
position:relative;
color:#AAA;
font-weight:normal;
font-size:14px;
}
This is the CSS for the gallery wrapper (the white out-lined thing)
#tiq-ui-gallery-wrapper
{
min-height: 500px;
background:url(../img/portfolio/empty.png) center no-repeat;
overflow:hidden;
}
And for the gallery itself:
.tiq-theme-gallery
{
width:600px;
height:400px;
resize:vertical;
border:solid 1px #eee;
overflow:auto;
}
Thanks!
EDIT: The gallery is positioned relatively, BTW. I am using Galleria and that gives the container:
.galleria-container {
position: relative;
overflow: hidden;
background: #000;
display:block;
}
EDIT EDIT:
Here is a JSFiddle:
http://jsfiddle.net/RyBz9/2/
Change
.tiq-editor-bar
{
float:left;
}
to
.tiq-editor-bar
{
float:none;
}
Hi i have this a div called "nav" that contains divs with a class "thumbs". Im trying to create a table of contents like div that can be scrolled to display further thumbnails.
this is my CSS so far: (note that each thumbs are position:absolute and is left: positioned accordingly)
#nav {
position:absolute;
width:768px;
height:214px;
bottom:0px;
/*-webkit-transform:translateY(214px);*/
background:gray;
overflow:auto;
}
.thumbs {
position:absolute;
width:80px;
height:100px;
margin:10px 10px 10px 10px;
background:white;
}
I want it to be scrollable so that if the thumbnails exceed 768px (width of nav) it can be scrolled to the left to view more.
Thanks
edit: I forgot to mention that I am doing this in PhoneGap. It will be a mobile app. thanks!
Remove position: absolute; and add float: left; from your thumbs class. That should do it.
UPDATE
If the number of thumbs are known in advance, the inner div's width can be set via CSS. Otherwise, it can be set onload or whenever a thumb is added/removed via JS.
$('#div').css('width', ($('.thumbs').length * $('.thumbs:first').outerWidth(true)) + 'px');
You can achieve this with the combination with max-width, display:inline-block & white-space.
Like this:
#nav_outer {
position:absolute;
bottom:0px;
background:gray;
overflow:auto;
}
#nav {
height:214px;
max-width: 300px;
bottom:0px;
/*-webkit-transform:translateY(214px);*/
background:gray;
white-space:nowrap;
}
.thumbs {
white-space:normal;
display:inline-block;
*display:inline; /*IE7*/
*zoom:1; /*IE7*/
width:80px;
height:100px;
margin:10px 10px 10px 10px;
background:white;
}
http://jsfiddle.net/xzcDD/3/
In my example when the .thumbs less than the width of 300px then there is no scroll
first fo all, sorry for my english. I am trying to do dragable and resizible table columns in pure Javascript. I inserted inside a cell 2 areas, one for draging (div) and 2nd for resizing (span) like you can see in example bellow. Everything works fine in Chrome and Firefox but not in IE8.
Problem is during resizing when div doesn't fit in cell and jump under cell as you can see "Column1" in image. I would suggest property "overflow:hidden" should fix it, but no luck.
CSS:
.ui-column-resizable
{
float:right;
height:20px !important;
display:inline;
cursor:w-resize;
position:relative;
overflow:hidden;
text-align:center;
white-space:nowrap;
background-color:blue;
margin: -2px -2px -2px 0;
}
.ui-column-draggable
{
height:17px;
cursor:move;
position:relative;
overflow:hidden;
background-color:yellow;
white-space:nowrap;
text-align:center;
}
JavaScript:
column.innerHTML = "<span class='ui-column-resizable'> </span>" +
"<div class='ui-column-draggable'>" +
column.innerHTML +
"</div>";
http://jsfiddle.net/A5kVs/2/
This should do it...
HTML:
<td>
<div class="drag">
Column 1
<div class="resize"></div>
</div>
</td>
CSS:
.drag {
position:relative;
background-color:yellow;
padding:1px 10px 1px 5px;
cursor:move;
}
.resize {
position:absolute;
background-color:blue;
right:0;
width:5px;
top:0;
height:100%;
cursor:w-resize;
}
Live demo: http://jsfiddle.net/simevidas/5mzgP/3/