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.
Related
I have a div that is masked off in terms of its width. Inside, I have 2 divs of the same width floated, so 100% + 100%. This means that either the left is visible or the right is visible at any one time.
In fact, what I'm trying to achieve is almost exactly the same as this:
jquery slide div within a div
Just one difference though. The height of my parent isn't fixed, it's dependent on the child size. So when I apply position: absolute; to the parent, it all goes pear-shaped.
Any solutions to this? I can use flexbox if necessary as I don't support IE8/9.
CSS would be something like this
.outer-wrap {
overflow:hidden;
position:relative;
width:300px;
}
.middle-wrap {
overflow:hidden;
position:absolute; // this doesn't work because it has no fixed height
left:0;
width:600px;
}
.middle-wrap.open {
right:0;
}
.inner-wrap {
float:left;
width:300px;
}
HTML
<div class="outer-wrap">
<div class="middle-wrap">
<div class="inner-wrap"></div>
<div class="inner-wrap"></div>
</div>
</div>
Another edit: I created a codepen, it's here: http://codepen.io/anon/pen/oxwmex CLick on the two buttons on the far right, they switch between the states
As you noted, your solution doesn't work because .middle-wrap has no fixed height. Try it with the following settings (note: no floats, no absolute positions):
.outer-wrap {
overflow-x: hidden;
position: relative;
border: 1px solid red;
width: 300px;
margin: 0 auto;
}
.middle-wrap {
position: relative;
width: 600px;
left: 0px;
}
.inner-wrap {
display: inline-block;
width: 300px;
vertical-align: top;
}
This will display the left of the two .inner-wraps within the visible part of .outer-wrap. To make the right .inner-wrap visible apply something like
jQuery(".middle-wrap").css("left", "-300px")
to the element or event you use for switching between the two inner-wraps. Or if you want it animated:
jQuery(".middle-wrap").aminmate({left: "-300px"})
(Plus another method to switch back to left: 0px)
The heigth of all elements is automatically adjusted to the heigth of the higher of the two .inner-wrap elements.
P.S. (edit): Erase the style="height:100px;" settings from the inner-wraps in the HTML, just fill them with some content to see it working.
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.
I have web pages on http://rygol.cz/qlife/ and when I zoom out, the id="contacts" goes anywhere every iteration when I zoom out. I need something like
border: 0;
Because I need that text of will be every of bottom of
any ideas how to do that?
To align a div at the bottom of the content add {position: relative;} to the content div and {position: absolute; bottom: 26px;} to the div you want to align.
CSS:
#content-wrapper {
position: relative;
}
#leftcolumn {
padding-bottom: 110px; /* this will prevent the normal content in the left column to go under the aligned div */
}
#contacts {
margin-top: 0;
position: absolute;
bottom: 26px;
}
Demo: http://jsfiddle.net/NMDCF/
First of all, try to validate your HTML by using the following link : HTML Validation
try to fix those errors before trying to fix your id="contact"
as for the id="contact" use position:absolute or position:relative; that may solve your problem. if that did not work, use this display:block; or display:inline-block; both could help you achieve your goals.
The red footer gets up in the middle. How to make it keep it self at bottom? Like clear: both and overflow: hidden.
I have tried many things, is there something I am doing wrong?
Demo
The code is too large to be pasted here (30000 chars limit). Please, send me working fiddle.
update: it works now.
#footer {
position: relative;
height: 274px
bottom: 0;
margin-top: 274px;
}
You have
#footer {
margin:-274px 0 0;
}
Which is giving it a negative top margin and moving the footer up. Try removing that line. Though you may also need to tweak the content of the page. You should use the clearfix on the content so it doesnt go behind the footer.
Try this :
#footer {
position:fixed;
bottom:0;
}
clear: both is invalid with position: absolute elements, because they are out of the normal flow.
set a position: absolute; bottom: 0; style on the div.gallery element and it will be on the bottom of its container.
But it won't be enough for you, you should yet move your <div class="gallery"> to move out of its container div.
I'm confused here... Here's my site that I'm working on: http://s361608839.websitehome.co.uk/marbleenergy/
The div #main is sitting about 10px below #navigation and I've tried bringing it up 10px by adding:
#main {
margin-top: -10px;
}
Had no luck there unfortunately. I'm learning CSS here, what is it I need to do?
Thanks
using absolute positioning isn't so flexible since you're aligning your div's in hard pixel measure. This will probably cause some error on several browser
Use relative positioning instead, and use top attribute to lift that div up
this is the code
#main{ position: relative; top: -10px; }
Add the following to the #main div
#main {
position: relative;
top:-10px;
}
position: relative; Will position the element relative to where it normally sits and aligning -10px from where it would sit will bring it into the gap you have made in your menu div. Haven't checked your site but can't see any reason why this won't work. I prefer not to set my elements to position: absolute; as the above member answered as any content under the div will be pulled up under the absolutely positioned div.
As the other answer more clearly details, you need to make sure that positioning is absolute, in order for any 'px' CSS specification to make sense, if not, it defaults to relative (to nearest parent container) I believe.
USE
#main {
position relative;
margin-top:-10px;
}
See Demo: http://jsfiddle.net/rathoreahsan/fSDpJ/
I browse your website in your case you need to use the following css:
#main {
position absolute;
margin:-10px 0 0 12px;
}
OR
#main {
position relative;
margin:0 0 0 12px;
top: -10px;
}