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>
Related
I would like to display a block of color with different widths and no space in between. To test it out I made this HTML but it does not show as a block:
<div style="text-align: left;">
<div style="display:inline-block;background-color:green; width:0rem;"></div>
<div style="display:inline-block;background-color:red; width:0.3rem"></div>
<div style="display:inline-block;background-color:yellow; width:0.9rem"></div>
</div>
The only way I could make it work is to add  . But now I see a space between the color blocks:
<div style="text-align: left;">
<div style="display:inline-block;background-color:green; width:0rem;"> </div>
<div style="display:inline-block;background-color:red; width:0.3rem"> </div>
<div style="display:inline-block;background-color:yellow; width:0.9rem"> </div>
</div>
Is there a way I can make a square block without ?
Unless you specify a height, a div is as tall as its content. If it has no content, then it doesn't have any height. If it has no height, then there are zero vertical pixels to give a background colour to.
You need to add a height callout is you want to see an "empty" <div>. Like this.
<div style="text-align: left;">
<div style="display:inline-block;background-color:green; height:0.5rem;width:0.5rem;"></div>
<div style="display:inline-block;background-color:red; height:0.5rem;width:0.3rem"></div>
<div style="display:inline-block;background-color:yellow; height:0.5rem;width:0.9rem"></div>
</div>
I have the following split among 3 main div to be side by side. The very left div I want it to take up 60% of the screen and the rest 2 (description and resource) to take each 20%. When I run this all 3 are overlapping on the left portion. Below is my codes.
<div id="left" style="position:absolute;top:0px;left:0px;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="position:absolute;top:0px;left:0px;width:60%;height:400px">Map goes here.</div>
<div id="details" style="position:absolute;top:400px;left:0px;width:60%;height:400px">Details</div>
</div>
<div id="description" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">
</div>
<div id="resource" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">
</div>
They are overlapping because you've given them all absolute position and left 0. Absolute position removes the element from the normal flow of the page and puts it exactly where you indicate using the top/left/right/bottom properties. They will overlap as long as they have the same parent and same position properties.
Absolute position and left being 0 is making them overlap.
Please use css
see solution : http://jsfiddle.net/thecbuilder/vZ77e/
html
<div id="left">
<div id="map">Map goes here.</div>
<div id="details">Details</div>
</div>
<div id="description">description</div>
<div id="resource">resource</div>
css
#left, #description, #resource{
display:inline;
float:left;
height:100%;
}
#left{
width:60%;
background:#e6e6e6;
}
#description, #resource{
width:20%;
}
They are overlapping because you are using position absolute. instead place the divs at the top of the html page and do this instead:
<div id="left" style="float:left;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="float:left;width:60%;height:400px">Map goes here.</div>
<div id="details" style="float:left;left:0px;width:60%;height:400px">Details</div>
</div>
<div id="description" style="float:left;width:20%;height:100%;background:#ffffff;">
</div>
<div id="resource" style="float:left;width:20%;height:100%;background:#ffffff;">
</div>
This will place the divs beside each other
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</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>