I am trying to set the height of a child element as a percentage of its parent.
Here is my set up:
.html, .body {height: 100%; width: 100%}
/* test is a child of body to ensure content is aligned in the middle */
.test {
width: 90%;
height: 100%;
position: absolute;
left: 5%;
top: 0%;
margin: -0% 0 0 0%;
}
/* top banner */
.banner {
height: 100px;
margin-left: 2%;
width: 96%;
}
/* rest of the content */
.center{
background-color: #FFFFFF;
height: 80%;
margin-left: 2%;
margin-top: 10px;
overflow-x: auto;
padding: 3px;
position: relative;
width: 95%;
}
/* content inside center */
.iwant-event {
height: 100%;
left: 0;
width: 84.5%;
}
One would expect that the iwant-event class to fill 100% of the center. In chrome, I get this behavior. However, in Firefox, iwant-event does not fill 100% of the center. A simplified version of my HTML is:
<body>
<div class="test">
<div class="banner">Banner stuff here</div>
<div class="center">
<div class="iwant-event"></div>
</div>
</div>
</body>
I am fairly conversant with basic CSS, but have never tried developing for many browsers before. I would appreciate any help.
Are you sure it doesn't work in FF? Fiddle here: http://jsfiddle.net/mZ3Vp/1/ works fine on my machine. If it doesn't work for you, could you specify what OS you're on and what version of FF are you using?
One would expect that the iwant-event class to fill 100% of the center.
What is not happening exactly? Do you want iwant-event to fill the container horizontally and vertically? It does fill it vertically as far as I can see. Horizontally it does not because you have the rule:
.iwant-event {
width: 84.5%;
}
You need to change this to...
.iwant-event {
width: 100%;
}
...for full horizontal filling. And of course you have 3px of padding on center as well, so you need to remove this to get iwant-event to completely fill center.
Related
I have a div called #text, inside another div #box. Right now I've tried to center #text by doing this:
#box {
width: 50%;
#text {position: relative; margin-left: 48%;}
}
This code puts #text approximately in the center of #box, but when I resize the screen, the size of #text changes relative to the size of the screen, so the size of its margin-right changes, and it is no longer exactly in the center.
I've heard there is a "hack" for this involving a few wrapper divs, but I don't want to overcomplicate my css or html. Is there a simple way to horizontally position a div exactly in the center of its parent?
Using flexbox is IMO the best way to center child horizontaly and verticaly. Its support is good.
First off the CSS you posted is not valid. You can accomplish what you are looking for with something like this:
CSS
body {
width:100%;
height: 100%;
margin: 0;
padding: 0;
}
#box {
width:100%;
height: 500px;
background: lightblue
}
#test {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto
}
HTML
<div id="box">
<div id="test">
hello
</div>
</div>
See the JS.Fiddle
use margin: 0 auto; in the css of #text
You want exact center of page, regardless of content? Do something like this:
p {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Relative to the parent, set the following attribute on the container for your element:
div.containerOfPs {
position: relative;
}
Height was not respected on this fiddle
I want the image to have a height and width of 80% relative to its parent, vertically and horizontally aligned. For some reason, it does not work.
HTML:
<div id="menu_header_new_orig">
<img id="menu_logo_orig" src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" />
</div>
CSS:
#menu_header_new_orig {
margin-top: 2.5%;
height:40%;
width:100%;
overflow: hidden;
position: relative;
border: 1px solid green;
text-align: center;
}
#menu_logo_orig {
width: 80%;
height: 80%;
position: relative;
}
I have figured it out here, but just in case somebody have better solution.
If I understand you correct :
The parent #menu_header_new_orig own parent must also have a height (obviously 100%)
html, body {
height: 100%;
}
set display to inline, 10% top to get vertical alignment
#menu_logo_orig {
top: 10%;
display: inline;
position: relative;
width: 80%;
height: 80%;
}
Is that what you were heading for? [not really sure] - try to set #menu_header_new_orig height to other things than 40% to get it in another perspective.
forked fiddle -> http://jsfiddle.net/Dmc7j/
I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed.
I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 (resize browser height)
<body>
<div></div>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
height: 100%;
width: 130vh;
margin: 0 auto;
background: #f0f;
}
However, I worry about fallback for IE8 and Safari, as it this unit is not supported there.
Are there any other CSS only methods of achieving this effect?
I have a solution that works also with IE8 (using Pure CSS 2.1), but not perfectly.
because I need the browser to recalculate things when he get resized, and apparently it doesn't do that unless he has to (and I cant find a way to make him think he has to), so you will have to refresh the page after resizing.
as far as I know, the only element that can scale reserving his ratio is an <img>, so we will use the <img> to our advantage.
SO, we are going to use an image with the ratio that we want (using the services of placehold.it), lets say we want a 13X10 ratio (like in your example), so we'll use <img src="http://placehold.it/13x10" />.
that image will have a fixed height of 100% the body, and now the width of the image scales with respect to the ratio. so the width of the image is 130% height of the body.
that image is enclosed within a div, and that div has inline-block display, so he takes exactly the size of his content. witch is the size you want.
we remove the image from the display by using visibility: hidden; (not display:none; because we need the image to take the space), and we create another absolute div, that will hold the actual content, that will be right above the image (100% width and 100% height of the common container).
That works perfectly when you first initiate the page, but when you resize the page, the browser doesn't always measure the right width and height again, so you'll need to refresh to make that happened.
Here is the complete HTML:
<div class="Scalable">
<img class="Scaler" src="http://placehold.it/13x10" />
<div class="Content"></div>
</div>
and this simple CSS:
html, body, .Content
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.Scalable
{
position: relative;
display: inline-block;
height: 100%;
}
.Scaler
{
width: auto;
height: 100%;
margin-bottom: -5px;
visibility: hidden;
}
.Content
{
position: absolute;
top: 0;
background-color: black;
}
Here's a Fiddle (don't forget to refresh after resizing)
I recommend you to copy this code to your local machine and try it there rather then within the fiddle.
In this similar SO question a CSS technique was found and explained on this blog entry that allows an element to adjust its height depending on its width. Here is a repost of the code:
HTML:
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
Demo Here
If this is sufficient for you, I'd recommend this technique. However, I'm unaware if the technique can be adapted to handle scenarios where you must have an element adjust its width depending on its height.
You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
Yesterday i check that one highlights products slide that i have in the home of one webpage is not property vertical aligned only on firefox, it works fine on IE and Chrome.
I was searching info and i find a lot of many years ago bugs on FF. I try a few solutions i find but no one works.
<div id="feature-wrap-container">
<div id="feature_wrap">
<div id="scrollable">
//a list of element floating left
</div>
</div>
</div>
#feature-wrap-container{
background-color: #ffffff;
width: 100%;
height: 260px;
}
#feature_wrap {
width: 960px;
height: 260px;
overflow:hidden;
position: relative;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
#scrollable {
height:100%;
}
On chrome and IE the div is center on the window and in firefox the feature_wrap align to right and make the window bigger than the 100%.
The slide is based on: http://wordpress.org/extend/plugins/featured-posts-slideshow/, but obviously modified.
Thanks in advance.
See I have created a fiddle of yours here, and it looks good for me in firefox. I have reduced the width of the #feature_wrap and checked in firefox, and it is working. What is the issue are you facing?
Get the full image here.
Instead of using overflow: hidden it's better to use overflow-x: hidden, overflow-y: hidden as below:
#feature_wrap {
width: 960px;
height: 260px;
overflow-x :hidden;
overflow-y: hidden;
position: relative;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
Hi I am having problems positioning several images. It is very important that max height of the site stays at approximately 580 pixels as I want to give the impression of a picture frame around the site. I have attached a picture to show how exactly the site is laid out and where I want to position my images in the top, middle and bottom divs. I do not want to have them as background images because I want to have some as links and I want to have some jquery animations (i.e. fadeIn and toggle) with the other images. This is a fluid layout but I do not want the vertical width to expand when the browser is at the min width of 780px, I also would like that the images are some what centred on the page.
I am still learning CSS so I have done the best I can but it is still out of position.
Thanks for your help
Site Layout Picture
.container {
width: 100%;
max-width: 1096px;
min-width: 780px;
margin: 0 auto;}
.header {
background:#231f20;
height: 65px;
}
.sidebar1 {
padding: 0px;
float: left;
width: 65px;
background: #231f20;
margin: 0;
min-height: 450px;}
.sidebar2 {
float: right;
width: 65px;
background:#231f20;
margin: 0;
min-height: 450px;}
.main_content{
padding: 0px;
width: 80%;
float: left;
}
.footer {
height: 65px;
background:#231f20;
position: relative;
}
HTML
<body>
<div class="container">
<div class="header"></div>
<div class="sidebar1"></div>
<div class="main_content">
<div class="top"></div>
<div class=”middle"></div>
<div class=”bottom"></div>
</div>
<div class="sidebar2"></div>
</div>
</body>
Add position: relative to all the containing div's (you may have to set the height of them to the height of the tallest image also). Then position all the images something like:
.img1 { /* or whatever class name works for you */
position: absolute;
left: 50%; /* this centers it, if you want thirds, us 33%, 66%, etc. */
margin-right: -50px; /* note: 50px is an example, it needs to be half the width of your image width */
}
Try adding clear: both; to the CSS for the .footer. This will force it to the bottom of the "picture frame".