I have created a fiddle: http://jsfiddle.net/LgNp5/ .
As you can see there is a loader on the right hand side. The left hand side has a menu with dynamically changing content and as such the right hand side floating div does not have a fixed height (nor does the parent element). How can I make it so that the loader is always vertically aligned (without JS)?
This is easiest if the element you're vertically centering is a fixed height, that way you set top: 50%; and a margin-top: -Zpx where `Z is half the vertical height.
#ui-tooltip-prompt .dynamo_content {
float:right;
width:400px;
padding-left:8px;
position:absolute;
height:16px;
top:50%;
margin-top:-8px;
}
Related
DEMO HERE
I have two divs in a container. Both divs have 100% and 100% height. How do I position those divs side by side?
I tried float:left and display:inline-block but nothing seems to work. Second div is always under first div, not side by side
P.S. I don't want to use absolute position and I want one div overflown.
If both of them has 100% width you can't get the second one side by side. You should use "width: 50%" in those divs (I suppose they didn't have margins or padding), and then "float:left" the first one. The second one should go to the right of the first one.
If you want to add both div side by side you can not set div width 100%, you can set width 50% to check both are side by side without using display:inline-block
.innerDivs{
width:50%; // Change 100% to 50%
height:100%;
float:left;
}
Check this Demo
You should add overflow:hidden; property in outer div to solve this
Check this Demo
HTML
<div style="width:300px;height:100px;border:3px solid black;margin-top:100px;margin-left:100px;overflow:hidden;">
<div class="innerDivs" style="background:orange"></div>
<div class="innerDivs" style="background:red"></div>
</div>
CSS
.innerDivs{
width:100%;
height:100%;
float:left;
}
I have a problem with setting the appropriate text to the slider. I want the text to appear on the bottom right of the page. Only problem is the different resolutions (tablet, laptop, 24'' monitor).
Testing page: http://tinyurl.com/d825kuv
code:
div {
position:relative;
float:right;
vertical-align: bottom;
}
to move an element to the bottom of a <div>, set the parent <div>'s position to relative: position:relative, then the <div> you want to be placed at the bottom should have CSS
div {
position: absolute;
bottom: 0;
right:0;
}
then just adjust the pixel values to suit your layout.
Do:
position:absolute;
right:0px;
bottom:0px;
This will make sure that the element in question will be as far right, and as far down within the parent as possible. Of course if you wanted to pad it from the right/bottom just take the pixels up a notch. Note that position:absolute only works if the parent's position is not set as default. If in doubt give your parent the following style:
position:relative;
I have a 3 column table layout with the center column being position:relative;
inside the center column I have a form which needs to be position:fixed; (well, unless there is another way)
What I need is the form to have a liquid width when the browser widens, but it also needs to stick to the bottom of the page. So, if I use position:fixed; it stays at the bottom, but it overlaps the right sidebar. If I use position:relative; it stays between the sidebars like it should, but it scrolls with the page.
I made a little jsfiddle but it doesn't display fixed positioning. But you can see my code. http://jsfiddle.net/winchendonsprings/S5zkm/1/
Here you can see it overlap the right sidebar. http://i.imgur.com/awp07.png
#center {
padding: 0 15px;
background-color: green;
position:relative;
}
div.main {
position:absolute;
bottom:0px;
left:0px;
right:0px;
}
You can try that (absolute positioning within relative positioning parent).
Play with the top and bottom values to position it vertically.
(It should resize with the window horizontally).
Is that what you want?
I'm braindead on this and I know it's simple.
There's a header div, appears fine. There's a left-sidebar div, appears fine with top snuggled up to header div.
Then there's a main content div. There is an image and h1 which appear like you would expect up against the header div, but then a large gap appears until the navigation (in a nested div). Navigation is correctly in the main content div, but top of this div always aligns with bottom of sidebar content.
I've tried mixtures of clear:left and both and floating and whatnot. If inside the html I move the sidebar div below the main content div then the main content has no gap but the sidebar has a big top gap and appears flush to the bottom of where the main content nav ends.
What am I missing here, thanks in advance!
Are you setting any widths (or padding, margin, border) which might make your problematic div too wide to fit?
Remember that if you are doing something like :
width: 100%;
border: 1px solid;
Then your element will take up 100% width + 2 pixels.
It sounds like you have your sidebar occuring first in the source order.
If you have the two divs (sidebar, main) floated in different directions, then look at the width avaiable they are sharing. Reduce the width of one div (you should have width set on your floats) until their combine width, including padding, margin, borders fits in available space. (I will only use width in my example for brevity).
When this effect happens, in my experience, the one occurring later in the source order is the one that gets prevent from sliding up into it's spot by too much width.
<div id="container">
<div id="header">head</div>
<div id="sidebar">side</div>
<div id="mainContent">main</div>
</div>
Width of #sidebar & #mainContent too wide (#mainContent gets bumped down):
#container{
**width:950px;**
margin:0 auto;
background:blue;
}
#mainContent{
float:right;
**width:651px;**
background:red;
}
#sidebar{
float:left;
**width:301px;**
background:green;
}
Width of #sidebar & #mainContent fit inside container:
#container{
**width:950px;**
margin:0 auto;
background:blue;
}
#mainContent{
float:right;
**width:650px;**
background:red;
}
#sidebar{
float:left;
**width:300px;**
background:green;
}
btw...if you floated the two elements in the same direction, but their combined width is too wide, the last one in the source order would fit underneath the above floated element.
Does your h1 or img have a top margin? It will stick out of the top of the mainContent div and push it down.
I have a couple of Divs which I style using a class and an ID, he div's themselves are emtpy since they are only placeholders for their background. Example Div:
<div id='ranImg1' class='ranImg'></div>
Then I style them using this css:
.ranImg {
position:fixed;
z-index:0;
width:250px;
height:250px;
display:block;
}
#ranImg1 {
left:10px;
top:200px;
background-attachment:fixed;
background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
background-repeat:no-repeat;
}
As long as the Div is in the left top of the document the Image shows correctly but when the Div is placed somewhere else on the page the image stays (invisible) in the top left corner of the page showing only the part which overlaps with the div (in the example this would be the bottom part of the image).
EDIT
I'm trying to position these Divs without effecting my other layout, they are behind the other layout. This works except for the fact that the background image doesn't follow the divs position.
So basically my question is, why isn't the background for the ranImg1 div positioning with the div but stays in the left top corner, and how to fix this?
your background-attachment:fixed will attach the background image relative to the browser window. if you want it to "follow" the div position, just remove the line:
#ranImg1{
left:10px;
top:200px;
background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
background-repeat:no-repeat;
}
you could also set the background-position attribute to set the background relative to the containing div:
background-position: 0px 0px;
i'm not sure if that would help any beyond just removing background-attachment though (not enough coffee yet!)