Here's what I am trying to accomplish...
"parent" has position:relative
"div 1-3" have position:absolute
However, whenever I do this, I find myself having to assign specific "top" values in my CSS. So div 1 might be top:50px, div 2 would be top:150px, and div 3 would be top:225px;
Is there a way to make sure the divs continue to stack inside the parent without assigning top values and/or absolute positioning?
A div should already display as a block and take up a full "row". Here is some HTML and CSS to give an example, compare it to your code:
http://jsfiddle.net/mWcWV/
<div id="parent">
<div class="child">Foo</div>
<div class="child">Bar</div>
<div class="child">Baz</div>
</div>
Should be straight:
HTML:
<div class="container">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
CSS:
.container {
position: relative;
width: 500px;
height: 500px;
background-color: #ffbf00;
}
.red {
background-color: #f00;
width: 200px;
height: 150px;
margin: 5px auto;
}
.blue {
background-color: #0f0;
width: 200px;
height: 150px;
margin: 5px auto;
}
.green {
background-color: #00f;
width: 200px;
height: 150px;
margin: 5px auto;
}
Check this fiddle.
In css file use...
div
{
display : block;
}
Which will give a break line for each div block and that feature is by default and don't use relative - absolute technique.
Div elements are block elements, which means that they will take a full row and that any element next to them will skip a line.
Just do:
<div></div>
<div></div>
<div></div>
If that does not work, you probably need to put them in display: inline-block;
Just remove absolute positioning. Center the divs using margin:auto and then provide whatever vertical margins you like.
You can give margin to inner div.
Related
I have a div "container", say 400px width, with a left-floated divs inside — "box" 100px width. There are six of "box" divs so their summary width is larger than 400px which causes that line of divs to get wrapped and I get two lines, with 4 and 2 elements each. How can I make these 6 divs go in one row, one line instead of two?
You simply need white-space: nowrap on the parent element with display: inline-block on the children. Live demo here (click).
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
css:
.container {
width: 400px;
background: black;
white-space: nowrap;
overflow: scroll;
}
.container > div {
height: 50px;
width: 100px;
background: #555;
display: inline-block;
margin: 10px;
}
Assuming you continue using float: left;... If your container has a set width of 400px, then your total sum of children divs can't surprass 400px wide either. This includes any padding, margin, or border space as well.
To answer your question simply, there are several ways...
Make the container 600px wide instead of 400px...
Make the child elements 66px wide instead of 100px...
A better option is to use percentages...
Make the child elements 16.666667% wide.
You need to give display: inline-block to the children of container and also give white-space: nowrap to make them flow horizontally. Here is the CSS
#Container {
width: 400px;
border: 1px solid black;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inside {
width: 100px;
height: 300px;
border: 1px solid black;
display: inline-block;
}
and HTML
<div id="Container">
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
</div>
Here is the fiddle for your problem http://jsfiddle.net/sgaurav/vZLWQ/
hope it will help you
display:inline-block;
I'm stuck with this problem:
I have a div (#container) which contains two divs. The height of the container should be exact 100%, regardless of the content of this div - not less not more.
Inside this div I want two full-width divs on top of each other:
The (#upper) div's content automatically determines its height.
The (#lower) div's content should be scrollable, but only vertically. Its height is dependent on the height of (#upper): 100% - (#upper)height = (#lower)height
Currently I have the following css ...
body {
margin:0;
padding:0;
}
#container
{
position: relative;
width: 500px;
height: 100%;
max-height: 100%;
background-color: #f00;
}
#upper {
width: 100%;
background-color: #0f0;
}
#lower {
width: 100%;
background-color: #00f;
overflow: auto;
}
... as well as this code:
<div id="container">
<div id="upper"></div>
<div id="lower"></div>
</div>
How can the (#container)'s height be exactly 100% - independent of its content? Now the height becomes larger because of the combined content of (#upper) and (#lower)?
How can (#lower) be scrollable (only up and down, not left to right!)?
Thank you very much for your feedback, I hope we can all learn from this.
You should set your html and body elements to have a height of 100%, so your children divs know what to base the percentage off of. Like so:
html, body {
height:100%;
width:100%;
}
Change your container to this:
#container
{
width: 500px;
height: 100%;
background-color: #f00;
}
As for your scrolling issue, you're almost there. Change the code to the following:
#lower {
width: 100%;
height:100px;
background-color: #00f;
overflow-y: auto;
}
For it to work best, have a fixed height set on your lower div and that'll make it easy for the scrollable action to work best.
EDIT:
I realized I mis-read your question. You'd like to have your lower div fill the remaining height of the window. Here's how to do that in jquery:
var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top);
$('#lower').height(remaining_height);
I still haven't found a way to do that with only CSS... Sadly.
I think this may help you:
<head>
<title></title>
<style>
.upper{
height:50px;
border: 1px solid groove;
}
.lower{
height:calc(100% - 50px);
border: 1px solid blue;
}
</style>
</head>
<body>
<div style="height:500px; border:1px solid red; position:relative;">
<div class="upper"></div>
<div class="lower"></div>
</div>
</body>
This will take 50px out the lower div
For a pure CSS solution, use display: table-row.
<style>
*{
box-sizing: border-box;
margin:0;padding:0;
}
html, body, #container{
height: 100%;
}
#container{
display: table;
height: 100%;
}
#upper, #lower{
display: table-row;
}
#upper{
height: 100px;
}
</style>
<div id="container">
<div id="upper">bla</div>
<div id="lower">bla</div>
</div>
This solution only works if the height of the content is not more than 100%, see here: https://stackoverflow.com/a/13668087/603569
Here a 100% css alternative:
<div style="height:100%;">
main div
<div style="height:100%;padding-bottom:200px;">
header div
</div>
<div style="position:relative;height:200px;top:-200px;">
footer div
</div>
</div>
Remember that all parent elements, including body and html, must have their height set too.
I have a very simple structure:
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">
Not much content, but needs to be stretched to the end.
</div>
</div>
The parent div has a set height, and I want div.stretch to stretch all the way to that height, regardless of how little content it has. Using height: 100% does the trick, until you add some other element which pushes the content down.
I guess that specifying height: 100% means that the element should have the exact same absolute/computed height as the parent element, and not the remainder of the height after all the other elements have been computed.
Setting overflow: hidden obviously hides the overflowing content, but that's not an option for me.
Is there any way I can achieve that in pure CSS?
Demo of my problem
In the time since this question was asked and answered, a better way to achieve this has come into existence: flex-box.
Just set the parent's display to "flex" and flex-direction to "column", and set the "stretchy" child's height to "inherit". The child will inherit a height of however many pixels are left over to fill up its parent.
In the following example, lines marked /* important */ are part of the actual solution; the rest of the CSS is just to make it visually easier to understand.
.parent {
display: flex; /* important */
flex-direction: column; /* important */
height: 150px;
border: 6px solid green;
}
h1 {
background: blue;
margin: 0px;
height: 90px
}
.stretch {
background: red;
height: inherit; /* important */
}
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">
Not much content, but needs to be stretched to the end.
</div>
</div>
You could float the h1 element. It would work no matter what height it is, and the content of the stretch element will be pushed below it. But I'm not entirely sure if this is what you are looking for.
EDIT: I'm not certain what kind of browser support you're looking for, but you could also set the display to table on .parent and then have .stretch inherit the height. Then you can nest the column divs inside of .stretch and float them.
Updated: http://jsbin.com/oluyin/2/edit
HTML
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">
<div class="col">Not much content, but needs to be stretched to the end.</div>
<div class="col">Not much content, but needs to be stretched to the end.</div>
</div>
</div>
CSS
.parent {
display: table;
}
.stretch {
height: inherit;
}
.col {
float: left;
width: 50%;
}
If you know the height of your H1 you can do this to fill out the child:
.parent {
background-color: #eee;
border: 1px solid black;
width: 300px;
height: 600px;
position:relative;
}
h1 { Height: 100px; }
.stretch
{
background-color:#dddddd;
position: absolute;
left: 0;
width: 100%;
top: 100px;
bottom: 0;
}
Example: http://jsbin.com/apocuh/1/edit
If you don't know the height of H1, I'm afraid you will probably need to use JavaScript or thgaskell's method.
Take a look at this post for more information, and an example with JS: CSS: height- fill out rest of div?
Maybe using display:table properties fits your needs ?
Edit: This answer actually looks like thgaskell's one, but instead of using floats I use table-row and table-cell display, and it seems to achieve what you are looking for.
Here is the jsfiddle : http://jsbin.com/ebojok/17/edit
.parent {
background-color: #eee;
border: 1px solid black;
width: 600px;
height: 600px;
display:table;
}
h1{
display:table-row;
width:100%;
}
.stretch{
vertical-align:top;
display:table-cell;
height:100%;
background-color: #ddd;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">Not much content, but needs to be stretched to the end.</div>
</div>
</body>
</html>
CSS
.parent {
background-color: #eee;
border: 1px solid black;
width: 300px;
height: 600px;
position:relative;
}
.stretch {
background-color: #ddd;
height: 100%;
position: absolute;
top: 0;
}
http://jsbin.com/amesox/1/edit
This will cover your h1 element as the .stretched goes over it. You could get around this by using z-index: 1; on your h1 element, but I'd advise against it if you want text in your .stretched element.
You need position:relative; on your parent div to give position: absolute something to 'hook on' to. absolute positioned elements, ignore other elements and are placed on top of them unless their z-index is higher or they are its children.
I got a problem with CSS styling of a page.
Basically I have a div that will be used as a dialog in which I'd like to organize the content in 2 columns: the first one could contain a long list of elements, and should be scrollable, the second one should be small and in a fixed position. Thus I don't want all the dialog content to be crollable but just the half of it.
I put toghether an example here on jsfiddle in case you need to do some try... the code is:
CSS
#container {
border: 1px solid black;
height: 200px;
}
#main {
display: table;
border: 1px dashed blue;
height: 200px;
}
#row{
display: table-row;
height: 200px;
}
#leftPanel{
display: table-cell;
width: 50%;
height: 200px;
overflow: auto;
border: 1px dotted red;
}
#rightPanel{
display: table-cell;
width: 50%;
vertical-align: top;
height: 200px;
}
HTML
<div id="container">
<div id="main">
<div id="row">
<div id="leftPanel"> <!-- This one should be scrollable -->
<!-- Long list of element here-->
</div>
<div id="rightPanel">
<div style="height: 50px;">
Something here
</div>
<div style="height: 50px;">
Something else here
</div>
</div>
</div>
</div>
</div>
How can I get leftPanel to be scrollable?
As you can see I tried even setting a fixed height of every component of the CSS table, but without any result... what's wrong here?
Like this: http://jsfiddle.net/Zw8WK/10/
Using overflow-y: scroll or alternately overflow : scroll
Now if you need the height of the left column to be some kind of variable height it might be more tricky, here I am setting it to the height of the parent container.
I have a collection of divs being brought into a parent div (which is inside a popup container) dynamically. Sometimes there's only 1 and sometimes there are 6. For anything over 3 child divs, I want the parent to have a scroll bar HORIZONTALLY. The problem is that the child divs wrap instead of continuing on.
The following actually works:
<div class="container">
<div class="parent-container">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</div>
.container {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #0486A0;
border-radius: 10px 0 0 10px;
display: none;
height: 450px;
min-width: 300px;
position: absolute;
right: 315px;
top: 407px;
z-index: 2000000;}
.parent-container{
float: left;
max-width: 670px;
overflow: auto;}
.parent {
display: block;
width: -moz-max-content;}
.child {
width: 200px;
float: left;
}
BUT
Notice the -moz-max-content! I can't use this because it only works in Firefox. Max-width doesn't work either.
TL;DR: Is there a workaround for moz-max-content so I don't have to specify a fixed width on my parent div?
You might be interested in the overflow-y: scroll css rule.
More info here.
shouldn't be a problem
your container should have a maximum width say 800px (set overflow: auto;)
i'd suggest having another div "childContainer" to contain the child divs
when a child is successfully loaded (on $.ajax.success), use jquery to update the width of #childContainer (something like)
$("#childContainer").width($("#childContainer").width() + $(child).width());
but you'll have to track the number of divs you have loaded. but it will allow you to dynamically size a div within the container