As you can see on the picture below, my submit button ("envoyer" in french) is placed outside its container (the container has a red background and is called .footer-content)
I haven't been able to recreate the issue on jsfiddle so here is the direct link (I haven't been able to identify the issue using firebug)
.footer-content {
position: relative;
margin-right: auto;
margin-left: auto;
height: auto;
clear: both;
z-index: 9;
max-width: 700px;
background: red;
margin-top: 40px;
}
Because your formulars position is absolute and its containers height is auto (absolute positioned elements don´t influence their parents height)
Use this CSS for your formular
#contactfrm {
position: relative;
float: left;
}
Try this:
.footer-content {
margin: 40px auto auto auto;
width: 100%;
max-width: 700px;
height: auto;
background: red;
position: relative;
clear: both;
z-index: 9;
overflow: auto;
}
Related
I'm not sure as to why when I drag my browser around my text and video overlap. I want to prevent this:
Here is a jsfiddle example:
https://jsfiddle.net/liondancer/m3xug7vo/
example:
Here is the CSS regarding the particular page:
.wrapper {
width: 950px;
margin: auto; /* Centering blocks */
/*position: relative;
display: block;*/
}
.index {
}
.video-container {
position: relative;
min-width: 100%;
min-height: 100%;
/*width: auto;
height: auto;*/
z-index: -100;
background: no-repeat;
/*background-size: cover;*/
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
.title-area {
height: 100%;
width: 100%;
vertical-align: middle;
.container {
width: 100%;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
position: relative;
}
}
.index-aboutus {
position: relative;
min-width: 100%;
min-height: 100%;
height: 100%;
display: block;
}
.index-ourwork {
position: relative;
min-width: 100%;
min-height: 100%;
height: 100%;
}
.index-instructors {
position: relative;
min-width: 100%;
min-height: 100%;
height: 100%;
}
The HTML:
The video container is using a height of 100vh, there is one thing you have to think of:
The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly. However,
when the value of overflow on the root element is auto, any scroll
bars are assumed not to exist.
See http://www.w3.org/TR/css3-values/#viewport-relative-lengths
An easy way to fix this would be to add a class to the parent div of video-container and add a property to set it to overflow: hidden;
It would look like the following:
.video-containerParent {
overflow: hidden;
}
Please see the following jsFiddle for an example:
https://jsfiddle.net/m3xug7vo/1/
The following site has an interesting article about viewport units:
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
I have a modal dialog for a workflow that displays content roughly of a fixed height, but also displays an embedded PDF for a user to review.
I'd like to maximize the height of the PDF for the user's screen size, so the dialog scales vertically, but I can't get the PDF to fill all the remaining space within the dialog's div.
Here is the Html:
<div class="container">
<div class="popUp">
<div class="popUpHeader">Header</div>
<div class="fixedContent">Fixed Height Content</div>
<div class="resizeableContent">I should fill all the free vertical space in .popUp</div>
<div class="popUpFooter">Footer</div>
</div>
</div>
and CSS I'm using:
body, html {
margin: 0;
height: 100%;
}
.container {
height: 100%;
min-height: 100%;
background: #F8F8FF;
}
.popUp {
background: lightgrey;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 90%;
}
.popUpHeader {
width: 100%;
background: darkgrey;
text-align: center;
}
.popUpFooter {
width:100%;
background:darkgrey;
text-align:center;
position: absolute;
bottom: 0;
}
.fixedContent {
height: 10em;
text-align: center;
background: #E1E1EE;
}
.resizeableContent {
background: #7d7f7c;
text-align: center;
width: 100% height: 100%;
}
JsFiddle: http://jsfiddle.net/trainman1124/pnbeoyb9/2/
Here is an image of the desired result:
Edit
Here is a sample JsFiddle using an embedded PDF, which is what actually needs to be done.
http://jsfiddle.net/trainman1124/pnbeoyb9/3/
Note, I've corrected the missing semicolon in the example and also added overflow:hidden
You could use the display: table; and display: table-row properties in order to fill the space.
Set the .container to fill 100% of the page and .popUp div to display: table; and fill it's parent.
Display all the children as display: table-row;, and then set heights for the popUpHeader and popUpFooter divs.
Allow your resizableContent div to fill the remaining space:
.resizeableContent {
background: #7d7f7c;
width: 100% height: 100%;
display: table-row;
}
Check out this CodePen
Modify Popup class to make its color same as resiseableContent
.popUp {
background: #7d7f7c; /* Modified here */
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 90%;
overflow: hidden;
}
Depending on what browsers you need to support (This wont work earlier than IE9), one solution would be to use calc and vh units.
Something like:
.popUp {
background: lightgrey;
margin: auto;
height: calc(100vh - 10em); /* Height of viewport minus your .fixedContent div, you may also want to include the height of the header */
overflow: hidden;
}
The updated fiddle has the heights set to % instead. That works as you want I think?
Update
http://jsfiddle.net/batcave/pnbeoyb9/7/
.popUpFooter {
width:100%;
background:darkgrey;
text-align:center;
position: absolute;
bottom: 0;
height: 7%;
}
.resizeableContent {
background: #7d7f7c;
text-align: center;
width: 100%;
height: 80%;
}
.fixedContent {
height: 10%;
text-align: center;
background: #E1E1EE;
}
I've got the following piece of CSS in which i want the navigation and the website to be absolutely positioned so i can slide them back and forth when the menu button i pressed(Like the facebook app for example). To do so i've got a container with an overflow: hidden(To hide the nav bar and slide it in when needed). However; the container loses it's autoheight because of the absolute positioning within i'm afraid.
How can i get the height to be set automatically again as overflow: hidden does without absolute positioning in it.
i've created a fiddle in which the container has a height of 500px. I want to make the height scale automatically though. http://jsfiddle.net/rB7EY/
div {
box-sizing: border-box;
}
.container {
overflow: hidden;
width: 100%;
max-width: 60em;
padding: 0;
margin: 0 auto;
position: relative;
background: grey;
height: 500px;
}
/*CSS for the navigation bar that can be toggled*/
.navigation {
width: 15em;
float: left;
background: blue;
position: absolute;
left: -20px;
}
/*The CSS for the actual content*/
.website {
width: 100%;
float: left;
position: absolute;
left: 0px;
}
.container .website .top_bar {
height: 4em;
background: pink;
padding: 1em;
position: relative;
}
.container .website .top_bar .menu_button {
width: 3.2em;
height: 2.5em;
background: red;
border: 0px;
}
nav.menu {
width: 15em;
position: absolute;
left: 1em;
top: 3em;
background: yellow;
}
If I understand you well, enough you want to scale the container automaticly? Try using a min-height and a max-height
I fixed it by using a div between the container and the navigation and website and gave that a absolute position. With that i've decided to make the container be min-width: 100%
I've got two div elements in my webpage and I've included the CSS for the two elements.
#item-browsing {
width: 65%;
height: 500px;
float: left;
position: relative;
min-width: 915px;
}
#bill-information {
width: 315px;
height: 100%;
float: left;
box-shadow: 3px -3px 11px -7px;
}
When I re-size the browser for various resolutions the item-browsing element goes down. I've attached a screen shot of what I mean above.
How Can I fix this issue using CSS.
Thank you.
Give parent element of these two elements position: relative and change the following css related to #item-browsing.
#item-browsing {
height: 500px;
position: absolute;
right: 315px; /* or left */
left: 0;
top: 0;
bottom: 0;
min-width: 915px;
}
BTW, there are many posts based on this issue on SO.
Working Fiddle
Just put a wrapper around those two divs. like so:
#wrapper{
width: [your width];
clear: both;
padding: 0;
overflow: hidden;
}
#item-browsing {
width: 65%;
height: 500px;
float: left;
position: relative;
min-width: 915px;
}
#bill-information {
width: 315px;
height: 100%;
float: left;
box-shadow: 3px -3px 11px -7px;
}
Add a wrapper and set it's min-width with sum of width of both containing divs:
#wrapper {
min-width: 1230px;
}
Simplified demo
If the browser width is less than 915 (min-width)+315(width)=1230px the second div has no space on the right side.
Given the markup
<div id="header">
Cattle Farms
</div>
And style
#header
{
width: 960px;
height: 200px;
margin-bottom: 20px;
}
#header a
{
width: 100%;
height: 100%;
display: block;
font-size: 25px;
}
How whould I go about placing/positioning/aligning the text "cattle farms" so that it sits 20px from the left and 20px from the bottom in such a manner that it does not break the a out of the div visually even when looking it with Firebug.
You could simply add a <span> to the anchor and add some padding to that. Like this:
<div id="header">
<span>Cattle Farms</span>
</div>
And add these additional styles:
#header a span {
padding-left: 20px;
padding-bottom: 20px;
}
EDIT:
Also, add overflow: hidden to the header.
#header {
overflow: hidden;
}
You need to specify position: relative on the parent container:
CSS:
#header {
position: relative;
width: 960px;
height: 200px;
}
#header a {
position: absolute;
bottom: 20px;
left: 20px;
}
I would recommend taking away the 100% width and height. By doing this, you'll be able to place it within the header. If you don't, you're expanded to the size of the header, so there's no room to change your placement.
Since it's a block element, you can do this a few ways.
You can either use margin to "push" it away from other elements (if you decide to add more on top of it). Or you can you use "position: relative" and "top" or "left". I would recommend using this with a %. I tried this code and it achieved the effect you were looking for I think:
#header{
width: 960px;
height: 200px;
}
#header a {
display: block;
position: relative;
top: 95%;
}
Well. I have no idea why this works. But it does
div#header a
{
width: 100%;
height: 100%;
display: block;
text-indent: 20px;
line-height: 350px;
}