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 */
}
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 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/
this is more of a mathematical question than a programming question, but here goes:
I have a container div that is 100% wide.
Within, I have two floated divs. The left div is 66% wide and floated left. The right div is 30% and floated right.
I have an h2 element within the left hand div and I'd like it to extend beyond the constraints of its parent and extend to the far right edge of its parent.
What is the formula to figure out the percentage width of the h2 element, if its parent is 66% of the top container.
I currently, through trial and error, have it set to 151.5%, but I hate that it's just an eyeballed guess. I'd really like to know how you would figure out the correct percentage.
Since it is a responsive design, I can't use a fixed dimension, it has to be percentage.
You can more easily place your <h2> in an absolute position like so
h2 {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
and then add position: relative; to your left column. But this will work well if you only have one tag in that column. Otherwise you'll need either to do some more math when you're trying to place other <h2> elements or use javascript to calculate the width of the bigger container
Never mind, figured it out. 100% (container width) divided by width of left div (66%) = 151.515152
My mistake was rounding my css percentages to 66% instead of 66.66666667%.
Thanks for all the help
If I understand correctly this is the solution to your problem: http://jsfiddle.net/pgJeC/1/
NOTE: Colors are set only to show the layering
.id1 {
width:66%;
float:left;
background:maroon;
}
.id2 {
width:30%;
float:right;
background: green;
}
h3 {
color:red;
width:100%;
white-space: nowrap;
display:block;
}
So using PHP I am displaying a page of images. I have a div tag for containing these pictures.
What Im trying to do, is alternate positioning these images on the left and right side of the browser.
So entry 1 is positioned on the left
scrolling down
entry 2 is positioned on the right
etc.
If my div container is style="position:relative;width=100%"
How do I make my images alternate hugging the left and side of the browser?
There are several possible ways, one would be the following:
CSS:
div img{
float:left;
clear:both;
}
div img:nth-of-type(2n){
float:right;
}
Check the Example
If you dont want them alternate that way, use
div img{
float:left;
clear:left;
}
div img:nth-of-type(2n){
float:right;
clear:right;
}
Depending on the browsers you have to support (Internet Explorer 8 and lower don't support that selector), use a class on all even images and replace :nth-of-type(2n) with that class.
for the left-huggers:
style="float:left;clear:left;"
and for the right-huggers
style="float:right;clear:right;"
...though if your container is not wide enough to fit more than 2 images across, you won't need the "clear" declarations.
Set float: left; when index%2 == 0 and float: right; when index%2==1
index being an index variable of a loop iterating over your images.
In a similar vein to the other answers
div img:nth-child(even) { float: right; clear: right; }
div img:nth-child(odd) { float: left; clear: left; }
Demo: http://jsfiddle.net/GL667/
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