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
Related
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.
I'm really working hard on this thing but I can't figure out how to create this through CSS.
Basically on this website here I'm trying to add images to go outside of the main-content background as you can see on this image below. Where it says "Lattest Lessons" (sorry for the typo) or where it says Receive our newsletter.
Does anybody have a club? I'm lost!
Here is some code:
.main-content {
position:relative;
z-index:100;
padding:1em 0 8.5em 0;
background:#fff;
}
.main-content p {
color:#555;
}
.site-wrap {
position:relative;
min-height:100%;
}
What I would recommend doing is creating a div in the background that looks like this:
HTML:
<div id="backgrounddiv">
</div>
So the HTML is really easy. Don't put anything in those divs. Now for the CSS:
CSS:
#backgrounddiv {
length:100%; //spans length of page
width:100%; //spans width of page
z-index:1; //makes sure background is behind all the other objects
background-color: #000; //black background
position: absolute; //isn't affected or doesn't get affected by other elements
}
What you're likely looking for is positioning the element correctly. This can either be relative or absolute positioning based on your needs. In either case, ensure that the PARENT container is a positioned element (in your example it is: relative)
See this fiddle:
http://jsfiddle.net/callseng/UUxqG/
The paragraph with class 'move-left' is housed inside of the main-content element, it is relatively positioned and then pushed to the left by 25px.
position:relative;
left: -25px;
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 a bizzare issue, I have a DIV that scrolls inside my page... But within that div I have 'header' that is FIXED.... and because my layout is fluid (100%) wide,it is making the "FXED" div cover over the scrollbars of the div below....
What is the best way to fix this? I have attached a simple screenshot of what's going on... hope it helps.
/* BLUE SECTION */
.floatingHeaderBox {
width: 100%;
}
/* RED BOX BELOW */
.contentBoxRight{
position:absolute;
width:80%;
left:20%;
height:100%;
background-color:#FFF;
border-left:1px solid #CCC;
margin-left:-1px;
}
.contentBoxRight{ overflow:auto; overflow-x:hidden; }
i think you can do it like this http://jsfiddle.net/yuliantoadi/bXukG/1/
i don't have your html, so i made it by my self.
If your floatingHeaderBox is inside your scroll box like this:
<div class="contentBoxRight">
<div class="floatingHeaderBox">Hdr</div>
</div>
You can just add a negative left margin to account for scrollbar. since x-overflow is set to hidden, you will not be able to tell that it moved. Add padding or a sub container to get your desired space back on the left side.
.floatingHeaderBox {
width: 100%;
margin-left:-18px;
}
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 */
}