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
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
This seems like it should be really simple, but I'm having a CSS moment..
One div, with three <a>'s in it, each of which have a display of inline-block and width of 33%. Why does the last one drop onto a new line?
Css
div {
width:100%;
background-color:pink;
}
a {
display: inline-block;
width:33%;
margin:0;
padding:10px 0px;
}
The result, which can be seen in this plunkr:
It's because of the whitespace between your <a> tags. If you put all of them on the same line, they will always fit. You can see the gap in the screenshot you posted. There is a space between the green and orange.
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 searched about the topics of how to float divs next to each other and tried those.
First let me show what I am planning to design
I have created content and sidebar and made the sidebar flow right. Again in my sidebar I am making the sidebar div 1 and sidebar div 2 to float side by side. In my CSS im making the sidebar div 2 to float right, it is floating right but exactly below sidebar div 1 as shown in below figure
I know this may sound simple, but still Im missing something important. Would be grateful if somebody points this out.
Here is the code for the sidebar and the divs
#sidebar {
width: 720px;
float: right;
margin: 60px 0 30px;
}
.div1{
width: 200px;
}
.div2{
float: right;
width: 300px;
}
Thanks
Raaks
This is typical float problem - float both divs left not right OR change the order - div2 before div1.
.div1{
width: 200px;
float:left
}
.div2{
float: left;
width: 300px;
}
and clear right after the divs.
Ok. So your 'div1' even with specific width will be displayed as block width inherited width and with clear both sides until you will not set it float too. Either set it display: inline[-block].
Like #Circadian said, hard to say without the HTML/CSS but try:
.div1{
float:left;
width:200px;
}
.div2{
clear:both;
float:right;
width:300px;
}
Using the 'clear' property allows you to clear out elements on the left, right or both.
Actually, if you float them left and right you may not need the clear property. If both are floated left and you want them to appear one below the other, the clear property should be used. Otherwise float both elements left and add a margin-right to the first div to add some spacing.
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 */
}