Is there a way, by default, to right-align a child div that is position: absolute just using CSS. I know I can make it align to right using JavaScript.
Use right: 0px as shown in this jsFiddle http://jsfiddle.net/DayE3/
I think it should work for you -
parent-div-css { overflow: hidden; }
child-div-css { clear:right; float:right; }
Related
Referring to this website – www.mrandmrsbutt.com – I'm trying to position the 'Upwaltham Barns' graphic at the bottom centre of the viewport, so no matter what size the viewport is the graphic will move with it and stay at the bottom.
I've tried adding the following custom CSS into my WordPress site, but it doesn't seem to work:
.fix{
position:absolute;
bottom:0px;
left:50%;
}
<img src="http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/banner-cta.png" class="fix"/>
Here is all my custom CSS at the moment:
#site-header.overlay-header{background-color:#fff;}
.menu-item a span:hover{color:#dfb5a9;}
#main-banner{
background-image:url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/Top-Banner-Background.jpg);
background-size:cover;
background-position:center center;
height:100vh;
}
.centre{
display:inline-block;
text-align:center;
}
#navigation-bar{
background-image:url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/navigation-background.jpg);
background-repeat:repeat-x;
height:48px;
}
p{margin-bottom:10px;}
.paper-background{
background: #fff url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/white-background.jpg) repeat top left;
}
Can anyone help?
You don't want position: fixed;, you're on the right path using absolute.
The problem is that the parent divs of what you're targeting aren't all 100% height of the viewport. You've set the outer-most parent to height: 100vh;, but it really needs applying to the inner .vc_column_container container (as it's using bootstrap based styles, and BS columns get position relative) - so your down arrow and graphic are being positioned based on that.
Try something like this:
#main-banner .wpex-vc-columns-wrap .vc_column_container {
height: 100vh;
}
#main-banner .wpex-vc-columns-wrap .vc_inner::last-child {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2.5%;
}
That should get you closer to what you're aiming for, be sure to include all vendor prefixes with transform, however if you're using something like Autoprefixer or Bourbon you'll already have this covered...
There's some "custom" styles in there I'm guessing you've added from a page-builder that might mess the position of the graphic/arrow up, remove the unnecessary padding if it's bugging out.
Good luck with the wedding :-)
I think you need to change position:absolute to position:fixed in the .fix rule
.fix{
position:fixed;
bottom:0px;
left:50%;
}
This should send your graphic to the bottom of the viewport and left there even scrolling. The horizontal center could be a bit tricky, but you could try to use a fixed container with left and right set to 0.
.fixed-container{
position:fixed;
bottom:0px;
left:0;
right: 0;
}
The previous rule sets the container to the bottom of the viewport and extends horizontally.
img.centered {
margin-left: auto;
margin-right: auto;
display: inline-block;
}
This rule is applied to the image to achieve centered alignment inside the container.
HTML code:
<div class="fixed-container">
<img class="centered" src="..image..." />
</div>
I think this should do the trick.
Here's a code snippet: http://dabblet.com/gist/8673746
I want to position .sign at the middle between the right edge .op1 and the left edge of .op2 without using JavaScript.
Also, the plus signs need to be aligned.
An option is to set text-align:left on .op1, but I'd rather have it be right aligned.
Is it possible using CSS only?
Maybe using position:absolute too:
.sign
{
position:absolute;
left:50%;
padding:10px;
}
Check this http://dabblet.com/gist/8674039
Another thing you can use to complete this is set just padding top-bottom like this
http://dabblet.com/gist/8674139
like this?
.container > * {
display: inline-block;
text-align: center;
vertical-align: middle;
width: 100px;
}
HI hope someone can help answer my question its really starting to bug me!
The site is here http://www.calypsopretattoo.com/
When you click on the about tab the information comes up but a margin on the right hand side of the page appears and creates a massive white space?
I've tried editing the css a number of times but nothing. any ideas??
#aboutp
{
width:100%;
}
causes the issue..remove it...:)
Remove width:100%; form #aboutp ID this will work
the parent div miss a position relative.
you use position absolute without using position relative to parent div
div {
height: 900px;
width: 1000px;
overflow: hidden;
margin-right: 0px;
position: relative; /*add to inline style or make a class for this parent div*/
}
OK there is an image in a centered div, which is placed at the center of a page. Its width is 400px.
What I'm trying to achieve is:
to place another div - inside of that div with alignment right via CSS.
Due to various screen resolution, I wish to avoid commands "top:, right:".
How to achieve that?
<div class="non"><div class="info">Go top right</div><img src="images/top.jpg"></div>
CSS..
.non { width:400px; background-color:#d20000; }
.info { position:absolute;float:right; background-color:#efefef; }
Example here
Just do this, it should work:
.non { width:400px; background-color:#d20000; position: relative; }
.info { position:absolute; top: 0px; right: 0px; background-color:#efefef; }
I know you want to avoid using top and right, but if you do this, the .info class is positioned perfect top right corner of the .non class div, not the whole page :)
I'm afraid I don't really know how to do this save for float: position or right: 0. I managed to achieve what you want using two positions.. relative of the containing div, and absolute of the inner div:
.non {
width:400px;
background-color:#d20000;
position: relative;
}
.info {
position:absolute;
background-color:#efefef;
right: 0;
}
Other than that, as #HashemQolami has said, just remove the position: absolute from your code, and it works fine.
I feel like I am missing something easy or stupid. This is the only element on my page that I can't seem to center. I cannot seem to centerul#footer.
http://jsfiddle.net/w67rt/
To center the footer contents horizontally, just add the following CSS:
#footer {
text-align: center;
}
Demo: http://jsfiddle.net/mathias/GZ6xh/
If you’re looking to center the entire element, just give it a width and then use margin: 0 auto:
#footer {
width: 400px;
margin: 0 auto;
}
The width of ul#footer is undefined, so it uses the default width of "100%". I tried using width:261px, and then it does center.
I find two solutions:
both here, one is commented:
http://jsfiddle.net/AzNqm/
define width of ul, and center block with margin:auto
center inner li elements
Effect will be the same.