I have a comment box like so...
<div id="comments">
...
</div>
Now, inside this comments div I have another div called box...
<div id="comments">
<div id="box">
...
</div>
</div>
The box div is position: fixed and it works mostly fine, but...
What I would like is, instead of the box div "floating" above all the content, for it
to be only scrollable within the comment div.
Do i need to use JavaScript for this?
You don't need JS for this. Simply add overflow:scroll and set the outer DIV to the fixed size. Then if internal DIV is larger than outer div you will see the scrollbar(s)
You can try it on this page
<style>
#comments { overflow: auto; height: 200px; }
</style>
<div id="comments">
<div id="box">
...
</div>
</div>
Give a suitable height for the container div ( comments ) and oveflow auto will make a scroll bar if the content exceeds the height of the container.
Overflow: the 'overflow' property
Related
I have write below code :
<body>
<div class="navbar" id="navbar">
</div>
<div id="container">
<div class="row">
<div class="col-2">
<div id="nav_drawer">
</div>
</div>
<div class="col-10" id="table_container">
<div class="div_table" data-url="/getDevice">
</div>
</div>
</div>
</div>
I want to scroll only id : table_container
Is there any solution.
Thanks in advance!
You haven't given much additional context around what you're trying to do, but if you're simply after the relevant CSS to make an element display it's overflow in a scrollable area it would be:
div#table_container {
overflow: scroll;
}
However, this will only take effect if the content within #table_container actually overflows the height or width set on the container. You'd likely need to specify such a set height or width, but again without seeing your existing CSS it's hard to comment further.
You can also specify scroll in only the x or y dimension using the overflow-x and overflow-y properties respectively. Read up on the overflow property:
https://www.w3schools.com/cssref/pr_pos_overflow.asp
Try to set overflow-y property for vertical scroll.
#table_container{
width:500px;
height: 110px;
overflow-x: hidden;
overflow-y: auto;
}
Ok so I am using Jquery-ui resizable, so the user can control it.
The problem I am having is on the bottom half there is a textarea that is not expanding to 100% height.
Eventually, the textarea will be controlled by the codemirror library.
In my fiddle I have not included anything with code mirror, to keep it simple.
I think the form tag has something to do with it, since it is a block element.
<form>
<div class="wrapper">
<div id='ilo'>
<div id='iloWrapper'></div>
<div id='handle' class="ui-resizable-handle ui-resizable-s"></div>
</div>
<div id="editor">
<div class="edit-tool-bar"></div>
<div class="editor-window">
<textarea id="tArea"></textarea>
</div>
</div>
</div>
</form>
jsfiddle
[UPDATE]
Here is a new fiddle based on the answer from audre7.
As you can see The textarea is 100% but it is expanding well past the bottom of the page.
All I want is 2 sections one top and one bottom.
The bottom section will have 2 items in it the top item will not scroll but be sticky to the top of that bottom section.
The textarea will take up the rest of the room in the bottom section, and it will be able to scroll vertically.
You have to put the container of the textarea in a position absolute, and it seems to work as you want.
.editor-window{
position:absolute;
}
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
Why isnt the background color showing up in between those 2 divs?
When you float elements you should provide the width of the floated elements. Otherwise you may encounter unexpected behaviors accross different browsers.
Check this tutorial, there is good info on floating in css. [link is dead]
Basically, if you provide an overflow:hidden; to the container div and provide width to the floated elements, your problem will be solved.
<div style="overflow: hidden;">
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
</div>
Similarly, you can add another div wherever you want to normalize the flow ike this:
<div>
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
<div style="clear:both;"></div>
<div>This div will be at the same place
as if the previous elements are not floated</div>
</div>
Both will work :)
EDIT
Another method which I use frequently in these days is to float the first element and set a margin-left to the following element. For instance:
<div>
<div style="float: left; width: 300px;">Some text</div>
<div style="margin-left: 300px;">Some text</div>
<div style="clear: both;"></div>
</div>
The advantage of this method is that the following element (the second div in this case) does not need a fixed width. Plus, you may skip the third div (clear: both;). It's optional. I just add it in case that the floated div is longer in height than the second div since if you don't add it the parent div will always get the height of the second div.
Just set the container div to overflow: hidden;.
If you set elements to float they won't be in the normal 'flow' of the document anymore.
div { background: #ccc; overflow: hidden; }
And you didn't even made a freehand circle ;)
A floating element doesn't affect the size of the parent, unless the parent specifically contain the children using the overflow style.
Your outer div has the same background colors as the child divs, but the height of the parent is zero, so you don't see its background.
It's because both the divs are floated so the containing divhas no height. If you were to add a third child div whic wasn't a float, give it a height of 0 and clear:both you should see the background colour appear.
The white space you are showing is a body part and you set the background color to the div but not in the body. That is the reason the body part is empty.
To color the empty part you should add following code:
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
body{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
You can change the body background color by changing the background color in body style.
I have a floated div with "sidebar" text. Its parent container has text as well.
I don't want to have text below my floated "sidebar" div:
example http://img864.imageshack.us/img864/6058/screenshot2011052613084xv.png
How can I fix this?
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<h2>Foo</h2>
<p>Text!</p>
</div>
If it doesn’t mess up anything else, you can use overflow: hidden or overflow: auto to fix this:
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<div class="next-to-float" style="overflow: hidden;">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
See http://jsfiddle.net/pauldwaite/YL5P3/
I’ve written about this more fully here, including code to make it work in IE 6: xHTML/CSS: How to make inner div get 100% width minus another div width
I still don’t really understand the reasoning behind why overflow: hidden does this, but I understand that it does follow from the CSS spec.
Set right margin on non-floated element
JSFiddle
The only requirement is that you must predefine your floated element's width. Then it can have whatever height you like and the non-floated content (when applied right margin) won't stretch under floated element.
How it works?
We have floated element on the right with width = X
We have usual content but set its right margin = X+s where s is some predefined space between your content and floated element so they don't touch.
And that's it.
Since you have multiple content elements (heads, paragraphs) you have to put them inside a container with this right margin setting.
<div id="parent">
<div id="floated">Foo bar</div>
<div id="content">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
And CSS:
#floated
{
float: right;
padding: 1em;
background: #ccc;
width: 10em;
}
#content
{
margin-right: 13em; /* 10em width + 2 x 1em padding + 1em space */
}
Why is this solution better than setting main content width?
Because setting main content width will only work when you want to limit your document content to a fixed width (like 960 grid). But when you want your content to stretch over the whole browser window width, this solution will work regardless of browser window size.
And a small advice
Avoid using inline styles whenever possible because maintainability of your application/site will become a nightmare.
You can nest 2 div tags inside the container. Float them both and resize them as you need them to be.
Set a bottom margin on the floated element that equals the length of the remainder. Or add a width to the larger element and float it the other direction.
<div id="parent">
<div id="floated" style="width:200px; float:right">Foo bar</div>
<div id="content" style="width:600px; float:left">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
OR
<div id="parent">
<div id="floated" style="width:200px; margin-bottom:200px; float:right">Foo bar</div>
<h2>Foo</h2>
<p>Text!</p>
</div>
its easy simply add width in [P] tag see here
example
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<h2>Foo</h2>
<p style=" width: 500px; ">Text!</p>
</div>
for example your ( id="parent" ) have 800px width
and (id="floated") right-side bar have 200px width
then make your [P] 800px - 200px = 600px
so set your [P] width to 600px
---------- or
if you want some space between text and bar make [P] width 580px
it means 20px for space
I am trying to create a variable height div. It seems if the div's inside the variable height div are set to float:left The variable height div gets a height of 0. If I set the variable height div float:left the div grows with the content inside it but now the variable height div is sent to the left of the screen instead of the center. How do I keep the main div in the center but also have it grow with it's child div's?
<div id="VariableHeightDiv">
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="clear"></div>
</div>
and in your css
.clear{clear:both;}
You need to clear the floats, otherwise the browser is unable to understand and calculate correctly the height of the container div. That is why in the end we add an empty div with clear:both.
Adding overflow: auto; to your main div will keep it centered, and will also force it to wrap around the elements inside of it. Two great articles on the float property and the overflow property can be found here: http://css-tricks.com/all-about-floats/ / http://css-tricks.com/the-css-overflow-property/
I wouldn't recommend using the <div style="clear: both;"> technique, because it's unnecessary extra markup, and doesn't add anything to the presentation.
Floated divs are somewhat removed from the document's "flow". You can force a container div to completely surround its contents, even if they're floated, by using a clearing element afterwards:
<div>
<div style="float: left">blah blah</div>
<br style="clear: both" />
</div>
There's better methods detailed here.
For the main div, include these CSS rules:
margin: 0 auto;
overflow: auto;
Also make sure that you have a min-height and width property set for the main div.
Edit: I've included the overflow property as well.
add overflow:hidden or overflow:scroll or overflow:auto for the parent div.
More info http://www.quirksmode.org/css/clearing.html
example: http://jsfiddle.net/MbgH4/1