Hi stack overflow community. I have 2 dynamic divs that I want to float right inside a container. But I want the last div on the HTML to be more on the right than the first one. My problem is that I can't change the HTML, only CSS.
This will be used for navigation between pages, so I can have both divs visible or only one. Even if I only have one div, it has to be aligned to the right of the container (that's why I wanted to use floats).
Here's a jsfiddle for you to understand better: http://jsfiddle.net/Cthulhu/yVCDZ/1/
I want "Next" to appear after "Previous". Thanks in advance.
Instead of float, use display:inline-block; and set the container's text-align:right;
I updated your fiddle: http://jsfiddle.net/mestekweb/yVCDZ/2/
That should get you started, at least.
ps - You will probably have problems with IE <8. I can offer some assistance there as well, if you need.
Quick update using positioning:
#container {
width:300px;
height:70px;
border:1px solid black;
position: relative;
}
#previous {
width:70px;
height:70px;
background:gold;
position: absolute;
right: 70px;
}
#next {
width:70px;
height:70px;
background:lightblue;
position: absolute;
right: 0;
}
As per i understand may be that's you want. You can use direction with display:inline-block;
Check this http://jsfiddle.net/yVCDZ/3/
& there is an other alternative which work in all browsers
Check this http://jsfiddle.net/yVCDZ/8/
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.
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 need to center a forward and back arrow on either side of an image within a larger div. The div's width and height vary according to the size of the image.
I have a live version of my work so far here: http://danapaigetrentlage.com/cfsa-comps/lff-aboutgoods.html
And here's a jsfiddle to play with: http://jsfiddle.net/thwackukulele/4zHyd/
Though I don't know how much use that will be without the images linked in.
You'll see the forward and backward arrows are at the top of the blue area to either side of the image. I want them to be centered horizontally and vertically within this blue area.
I know that I am using a lot of positioning, and if there's an all around better way to attack this layout, please let me know. This is the best I could come up with. I am eventually handing these layouts off to a developer who is adding database CMS functionality. So my code doesn't need to be perfect, it just has to illustrate my intentions so that he can understand.
Thanks for any help in advance!!
.framewrap-fb{ position:relative; }
.rightarrow, .leftarrow{ position:absolute; top:50%; margin-top:-32px; width:64px; height:64px}
.leftarrow{left:0}
.rightarrow{right:0}
Not sure I understand the question, thats alot of code to read through, maybe only post the code on the focus area.
Try:
.wrapper{
position:relative;
}
.left_arrow{
position:absolute;
left:0;
top:50%;
}
.right_arrow{
position:absolute;
right:0;
top:50%;
}
The solution is to absolute position the links to the div at 50% top and margin-top of negative half of the height of the link so:
http://jsfiddle.net/elclanrs/JKqnm/
html:
<div>
<img />
<a id="next"></a>
<a id="prev"></a>
</div>
css:
div {
position: relative;
height: 300px; /* Set size */
width: 500px;
background: blue;
}
#prev, #next {
position: absolute;
width: 24px;
height: 24px;
top: 50%;
margin-top: -12px;
background: red;
}
#prev {
left: -48px;
}
#next {
right: -48px;
}
Can anyone tell me what I need to do in order to get the following page to center the contents correctly?
I've been trying to work with something else I used earlier in the day from here:
#divWrapper {margin:0 auto; text-align:center;}
#div {text-align:left;}
But this isn't working for me. One of the pages I need help with is here:
REDACTED
Thank you for any help, I'm just trying to get this fixed before I can head off to bed :\
#main-inner {
position: relative;
width: 960px;
border-top: 3px solid #DADADA;
margin: 20px auto 0;
overflow:auto;
zoom:1;
}
try this one. replace the existing with this. it should center the content.
It needs a width! to work correctly.
Give your #divWrapper a width. By default the width will expand as far as the containing element, so to create the appearance of it being centered, its width needs to be less than its containing element.
You can only center elements with margin:0 auto when you provide a fixed width from which the margins can position themselves from automatically. So add a fixed with to your wrapper and it should work.
You might also need to specify text-align:center; if you want the actual div contents centered.
Try this #divWrapper {margin:0 auto; text-align:center;width:960px}
#div {text-align:left;width:500px}
Edit:
There are typing mistakes in your CSS.
Check this updated CSS for margin-inner & margin-inner-right. It will fix your problem
#main-inner {
float:left;
position:relative;
width:100%;
border-top:3px solid #dadada;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
#main-inner-right {
position:relative;
width:640px;
text-align:left;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
Here are two cases:
Expected behaviour: http://jsfiddle.net/Xm2eR/7/
Inconsistent behaviour: http://jsfiddle.net/Xm2eR/1/
How can I make the second example work like the first one and why is this difference?
Conclusion
I set up a fix width for the parent.
Using absolute position with body as the parent is really tricky ( when you get to the edges )
You need to simplify your code. All you need to do is set the float:left; for the inner elements and the positioning in the parent element. See this example: http://jsfiddle.net/Xm2eR/30/
#menu {
border: 1px solid red;
position:absolute;
left:100px;
}
.inner{
border:1px solid black;
float:left;
padding:10px;
}
The reason your code didn't work is because the left:800px was so big it the inner elements didn't have any room to float into. This can be fixed by setting a width or by ensuring that the left adjustment has enough room to float into.
#menu {
position: absolute;
left:900px;
border:1px solid black;
height:40px;
width:24px;
}
give the #menu div some fixed width, if it's possible
how about not floating the internal divs, but instead making them inline-blocks, would that work for your use case?
example jsfiddle here
if this works you will need a small workaround for IE7 and below, and will somehow need to give IE the rule #menu div {display: inline;} after the inline-block rule