Please help me with this
http://jsfiddle.net/5xXwQ/
<div id="parent">
<div id="banner"></div>
<div id="childsparent">
<div id="child">
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
</div>
</div>
</div>
#parent {
background: #CCC;
width:200px;
height:500px;
}
#banner {
width:200px;
height: 50px;
background: #ff0000;
}
#childsparent {
overflow:scroll;
}
I need to make it scrollable but parent div must be of its height for example 500px.
I know it works when there is only parent and child, but when there is multiple div it is overflowing div and scroll doesnt work. How to make this work?
First, I would put overflow:hidden; on #parent, but you will still have a really tall #childsparent. You have to restrict the #childsparent. If you know for certain the parent will be 500px tall and #banner will be 200px, then set:
#childsparent {
[...]
height:300px; /*or*/
max-height:300px;
}
If #childsparent were the only child of #parent then just #childsparent { ... height:100%; }. Otherwise, if you won't know the size of #banner then pull out some Javascript to do the math.
Here is updated jsfiddle with working example http://jsfiddle.net/5xXwQ/1/
#parent {
background: #CCC;
width:200px;
height:500px;
overflow: hidden;
}
#childsparent {
height: 500px;
overflow:scroll;
}
Adding height:450px; to #childsparent will give you the behavior you're looking for.
http://jsfiddle.net/5xXwQ/7/
#parent {
background: #CCC;
width:200px;
height:550px;
}
#banner {
width:200px;
height: 50px;
background: #ff0000;
}
#childsparent {
overflow:scroll;
height:500px;
}
Related
I have two divs inside a parent div.
both divs will occupy complete width of its parent.
first div has fixed height and I don't want to give height for second div, it should automatically occupy remaining height of the parent[I want to do this in css only].
below is jsfiddle link:
http://jsfiddle.net/x3ebK/3/
here is the html code:
<div id="content">
<div id="col1">content</div>
<div id="col2">content</div>
</div>
I need help in this.
I have updated the js fiddle below in below, I want "col2" to occupy remaining height of content div
http://jsfiddle.net/x3ebK/32/
It is convenient to use display:table rather than float like this:
DEMO : http://jsfiddle.net/x3ebK/28/
HTML:
<div id="content">
<div>
<div id="col1">content</div>
<div id="col2">content<br /><br /><br />content</div>
</div>
</div>
CSS:
#content {
height:auto;
position: relative;
width:300px;
background:#ccc;
color:#fff;
display:table;
}
#content > div{
display:table-row;
}
#col1 {
width: 30%;
background:#ff0000;
display:table-cell;
}
#col2 {
width: 70%;
background:#000fff;
display:table-cell;
}
You might want to read this article :
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
Hope this helps.
Is this what you are trying to achieve?
Have a fiddle!
CSS
html,body { height: 100%; }
#content {
height:100%;
position: relative;
width:300px;
float:left;
background:#ccc;
color:#fff;
}
#col1 {
width: 30%;
background:#ff0000;
float:left;
height:50px;
}
#col2 {
width: 70%;
float:right;
background:#000fff;
height:100%;
}
Try applying:
position: absolute; and height: 100%; to #col1
and
height: 100%; to #col2
Here is the updated fiddle: http://jsfiddle.net/nqYAp/
Try This#container{ height:100%}#col2{ height:inherit}
I'm trying to achieve the following layout:
Two side by side containers, the first container has a fixed width, second contaner stretches the entire length of the screen. The second container has a sub-container with a margin, that stretches the entire length of its parent container.
I've achieved this in the following way, but it looks clumsy and I think there's a better way, but I'm drawing a blank. Can you offer a better solution, if one exists?
http://jsfiddle.net/7Ack4/
CSS:
.c1 {
display: table;
width:100%;
height:40px;
border:2px solid black;
}
.c1> div:first-child {
display:table-cell;
width:100px;
background-color:blue;
}
.c1> div:last-child {
display:table-cell;
}
.c1 > div:last-child > div {
position:relative;
height:100%;
width:100%
}
.c1> div:last-child > div > div {
position:absolute;
left:5px;
right:5px;
bottom:5px;
top:5px;
background-color:red;
border-radius:10px;
}
HTML:
<div class="c1">
<div>
</div>
<div>
<div>
<div></div>
</div>
</div>
</div>
I don't think display: table-cell is right to go with here.
I used margin-left in combination with float property.
Check this fiddle
.c1 {
width:100%;
height:40px;
border:2px solid black;
}
.c1> div:first-child {
width:100px;
background-color:blue;
height: 100%;
float: left;
}
.c1> div:last-child {
margin-left: 100px;
height: 100%;
}
.c1 > div:last-child > div {
position:relative;
height:100%;
width:100%
}
.c1> div:last-child > div > div {
position:absolute;
left:5px;
right:5px;
bottom:5px;
top:5px;
background-color:red;
border-radius:10px;
}
It's crazy how much changes in 5 years. In case anyone finds this, here is the simplest solution as of April 2, 2020 - the year of coronavirus.
This is now all you need since flexbox arrived.
HTML
<div class="parent">
<div class="child-1">
</div>
<div class="child-2">
</div>
</div>
CSS
.parent{
background:blue;
padding:2px;
height:40px;
display:flex;
}
.child-1{
flex-basis:100px;
background:green;
}
.child-2{
background:yellow;
flex-grow:1;
}
Here's a codepen.
https://codepen.io/hundredbillion/pen/mdJgYja
I'm trying to fill remaning area of screen with the second div, div 1 and 2 got fixed width. How could i achive this effect?
HTML
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
Problem can be fixed by using this CSS code, when second div is set to auto it will fill remaning area left to be filled.
#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
float:right;
width:400px;
height:200px;
background-color: green;
}
#div3 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}
Edit
Classically, this would look like this:
CSS:
#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}
#div3 {
float:right;
width:400px;
height:200px;
background-color: green;
}
HTML:
<div id="div1"></div>
<div id="div3"></div>
<div id="div2"></div>
DEMO: http://jsfiddle.net/NicoO/5AJkn/
P.S: expand your screen > 800px to prevent the layout from breaking. Could also be solved by adding a min-width to a new parent element.
If your browser support calc, you coudl try:
#div2 { float:left; width:calc(100% - 800px); height:200px; }
Add the margins too, if any.
<style>
.box{display: table;width: 100%;}
#div1{width:400px; height:200px;background: #000;display: table-cell}
#div2{width:auto; height:200px;background: #e6e6e6;display: table-cell}
#div3{width:400px; height:200px;background: #000;display: table-cell}
</style>
<div class="box">
<div id="div1"></div>
<div id="div2">ds</div>
<div id="div3"></div>
</div>
It is the same questions that :
Positioning two divs, one with fixed width(left div) and other in percentage(right div)
Two divs side by side, one with google map and second with fixed width
This Codepen fix your problem
Apply position: relative for their parent (if it is not positioned already) and
apply the following to div2:
#div2{
position:absolute;
left:400px; /* width of div1 */
right:400px; /* width of div3 */
height:200px;
}
JSFiddle
You can use css3 calc() function if older browser support is not an issue.
#div2{
display:inline-block;
width: calc(100% - 800px); /*100% - width of div1 and div3 */
height:200px;
}
JSFiddle
I want to position first div to top-left of parent div and second div to bottom-right of parent div . Here is my code !
<div class="parent">
<div class="tl">TopLeft</div>
<div class="br">BottomRight</div>
</div>
Here is my css ,
.parent
{
width: auto;
height:300px;
background: Black;
}
.tl
{
width:100px;
height:40px;
background:Aqua;
}
.br
{
position:absolute;
width:100px;
height:40px;
right:0;
bottom:0;
background:Aqua;
}
By my code , the topLeft div is in the correct position , but the bottom-right div is outside of parent div . Want to know what I need in my code !
Here is Fiddle !
You need to set the parent element's position property to relative. That will make the children position themselves correctly in relation to the parent rather than the document.
.parent {
...
position: relative;
}
Example: http://jsfiddle.net/grc4/dQCpy/1/
.parent
{
width: auto;
height:300px;
background: Black;
position:relative;
}
Parent must have a relative position.
<style>
.parent{
background-color: yellow;width: 500px;
}
.tl{
background-color: yellowgreen;float: left;width: 200px;
}
.br{
background-color: wheat;float: right;width: 100px;
}
.clr{
clear:both;
}
</style>
<div class="parent">
<div class="tl">TopLeft</div>
<div class="clr"></div>
<div class="br">BottomRight</div>
<div class="clr"></div>
</div>
Here is my HTML:
<div id="container">
<div id="left-container">
</div>
<div id="right-container">
</div>
</div>
The container is 100% height (I checked it with Firebug). But the #left_container needs to be 100% too and it isn't!
Below is my CSS and a screenshot. The yellow should be 100%. Yellow is the background of the #left-container
html, body {
height: 100%;
}
#container {
position:relative;
margin: 0 auto;
width: 100%;
height:100%;
height: auto !important;
min-height:100%;
background: #fff;
}
#left-container {
width: 300px;
background: #ff0;
height:100%;
height: auto !important;
min-height:100%;
}
This article discusses both the issue and solution in detail:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
This might help too:
<style>
#outer {position:absolute; height:auto; width:200px; border: 1px solid red; }
#inner {position:absolute; height:100%; width:20px; border:1px solid black; }
</style>
<div id='outer'>
<div id='inner'>
</div>
text
</div>
See here for more details on the above:
How to make a floated div 100% height of its parent?
The best way to approach this problem is to think outside the box a little. There's no reason that both containers need to stretch to 100% if you're just concerned about the background stretching for both of them. There's a really simple technique called Faux Columns in which you combine the backgrounds for both sidebars into one single background image, and set the main container's background to that image. When a longer sidebar stretches the main container, it brings down the background for both sidebars.
<style>
#outer-container {
height:200vh;
width:100%;
position:relative;
background-color:orange;
}
#left-container{
position:absolute;
width:100%;
height:100%;
background-color:blue;
}
</style>
<body>
<div id="outer-container">
<div id="left-container">
</div>
</div>
</body>
You should be able to use just
margin:0;
padding:0;
height:100%;
For the conatainers to get what you want.