I have two sections, results on the left and main on the right which reside in html > wrapper > container.
Now, the heights of both of these are not fixes and would want them to stretch to 100% depending on their contents. On some occasions, results are longer than main and vice versa. I've used 100% height, but it just doesn't seem to work. Please help!
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
width: 100%;
}
#container {
width: 1007px;
padding: 130px 0 0 0;
display: block;
}
.results {
width: 383px;
float: left;
background:
#fff;
display: block;
-webkit-box-shadow: -2px 0px 8px -6px #000;
-moz-box-shadow: -2px 0px 8px -6px #000;
box-shadow: -2px 0px 8px -6px #000;
padding-bottom: 60px;
}
.main {
width: 606px;
float: left;
padding: 15px 0 0 16px;
position: relative;
background: url(images/pattern.png) repeat;
height: 100%;
bottom: 0px;
}
<html lang="en>
<head></head>
<body>
<div id="wrapper">
<div id="container" class="clear fix">
<section class="results">
</section>
<section class="main">
</section>
</div>
</div>
</body>
</html>
Try to use "absolute" in instead of "relative" in position attribute.
I did here and worked.
For example:
.main {
width: 606px;
float: left;
padding: 15px 0 0 16px;
position: absolute;
background: url(images/pattern.png) repeat;
height: 100%;
bottom: 0px;
}
Hugs,
Vinicius.
In many cases the problem arises when one states the height should be 100% but you need to ask the question, "100% of what?". That answer is the parent of that element so the next question is, "What is the parent's height set to?". If you don't have a height set to the parent, then 100% of nothing is nothing.
Related
Have a weird bug when floating percentage width divs with auto heights. The smaller div is not level with larger div to the left of it, it's 85px lower in all browsers. I can fix it by changing the margin to negative height but the effect is different across all browers, if it's perfect in Firefox there's slight gaps in Chrome and IE, that's no good.
DEMO
.wrap-outer {
position: relative;
float: left;
width: 100%;
}
.wrap-inner {
position: relative;
float: left;
width: 92%;
margin: -100px 4% 0px 4%;
clear: both;
}
.large-top {
position: relative;
float: left;
width: 60%;
height: auto;
background: #e6f0d7;
margin: 0 0 0 0;
padding: 10px 0px 10px 0px;
border-radius: 15px 15px 0px 0px;
}
.large-middle {
position: relative;
float: left;
width: 60%;
height: auto;
background: #9ea790;
margin: 0 0 0 0;
padding: 5px 0px 5px 0px;
}
.large-bottom {
position: relative;
float: left;
width: 60%;
height: auto;
background: #f8ffee;
margin: 0 0 0 0;
padding: 5px 0px 80px 0px;
}
.small-top {
position: relative;
float: left;
width: 39%;
height: auto;
background: #e6f0d7;
margin: 0 0 0 1%;
padding: 10px 0px 10px 0px;
border-radius: 15px 15px 0px 0px;
}
.small-middle {
position: relative;
float: left;
width: 39%;
height: auto;
background: #9ea790;
margin: 0 0 0 1%;
padding: 5px 0px 5px 0px;
}
.small-bottom {
position: relative;
float: left;
width: 39%;
height: auto;
background: #f8ffee;
margin: 0 0 0 1%;
padding: 5px 0px 40px 0px;
}
<div class="wrap-outer">
<div class="wrap-inner">
<div class="large-top"></div>
<div class="large-middle"></div>
<div class="large-bottom"></div>
<div class="small-top"></div>
<div class="small-middle"></div>
<div class="small-bottom"></div>
</div>
</div
I removed padding as some of my padding adds up to 85px height but it makes no difference. Also I put only these divs in a test page with nothing else and it's still the same. Anyone else had this problem?
CSS works as designed. Your floats are placed in the following way (see section 9.5.1 "Positioning the float" in the CSS 2.1 Specification):
<div class="large-top"> gets floated to the left, and it takes 60% of the available width.
Then <div class="large-middle"> comes and wants to float to the left. It cannot fit, because it wants 60% of the width and only 40% is available. So it gets placed under the previous <div>.
Then <div class="large-bottom"> comes and wants to float to the left. It cannot fit, because it wants 60% of the width and only 40% is available. So it gets placed under the previous <div>.
Then <div class="small-top"> comes and want to float to the left and it fits, because it wants 40% of the width, which is available. The consequence is that the top of the <div class="small-top"> gets aligned with the top of the <div class="large-bottom">. The key rule is
The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
Therefore the top of <div class="small-top"> cannot be higher than the top of <div class="large-bottom">.
Then <div class="small-middle"> comes and wants to float to the left; due to the height of the <div class="large-bottom"> and <div class="small-top"> it finds place below the <div class="small-top">.
And the same for <div class="small-bottom">.
Figured it out. I should have used containers around the segments and then set the segments to 100% width.
Working code below;
<!doctype html>
<html>
<head>
<style>
.wrap-outer {
position: relative;
float: left;
width: 100%;
}
.wrap-inner {
position: relative;
float: left;
width: 92%;
margin: 0px 4% 0px 4%;
}
.wrap-small {position:relative; float:left; width:39%; margin-left:1%; height:100%;}
.wrap-large {position:relative; float:left; width:60%; height:100%;}
.large-top {
position: relative;
float: left;
width: 100%;
background: #e6f0d7;
margin: 0 0 0 0;
padding: 10px 0px 10px 0px;
border-radius: 15px 15px 0px 0px;
}
.large-middle {
position: relative;
float: left;
width: 100%;
background: #9ea790;
margin: 0 0 0 0;
padding: 5px 0px 5px 0px;
}
.large-bottom {
position: relative;
float: left;
width: 100%;
background: #f8ffee;
margin: 0 0 0 0;
padding: 5px 0px 80px 0px;
}
.small-top {
position: relative;
float: left;
width: 100%;
background: #e6f0d7;
margin: 0 0 0 0;
padding: 10px 0px 10px 0px;
border-radius: 15px 15px 0px 0px;
}
.small-middle {
position: relative;
float: left;
width: 100%;
background: #9ea790;
margin: 0 0 0 0;
padding: 5px 0px 5px 0px;
}
.small-bottom {
position: relative;
float: left;
width: 100%;
background: #f8ffee;
margin: 0 0 0 0;
padding: 5px 0px 40px 0px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="wrap-outer">
<div class="wrap-inner">
<div class="wrap-large">
<div class="large-top">dsff</div>
<div class="large-middle">sfsfd</div>
<div class="large-bottom">sdffds</div>
</div>
<div class="wrap-small">
<div class="small-top">sfdsd</div>
<div class="small-middle">sdfdsf</div>
<div class="small-bottom">sfds</div>
</div>
</div>
</div>
</body>
</html>
I have a basic HTML showing the safe zones used in broadcast. However, when I add text to the divs I have set up, it throws the alignment out of place.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="browserClock.css">
</head>
<body>
<div id="safeAction">Safe Action Area
<div id="safeText">Safe Text Area
</div>
</div>
</body>
</html>
html {
width: 1920px;
height: 1080px;
margin: 0;
padding: 0;
background-color: black;
}
body {
margin: 0;
width: 100%;
height: 100%;
background-position: 0 0;
}
#safeAction {
width: 1786px;
height: 1003px;
margin: 37px 66px 37px 66px;
border: 1px dashed white;
}
#safeText {
width: 1728px;
height: 971px;
margin: 16px 28px 16px 28px;
border: 1px dotted white;
}
Without the text, it lines up as per the EBU standard pixel spacing. With text it does not.
This is happening because the inner div with id safeText is positioned relative to the other contents of the div it is in. To fix this, set the position of safeText to absolute and use top to set the the distance from the top of the inner div to the top of the outer div (in your case 16px) instead of the top-margin. Finally, give the body relative positioning so that it is determined a parent.
JSFiddle
body {
margin: 0;
width: 100%;
height: 100%;
background-position: 0 0;
position: relative;
}
#safeAction {
width: 1786px;
height: 1003px;
margin: 37px 66px 37px 66px;
border: 1px dashed white;
}
#safeText {
width: 1728px;
height: 971px;
margin: 0px 28px 16px 28px;
border: 1px dotted white;
top: 16px;
position: absolute;
}
I'm trying to create a div that stays under the bottom of the page and is invisible there. I mean, you can't scroll to it. I tried to google it, but I just can't make it, neither negative bottom-margin, nor negative bottom, nor relative/absolute positioning couldn't make it...
Could anyone of you help me, please?
Here's a snippet of my site - I wanna "Menu" image to be invisible on the bottom (outside the display area), so it can then slide up when needed.
body {
overflow-x: hidden;
margin: 0;
padding: 0;
}
.main-container {
width: 100vw;
height: 100vh;
background-color: #780d0d;
position: absolute;
}
.mainmenu {
width: 70vw;
height: 82vh;
position: relative;
top: 8vh;
left: 15vw;
-webkit-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
}
.menu-bottom {
height: 20%;
width: 33.2%;
background-color: red;
border: 1px solid;
display: inline-block;
margin: 0 -5px 0 0;
}
.menu-side-holder {
height: 80%;
width: 30%;
display: inline-block;
}
.menu-side {
height: 50%;
background-color: red;
border: 1px solid;
display: block;
margin: 0;
vertical-align: top;
}
#menu-img {
height: 80%;
width: 40%;
display: inline-block;
margin: 0 -4px;
vertical-align: top;
clear: none;
}
.menu-bottom-slider {
display: inline-block;
width: 100%;
background-color: green;
}
#slider {
position: absolute;
padding-left: 43.5%;
bottom: 0;
margin-bottom: -30vh;
}
<div class="main-container">
<div class="mainmenu">
<div class="menu-side-holder">
<div class="menu-side" id="ogloszenia">
1
</div>
<div class="menu-side">
3
</div>
</div>
<img id="menu-img" src="img/main4.jpg">
<div class="menu-side-holder">
<div class="menu-side">
3
</div>
<div class="menu-side">
4
</div>
</div>
<div class="menu-bottom">
5
</div>
<div class="menu-bottom">
6
</div>
<div class="menu-bottom">
7
</div>
<div class="menu-bottom-slider">
<img id="slider" src="http://s32.postimg.org/xrrmzmohx/slider.png">
</div>
</div>
</div>
place your target div as direct child of body (not nested inside other divs) and use this style:
position:absolute;
bottom:-100% // or fixed size if height is known
One way you might be able to do this is by making it absolute and give it a negative bottom equal to the height of the element like so
.menu-bottom-slider{
position: absolute;
bottom: -(height of element goes here)px
}
Why don't you put
opacity: 0
on the element and position it where you need it ON the page. Then when you want to use it, use jQuery to change the opacity and animate it.
This would be the css of your div section.
#divname {
position:fixed;
height:50px;
background-color:red;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
}
Your body would look like this.
**body{
margin-bottom:50px;
}**
Your code is nearly working, but you are using overflow-x, and you need overflow-y.
EDIT:
Another way is to set the position of the slider to fixed. This means that the position does not depend on the scroll position, so you can't scroll to it:
body {
overflow-x: hidden; /* you could also change this to overflow-y */
margin: 0;
padding: 0;
}
.main-container {
width: 100vw;
height: 100vh;
background-color: #780d0d;
position: absolute;
}
.mainmenu {
width: 70vw;
height: 82vh;
position: relative;
top: 8vh;
left: 15vw;
-webkit-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 66px 10px rgba(0, 0, 0, 0.75);
}
.menu-bottom {
height: 20%;
width: 33.2%;
background-color: red;
border: 1px solid;
display: inline-block;
margin: 0 -5px 0 0;
}
.menu-side-holder {
height: 80%;
width: 30%;
display: inline-block;
}
.menu-side {
height: 50%;
background-color: red;
border: 1px solid;
display: block;
margin: 0;
vertical-align: top;
}
#menu-img {
height: 80%;
width: 40%;
display: inline-block;
margin: 0 -4px;
vertical-align: top;
clear: none;
}
.menu-bottom-slider {
display: inline-block;
width: 100%;
background-color: green;
}
#slider {
position: fixed; /* This fixes the slider, you can't scroll to it! */
padding-left: 43.5%;
bottom: 0;
margin-bottom: -30vh;
}
<div class="main-container">
<div class="mainmenu">
<div class="menu-side-holder">
<div class="menu-side" id="ogloszenia">
1
</div>
<div class="menu-side">
3
</div>
</div>
<img id="menu-img" src="img/main4.jpg">
<div class="menu-side-holder">
<div class="menu-side">
3
</div>
<div class="menu-side">
4
</div>
</div>
<div class="menu-bottom">
5
</div>
<div class="menu-bottom">
6
</div>
<div class="menu-bottom">
7
</div>
<div class="menu-bottom-slider">
<img id="slider" src="http://s32.postimg.org/xrrmzmohx/slider.png">
</div>
</div>
</div>
I made a fixed header div to my site and added a shadow under it but it doesn't fit my browser (100% width) ??
here is my css:
body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
#head{
width: 100%;
height: 60px;
background-color: #5B86E1;
box-shadow: 0 10px 17px -5px #000000;
position: fixed;
}
#content{
width: 900px;
padding-top: 60px;
min-height: 100px;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="head">
</div>
<div id="content">
</div>
</body>
</html>
Here is a screen capture:
You have a negative spread radius; for it to be full width you want this:
box-shadow: 0 10px 17px 0px #000000;
Demo:
body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
#head{
width: 100%;
height: 60px;
background-color: #5B86E1;
box-shadow: 0 10px 17px 0px #000000;
position: fixed;
margin-right: auto;
margin-left: auto;
}
#content{
width: 900px;
padding-top: 60px;
min-height: 100px;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="head">
</div>
<div id="content">
</div>
</body>
</html>
The most waterproof solution: make your element longer (either with the width or padding property) than the viewport, and set negative margins (note: the margins are only really required to make this work with non-fixed elements). Your new #head css:
#head {
width: 110%;
margin: 0px -5%;
height: 60px;
top: 0;
background-color: #5B86E1;
box-shadow: 0 10px 17px 0px #000000;
position: fixed;
}
As other answers have mentioned: it is advised to set the border-radius spread property to a non-negative value. Or you could use separate box-shadows for each side.
Give the fixed element a position using left top ``right```
header{
position:absolute;
left:0px;
top:0px;
right:0px;
height:60px;
background-color:#00f;
box-shadow:0px 0px 17px #000;
}
Added a fiddle: https://jsfiddle.net/hpdymvqg/
The issue is beause you have a negative value for your box-shadow. Changing it to the following fixes the issue:
box-shadow: 0 10px 17px 0px #000000;
Tested here
I am trying to center a div #logo_alt containing an image using margin: 40px auto 0px auto;.
Problem:: On Chrome, it looks perfect, but in IE, this img-containing div is aligned to the left of its parent container #header_organizer. I just cant figure out why this is happening, and how it can be fixed in IE! Any help greatly appreciated :)
HTML
<div id="header_organizer">
<div id="user_bar">...</div>
<div id="user_bar_menu">...</div>
<div id="logo_alt"> <!-- <<<<< We are centering this div! -->
<img src="logo.png" \>
</div>
</div>
CSS
#header_organizer {
width: 100%;
height: 180px;
background: black url(../images/template/header.png);
float: left;
position: relative;
z-index: 1000;
}
#logo_alt {
width: 256px;
height: 55px;
margin: 40px auto 0px auto;
}
#user_bar {
height: 30px;
color: #CCC;
font-size: 13px;
margin-right: 10px;
padding: 0px 5px;
float: right;
cursor: pointer;
position: relative;
z-index: 3000;
}
#user_bar_menu {
width: 200px;
height: 165px;
background: white;
border: 1px solid #BEBEBE;
float: right;
position: absolute;
top: 30px;
right: 10px;
-moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
box-shadow: 0 2px 4px rgba(0,0,0,.2);
display: none;
z-index: 1000;
border-image: initial;
}
The HTML file start off with <html xmlns="http://www.w3.org/1999/xhtml">.
Well there's your problem. You need to give your document an XHTML doctype declaration since your root element has that xmlns attribute anyway. Then IE will work in standards mode and render your margin: 0 auto style correctly.
Firstly, add a doctype to prevent IE from slipping into quirks more.
Then try this...
body {
width: 100%;
}