I need to position 2 divs alongside, first's width %20 of the page and second's width %80 of the page. I don't know which position I must give divs. Relative, fixed, absolute, inherit?
How can I do it?
You can write like this:
.firstdiv{
width:20%;
float:left;
}
.secdiv{
overflow:hidden;
}
Check this fiddle
Don't give any position to divs just use float:left; and set the width to 80%(or 79%) and 20% as usual
div_first
{
float:left;
width:79%;
}
div_second
{
float:left;
width:20%;
}
Related
How can I change this, so that the title Users and the Show entries are aligned on the same row. Users on the left and show on the right.
https://jsfiddle.net/PHPMickB/rbnd1yvh/1/
I tried putting them in the same div, then:
.dataTables_length {
float:right;
}
#table-title{
float:left;
}
But that didn't help.
To put the second panel along the right edge you can use position:absolute; Absolute positioning removes elements from the flow so no need to use display:inline-block like my previous answer. Just be sure to use position:relative on the parent.
.panel-heading{
position:relative;
}
#users_length{
position:absolute;
right:0px;
top: 5px;
}
here is a fiddle
I have a div fixed inside a relative one.
my problem is, the div fixed is bigger than the other, but they have the same size:
<div id=all>
<div id=top></div>
</div>
.
#all{
width:80%;
height:100px;
border:1px solid #000;
position:relative;
}
#top{
width:80%;
height:100px;
position:fixed;
background:rgba(255,0,0,.5);
}
https://jsfiddle.net/y7yc0n21/
I need div top to be fixed.
what is wrong? Why div top is bigger than div all?
The width of the fixed element is calculated in regard to the viewport width, whereas the one for the other is calculated in regard to the width of its parent element, which is body in this case.
And the width of body is different from the viewport width, because body gets a default margin and/or padding applied from the default stylesheet – so you are taking 80% of two different input values, and therefor the results are different as well.
Eliminate the default margin/padding for body, and the problem is gone:
body {
margin:0;
padding:0;
}
https://jsfiddle.net/y7yc0n21/2/
If you specify
body {
margin:0;
}
they will become the same width.
Also I think that is not what you want as fixed is calculated relative to viewport.
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
https://developer.mozilla.org/en/docs/Web/CSS/position
#all{
width:80%;
height:100px;
border:1px solid #000;
position:relative;
}
#top{
width:80%;
height:100px;
position:absolute;
background:rgba(255,0,0,.5);
}
If you give any element
position: fixed
it makes the element relative to the viewport instead of it's offsetParent. Therefore, the width of div 'top' is calculated 80% based on the width of the viewport and not on the basis of its parent div 'all'. So, your inner div has greater width than outer one.
I have a main div that it re-sizes with re-sizing window. I want to add 2 div inside the main div (float left and right). left one width is 165 and right one width is the rest size of main div. can I simply use something in CSS?
#leftDiv{
height:100%;
width:165px;
float:left;
background-color:#244378;
}
#rightDiv {
height:100%;
width:100% - 165px;
float:left;
background-color:#244378;
}
If you really want do it this way, you can use the CSS3 calc property, but keep in mind that this isn't supported in all browsers:
#rightDiv {
height:100%;
width:calc(100% - 165px);
float:left;
background-color:#244378;
}
No! you cannot use a value like "100% -165px".
Instead you can just remove "float:left" and "width:" from #rightDiv.
That should work for your case.
You have to remofe float:left from #rightDiv and set width to auto in this way:
#rightDiv {
height:100%;
width:auto;
background-color:#ff0000;
}
If you do this, the right div will always appear near the left div and will have a dynamic width.
Take a look at this: http://jsfiddle.net/b9BrB/1/
I have 2 divs. I want 1 div to be on the left side of my window and the other on the right side. I did this correctly with my logo and a little text next to it. However, under that I would like to have yet another 2 divs. I put those 2 divs in 1 div with style clear:both; this div lines up nicely under the two others. But once I do float: right; with the 2nd div, it goes outside the main div... Why?
The code:
(This should be lined up to the left)
#menu {
background-color:#485D9C;
margin-left:10px;
text-align:center;
width: 200px;
position:absolute;
float:left;
}
(This should be lined up to the right)
#content {
text-align:right;
width:600px;
position:absolute;
float:right;
}
(This is the div where both "content" and "menu" are in)
#middle {
clear:both;
border: thick solid;
position:relative;
}
Do you have an example ? With this little test: http://jsfiddle.net/BouFe/uHJQB/1/ it works !
Whenever I am using floats, I put a div, with "clear: both;" applied to it, inside of the container that holds the elements that have the float applied to them. An example of this can be found here, which I think is what you were looking for.
try placing an outer div and set the position: relative; and the inner elements mark their position as absolute
Don't know exactly what's going on without seeing your code, but I'm wondering if you're simply just no clearing your floats?
http://www.quirksmode.org/css/clearing.html
I have two floated collumns side by side. The user can hide/collapse one of that collumns. In that case I want the other collumn to expand to fit the entire container.
Is this possible with CSS?
In resume, it's possible to make a float to expand to the size of it's container?
Even if the element is floated, if it has width:auto it should expand. At least that´s way I think it should work.
Nup, I don't think the accepted answer actually works. I was just attempting the same thing, and this is the solution...
.left {
float: left;
}
.right {
overflow: hidden;
/* don't float this one */
}
Play around with the code here: http://jsfiddle.net/simoneast/qPHgR/2/
set overflow:auto; height:auto; for floatet element
:)
If your left column has an implicit size, say 250px and your right column is ONLY floated with no set size, then it should fill the container when the left column is collapsed. Code would be as follows:
#leftcol{
width:250px;
float:left;
clear:none;
}
#rightcol{
float:left;
overflow:hidden;
width:auto; /* This may or may not work */
}