I have a container: divA.
divB and divC are inside divA.
Both divB and divC are floated left, so they are side by side.
#divA
height:500px;
width:1000px;
#divB
width:200px;
height:100%;
float:left;
#divC
height:100%;
float:left;
width:????
I want divC to fill the remaining space of divA dynamically, i.e I need it to have a dynamic width. How can I do this?
P.S If I set its width to 100% it fills the entire divA. What I want is for it to fill the entire width of divA but minus divB.
Give overflow:hidden to your #divc .Write like this:
#divB{
width:200px;
height:100%;
float:left;
}
#divC{
height:100%;
overflow:hidden;
}
Check this http://jsfiddle.net/yY388/
Related
I'm trying to place a button on bottom right corner of a div which is scrollable.
Since it is a content editable div, when content in the div increases, scollbar appears and button gets hidden behind the scrollbar on IE.
How to fix this issue?
I made an example for you.
Wrap all in a container, and position the bottom in the wrapper
main{
width:500px;
height:300px;
position:relative;
}
div{
background:#fff;
width:500px;
height:300px;
overflow-y:auto;
padding:10px 20px
}
button{
position:absolute;
bottom:0;
right:0;
}
https://jsfiddle.net/8f0Loem5/
hope this helps
I am having problem understanding the height of element in div. I have a header div which has certain divs inside it.The div inside occupy certain height. Isn't the header supposed to cover the area occupied by the elements defined inside it when the height is not mentioned. As per my understanding the header is supposed to wrap all the div inside it.
Please correct me if I am wrong.
This is my body
<div style=" float:left; background-color:pink; width:20%; height:40px; ">
THis is left
</div>
<div style=" float:left; background-color:gray; width:70%; height:40px; " >
<div id="htop">
This is top
</div>
<div id="hbutt" >
this is buttom
</div>
</div>
And here goes style
#cont{ background-color:yellow; width:900px; height:300px; margin:auto; padding:40px; }
#header{ background-color:red; width:100%; padding:5px; }
#cont2{ background-color:blue; width:10%; height:auto; padding:5px; clear:both; }
#htop{ background-color:maroon; }
#hbutt{ background-color:purple; }
For output and possible change need https://jsfiddle.net/sum1/vmq3y2rv/
When you have floating DIVs inside any other DIV, then height does not calculated automatically for outer DIV, to make it you should add display:inline-block or display:table to outer DIV depending on your layout.
#header {
background-color:red;
width:100%;
padding:5px;
display:inline-block;
}
Check this https://jsfiddle.net/vmq3y2rv/1/
Yes this is true but when all elements are floated inside of the header it collapses.
.clearfix{
clear:both;
}
and then insert a div right before your header ends with a class of clearfix.
Jsfiddle is here
https://jsfiddle.net/kriscoulson/vmq3y2rv/2/
You can either use float:left or display:inline-block/table , It will be based on your requirements and layout.
I have a div that is centered using margin: 0 auto; display: table;. The div is 960px wide.
There is another div inside this one. It is a search box and it is left-aligned in the top corner. But I would like this div to be left-aligned to the very left side of the browser window, meaning it would be visually outside or inside the main centered div depending on the browser window size. Is there a way to achieve this in CSS?
here a fiddle: http://jsfiddle.net/skunheal/5qT3p/
this would be the code:
#container{
margin: 0 auto;
display: table;
width:400px;
height:300px;
background:#111;
}
#searchbox{
position:absolute;
height:20px;
width:100px;
background:#f1f1f1;
left:0px;
top:0px;
}
hope this solves your problem
Just use position:absolute; left:0px; on the search box. See my jsfiddl (the container ID has shrunk so that it could fit in the JsFiddle window, but the concept should be sound): http://jsfiddle.net/CQ9cc/.
I have left div fixed, and right div scrollable. I have applied height:100% on the right div,but it doesn't work, i made background of the div yellow,and when i scroll it disappears, like it doesn't extend like it should.
Here is my code:
#levi{
width:25%;
height:100%;
background-color:#f98765;
position:fixed;
left:0;
float:left;
}
#desni{
background-color:yellow;
left:25%;
height:100%;
position:absolute;
left:value;
float:left;
}
One method is to set the background color of your right column on the <body> tag. That way, the background color will appear to always cover then entire height of the scroll area.
This is commonly known as "faux columns".
body {
background-color:yellow;
margin:0;
}
#levi {
width:25%;
height:100%;
background-color:#f98765;
position:fixed;
}
#desni {
position:absolute;
left:25%;
}
Working Example (jsFiddle)
Updated Working Example (with OPs posted HTML structure)
jsfiddle
How to make 2nd div streatch to all its vertical place. It has to 'take care' of bottom margin of div above him and bottom margin of all the page. How to make it fill all that place? There will be normal content inside it, I will make page that will be scrolling horizontally and I need it to fit in various user Y resolutions. Bottom margin will be constant. I would really like to avoid js in that.
http://jsfiddle.net/Jf5J8/2/
#rest {
background-color:blue;
height:100%;
position:relative;
top:0;left:0;
bottom:0;right:0;
}
html, body {
height:100%;
}
Your code
#rest {
background-color:blue;
height:100%;
position:relative;
top:0;
left:0;
bottom:0;
right:0;
height:auto;
}
contains two time height. Remove height:auto; in the end