I am trying to bring the .day_line columns on the bottom of .lines_container. I tried to set extra .lines in the .day_line colmn and give them
position:absolute;
bottom:0
and to parent
position:relative;
but it doesn't push the lines on the bottom...
Any reason/solution?
My codes here http://jsfiddle.net/BqDfn/
Thnx!
If the container is going to keep that fixed height, you could do this:
.day_line {
height: 100%;
}
I didn't understand your question very well, but i guess you want those strips to go all the way down, if so set the Height: 100%
.day_line{
float:left;
margin-left:50px;
position:relative;
width:10px;
height:100%; // Changed to 100%
background:red;
overflow: hidden;
}
Related
I have a situation kind of like this =>
https://codepen.io/anon/pen/pQpLqY
since my #sub-header-content has no fixed height and can grow when user interact, I would like to be able to not set the height of #sub-header-content manually, but make it automatically fit the child size.
#sub-header-content{
background-color:purple;
height:40px; // WANT TO REMOVE THIS
}
#sub-header-menu{
position:fixed;
height:40px;
width: 50px;
margin: auto;
background-color:green;
}
I did not understand perfectly what you wanted, but I think setting min-height: 40px would do the trick.
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.
My container div doesnt expand vertically on one of my pages as I add elements. Hence the bottom most div overlaps onto my footer. The divs in the container are horizontal elements relatively positioned
On my home page it works fine container expands and no overlapping using the css below
If I had any hair left it would be pulled out by now!! :-))
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
height: auto !important;
min-height: 100%;
}
Seems to me to little context, because it is possible that the footer is overlapping your container div, which is set to start with a min-height of 100%, it depends on how the footer is defined related to your container div.
...............Demo
Hi now give to body, html height:100%; than give to any class or id height 100%;
as like this
body, html{
height:100%;
}
LIve demo
rule-selector
{
height: 100%;
}
If this doesn't work for you then a more particular rule might disable this rule, so make your rule-selector as particular as possible. If it is still not particular enough, then:
rule-selector
{
height: 100% !important;
}
Try this:
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
overflow:hidden ;
}
Best,
Cynthia
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/
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;
}