I have a div with a huge amount of text inside an outer div. The inner div contains a bunch of div itself I am using to format the article.
<div style="overflow: hidden;" id="article_area">
<div id="always_visible_stuff">
</div>
<div style="overflow: auto;" id="outer_div">
<div id="inner_div">
<div id="formatter1">
...
</div>
<div id="formatter2">
...
</div>
...
</div>
</div>
</div>
This displays a scrollbar, but I cannot scroll. Somehow the outer div doesn't seem to get the height of the inner div. What do I have to do to get a working scrollbar?
Set a height value on your .article-data element. Like for example :
<div class="article-data" id="article-data" style="overflow: auto;height: 100vh;">
Related
I need to have the below two div to be remain in the same line(like tables) even after resizing the window to minimum size.
<div id="wrapper" style="">
<div id="div1" style="display:inline-block;">
<p>this is div one. this should remain in same line with div 2 even after resizing the window.</p>
</div>
<div id="div2" style="display:inline-block">
<p>this is div two. this should remain in same line with div 1 even after resizing the window.</p>
</div>
</div>
Use display:flex to wrapper, and it will do the job
<div id="wrapper" style="display:flex">
<div id="div1">
<p>this is div one. this should remain in same line with div 2 even after resizing the window.</p>
</div>
<div id="div2">
<p>this is div two. this should remain in same line with div 1 even after resizing the window.</p>
</div>
</div>
With the current setup just add width to you div's. That will get the div's next to each other.
<div id="wrapper">
<div id="div1" style="width:50%; display:inline-block;">
<p>this is div one. this should remain in same line with div 2 even after resizing the window.</p>
</div>
<div id="div2" style="width:50%; display:inline-block">
<p>this is div two. this should remain in same line with div 1 even after resizing the window.</p>
</div>
</div>
It would be preferable to use CSS classes instead of inline CSS.
Also there is CSS flexbox that you can use.
I am trying to create a 'section' div with a header, this header has a centred title and may or may not have a jquery UI button on its right hand side. The width of the 'section' div is determined by its parent.
My trouble is that the title with button centre alignment is taking the button's width into account.
Html:
<div style="width: 600px;">
<div class="section purple">
<div class="sectionHeader">
<div>Normal Title</div>
</div>
<div class="sectionContent"></div>
</div>
<div class="section blue">
<div class="sectionButtonIcon"> <a id="btnExample">Jquery UI Button</a>
</div>
<div class="sectionHeader">
<div>Title With Button</div>
</div>
<div class="sectionContent"></div>
</div>
</div>
See jsFiddle for css: http://jsfiddle.net/agAgeas50/uL9Uc/8/
Note: this is not a duplicate of Center inline-block div in parent while ignoring floating elements . If you look at jsfiddle's in the accepted answer, wrap the parent in another div and give the top level div a fixed width, the right hand element appears outside the parent.
add/edit the following
.section.blue {
position:relative;
}
.sectionButtonIcon {
position:absolute;
right:0px;
}
http://jsfiddle.net/uL9Uc/9/
Is it possible to do this with CSS? Given the following HTML:
<div class="main-container">
<div class="left">
...
</div>
<div class="right">
<div class="top">
...
</div>
<div class="bottom">
dynamic content
</div>
</div>
</div>
I want bottom to scroll if it overflows the space between top and the bottom of main-container.
How can this be done without specifying the height of bottom?
I would prefer not to specify height on other elements either if possible. It doesn't right now, but top could have dynamic content as well.
The HTML above can change however necessary; what I require is the end result of a left column, a right column, and the bottom portion of the right column scrolling if its context exceeds the available space in the main container.
In the end, you'll have to specify some kind of limits (either height or max-height) to your elements in order to know if the content goes beyond them.
Once you have those dimensions set up, overflow:auto; will show you scrollbars when you need them.
Hope this is what you are looking for:
<div class="main-container">
<div class="left" style="float: left; width:33%">
...
</div>
<div class="right" style="float: right; width:66%">
<div class="top" style="height: auto;">
...
</div>
<div class="bottom" style="max-height: {height of main-cont.}; overflow-y: scroll;">
dynamic content
</div>
</div>
</div>
Is it possible to use a fixed width div and an expanding div? Something like:
<div style="float:left; width:200px">
</div>
<div style="float:left; width:100%"> // expand please
</div>
<div style="position:fixed; width:320px">
</div>
I'd like the middle div to just expand in width and take up whatever is left after position the left and right div. It works fine if I give each of them a width in %, but when using a fixed-width for some, they start overlapping when the browser frame gets small etc,
Thanks
How about:
<html>
<body>
<div style="float:left;width:200px;background:red">
</div>
<div style="float:right; width:320px;background:blue">
</div>
<div style="background:black">
</div>
</body>
</html>
<div style="left:0;width:30px;"></div>
<div style="left:30px;right:0;"></div>
You may need to make them absolute positioned and the parent relative.
I have the following code:
<div "background-color:green">
<div "float:left">something</div>
<div "float:right:>something else</div>
<div>
Why does the background color not appear in this case? What needs to be done to make it appear
{Code simplified for understanding , may not be in the approporiate syntax}
You need to clear the div. You can use clear: both on an element beneath, but I often find this is easier:
<div style="background-color:green; overflow: hidden;">
<div style="float:left;">something</div>
<div style="float:right;">something else</div>
<div>
Notice the overflow: hidden.
Of course, it only works where you don't require elements to leave their containing elements.
A floated object is "lifted" from its containter. The bottom edge of the outer div doesn't stretch to its content anymore.
An option is to add an element with clear (clear takes a direction (either left, right, or both), and pushes itself below a float it would touch:
<div style="background-color: green">
<div style="float: left">something</div>
<div style="float: right">something else</div>
<br style="clear: both;" />
<div>
You need to write in the style attribute
<div style="background-color:green;">
<div style="float:left;">something</div>
<div style="float:right;">something else</div>
<div>