I'm trying to get the border of a div to be flush with the browser window edge.
I've loaded up a number of css-resets; cleared everything on the page except a test line [of text] - and the border seems to disappear off the page edge -> almost as if 'box-sizing: border-box' was not working. I've tried everything along the lines of margin: 0 to get this margin to go away.
I've tried position: fixed as well as position: absolute
Master.css is the only stylesheet loaded, no inline overrides.
.. the reset has html etc etc etc
extract from - master.css
html, body, div, span, applet, object, iframe, h1, h2, h3 .......
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#wholePageDiv {
margin: 0px;
padding: 0px;
border: solid 1px blue;
padding: 0;
z-index: 1;
position: fixed;
min-height: 99%;
min-width: 99%;
}
then the html
<div id='wholePageDiv'>
Test text<br>
</div>
The blue border is not flush with the browser window.
In order for the div to be 100% high, the body and html must be set to 100%
It's worth reading what a box model is
*,
:after,
:before {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#wholePageDiv {
border: 1px solid blue;
height: 100%;
}
<div id='wholePageDiv'>
Test text<br>
</div>
margin: 0px auto;
padding: 0px;
border: solid 1px blue;
position: fixed;
height: 99.8%;
width: 99.9%;
This works for me on my browser:
#wholePageDiv {
margin: 0px;
padding: 0px;
border: solid 1px blue;
padding: 0;
z-index: 1;
position: fixed;
min-height: calc(100% - 2px);
min-width: calc(100% - 2px);
}
Basically using calc to set the height/width to be 100% minus the width of the border on left/right & top/bottom
Try this code:
* {
margin:0;
padding:0;
box-sizing:border-box;
}
Related
Hi I have a banner which contained in a wrapper. The wrapper is not full width but the banner is.
I wanted to prevent horizontal scrolling and achieved this in chrome by setting the body overflow-x:hidden. However when I check in IE11 you can still scroll to the right by clicking on the screen and dragging right.
Does anyone know how to prevent this behaviour in IE?
body {
background: #ccc;
overflow-x:hidden;
-ms-overflow-x:hidden;
}
section {
box-sizing: border-box;
/* or not */
margin: 0 auto;
width: 25rem;
background: white;
padding: 1.5rem;
}
.full-width {
position: relative;
/* child absolute */
margin: 0 -9600rem;
/* add back section padding value */
padding: .25rem 9600rem;
background: red;
color: white;
font-size: 1.125rem;
z-index: 0;
}
.full-width:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
/* subtract h2 padding */
left: 9598.5rem;
right: 9598.5rem;
background: red;
}
<section>
<h2 class="full-width">Full-Width Bar</h2>
<p>Some content.</p>
</section>
I'm sure I'm doing something obvious wrong, but I haven't been able to figure it out. My lightboxes size dynamically (percentage width), and I want the content within the lightboxes to scroll vertically as needed on smaller screens without displacing the border (actually a box-shadow) around the content.
As an added caveat, I need the "container" div to have dynamic height. When I set the container div to height: 100%, the lightbox functions like I want (see code below), but when I remove the height setting, the overflow no longer works right.
This demo of my lightboxes in action should help clarify my question:
http://viewer.zmags.com/publication/a82492b9?viewType=pubPreview
Here's my CSS:
html{
height: 100%;}
body {
font-family: Verdana, sans-serif;
font-weight: 400;
font-size: 12pt;
color: #FFFFFF;
padding: 0px;
margin: 0px;
background: #FF0000;
height: 100%;
overflow: hidden;}
div.container {
background-color: #6d6d6d;
padding: 20px;
height: 100%; <!-- I want to remove this, but can't figure out a way to get the same functionality without it -->
overflow: hidden;}
div.content {
background-color: #6d6d6d;
overflow: auto;
max-height: 100%;
margin: 0px auto;}
div#tab1 {
box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 4px #be854C inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
And my HTML:
<body>
<div class="container" id="tab1">
<div class="content">
<p>Lightbox content here.</p>
</div>
</div>
</body>
</html>
If your browser support requirements allow it, consider absolutely positioning your .container div, and setting its top, left, etc appropriately:
div.container {
background-color: #6d6d6d;
padding: 20px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
That has some downsides if you're trying to position other elements on the page, but for a lightbox, it's a reasonable solution.
I'm trying to get a fixed-sidebar-with-fluid-content layout working. I've run into a problem where the sidebar is at height: 100%, but it doesn't seem to be filling the whole window.
See this fiddle: http://jsfiddle.net/samselikoff/ZqycY/2/. The green sidebar should go all the way down.
Any ideas what's happening?
I think it's the issue with height: 100%; setting. When you resize the browser to shorten it, that sidebar will just cover the whole height of the browser window. You may try the following alternative CSS:
/*html, body { height: 100%}*/
body { background-color: #1db34f;}
#side-panel {
float: left;
width: 240px;
padding: 10px 20px 10px 20px;
/* height: 100%;
background-color: #1db34f;
border-right: 1px solid #dddddd; */
text-align: center;
}
#center-panel {
margin-left: 280px;
background-color: #ddd;
text-align: center;
border-left: 1px solid #dddddd;
}
#center-panel .row-fluid {overflow: auto;}
#center-panel .large {height: 400px; padding: 10px; background-color: #f17f49;}
Since you are looking for a fixed sidebar, it should be #side-panel { position: fixed; }. Hope this is what you want
I have tried multiple methods found on this website, and nothing seems to help.
I am trying to center 2 divs that are floating left and right in a container that has a 100% width.
CSS Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
margin: 0 auto;
}
#body-inner {
float: left;
width: 550px;
left: 325px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
right: 325px;
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
}
You need to do some research about how floats work, because I think you have the wrong idea. Floating one div left and one right, there is no way to center them, because they are floated. The left and right properties don't work unless the element is positioned (absolute, fixed, or relative with some implications). Also, it looks like you're trying to get the right edge of #bodybox to line up with the left edge of #body-inner. This won't work, because the right property is calculated from the right edge of the screen, not the left edge. Also, you're mixing fixed box dimensions with a fluid container width. This is fine, if you account for what happens to them when they collide.
If you're just trying to align the two <div> beside each other, centered on the page. In this case, inline-block is probably your friend. There are numerous implications and workarounds regarding white space, font sizes, order of content, etc., but essentially you would do:
#body-container {
width: 100%;
text-align: center;
}
#body-inner {
width: 550px;
}
#bodybox {
width: 200px;
}
In the above, the two <div>s would sit next to each other as long as the container is wide enough, once the container is too small, they will display one before the other, each centered in the container.
Could this be what you're looking for? Click here...
If I understand your question, you're trying to center a <div> that has 2 more <div> parents...
Code Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
/*margin: 0 auto;*/
/* testing border and height, could be deleted */
border: solid;
height: 500px;
}
#body-inner {
width: 550px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
/*border-left: 1px solid #000000;
border-right: 1px solid #000000;*/
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
/*right: 325px;*/
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
It's actually two part question regarding my simple page (that will be replaced some day with real content), HTML+CSS boilerplate used there for vertical centering and IE7.
http://engitize.net/
Can anyone provide detailed explanation why the page is displayed correctly in non-IE browsers (Chrome, Fx, Opera), almost all semi-recent to recent IEs (IE5.5, IE6, IE8, IE9), but not in IE7?
I am especially interested in: it works in IE6, yet it doesn't work in IE7, because... kind of explanation.
What should be changed to make div#c properly centered vertically in IE7?
I am using specific height for div#c, but used boilerplate is height-agnostic and fix should preserve this feature.
Spoiling other browsers is not an option, unless it's IE5.5 (ok, IE6 too, but only if it is really unavoidable).
Changing <!DOCTYPE html> and turning IEs into quirks mode is also not accepted (and it's a pretty bad practice for newly developed pages).
If you don't have IE7 (just as I), you can visit http://ipinfo.info/netrenderer/ or http://browserling.com/, paste URL there and choose IE7 to see the problem yourself.
Because the page will change after accepting some answer, I'm providing snapshot of relevant HTML and CSS parts from it (with logo URL changed to be absolute).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body { height: 100%; }
body { background-color: #fff; color: #000; margin: 0px; padding: 0px; }
div { margin: 0px; padding: 0px; }
#outer { position: relative; width: 100%; height: 100%; overflow: visible; }
#outer[id] { display: table; position: static; }
#middle { position: absolute; top: 50%; width: 100%; text-align: center; } /* for explorer only*/
#middle[id] { display: table-cell; vertical-align: middle; position: static; }
#c { position: relative; top: -50%; } /* for explorer only */
#c { width: 385px; height: 120px; margin-left: auto; margin-right: auto; }
#c { background-image: url(http://engitize.net/engitize.png); background-repeat: no-repeat; background-position: center top; }
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; }
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
</style>
</head>
<body>
<div id="outer"><div id="middle"><div id="c"><div>
because history is important!
</div></div></div></div>
<div id="footer"><div>
<p style="float:left;"><strong>Przemysław Pawełczyk</strong>'s imprint | Coming in 2012!</p>
<p style="float:right;">Przemoc's network</p>
</div></div>
</body>
</html>
your Q#1 has been answered by #thirtydot, IE7 and below does not support the CSS table properties so another way has to be found for them. and his absolute positioning technique is usually the preferred way to do this as most times in a scenario like this (splash page?) the width and height of the centred content would be known.
addendum to above per comments:
In answer to why it was working in IE6 and not IE7 even though IE6 doesn't support the table properties either, IE7 was actually picking up the position: static rule from the #middle[id] {} rule - IE7 does understand this type of selector so this means the later absolute/relative positioning was not working the same as it was in IE6
Taking the above into account redoing the CSS to make sure IE7 and 6 got the same CSS and that it was placed later in cascade to override the "good" CSS it turns out the the positioning method is height agnostic too, in the comments there are various links to to test this, but here is the final working version:
Hybrid table cell/positioning method : here
That fiddle does include the image width and heights, but if you remove them and the positioning for the "sub text" it does (or should) show that whatever is in the middle does stay centered
HTML used is the same as the bottom of this answer.. minus the extra <i></i> element
CSS:
html, body { height: 100%; margin: 0; padding: 0;}
body { background-color: #fff; color: #000; }
#outer {
position: relative;
width: 100%;
height: 100%;
display: table;
}
#middle {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#c {
width: 385px;
height: 120px;
margin: 0 auto;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
/**** for IE7 and below ****/
/* hacks but there is another method below */
#middle {
*position: absolute;
*top: 50%;
*width: 100%;
*text-align: center;
}
#c {
*position: relative;
*top: -50%;
}
/**** end IE7 and below rules ****/
#c div {
position: relative;
top: 100px;
width: 100%;
color: #666;
font-weight: bold;
font-family: serif;
font-size: 12px;
text-align: right;
}
#footer {
width: 100%;
text-align: center;
height: 15px;
padding: 5px 0 0 0;
margin: -20px auto 0 auto;
border: 0;
background-color: #def;
}
#footer div {
padding: 0px 5px 0px 5px;
text-align: right; font-size: 10px;
font-family: sans-serif;
}
#footer p {margin: 0;}
As pointed out in comments using the technique that the HTML5 boilerplate uses to class the HTML element conditionally see:
Conditional stylesheets vs CSS hacks?
Answer: Neither!
means you could replace the IE7 hacks with:
.ie6 #middle, .ie7 #middle {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
.ie6 #c, .ie7 #c {
position: relative;
top: -50%;
}
Original alternative - "Matchstick Technique"
You could likely mix the following technique with the "table-cell" technique via conditional comments or hacks, but this (hacky!) technique works across browser as far as my tests have seen
As you've asked for a height agnostic version.. you might or might not like the "matchstick" technique, this involves using inline blocks and lining them up.. the "matchstick" is a 100% high empty, off page, inline-block element with its vertical-alignment set to "middle" once it's in place the next inline-block (your actual content div) sits beside it and aligns to the middle or it, then using text-align: center; on it you have the horizontal centering too
here's a link to a working example fiddle
Note: I've left your widths intact, but you can test without widths/heights by removing the height & width off #c and also remove the CSS for the #c div text div - in a plain text scenario entering text into either of these divs should 'auto' centre.
and especially note the insertion of the extra <i></i> HTML just inside the outer div (that's likely why this is not a preferred method!), this is the "matchstick" that props the whole page open.
Code used in fiddle:
html, body { height: 100%; margin: 0; padding: 0; }
body { background-color: #fff; color: #000; }
#outer { position: relative; width: 100%; height: 100%;}
/* a matchstick spacer */
#outer i {
display: inline-block;
height: 100%;
width: 1px;
margin-left: -1px; /* to hide off page */
margin-right: -4px; /* to remove spacing between this and #middle block */
vertical-align: middle; /* will make inline block next to it center vertically */
background: #f00; /* red, not required just to see or not see it */
}
#middle {
display: inline-block;
width: 100%;
text-align: center;
vertical-align: middle;
}
/* image 385 * 120 */
#c {
display: inline-block;
/* presuming image heights, but it wouldn't matter if there was width/height here or not */
width: 385px;
height: 120px;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
#middle, #c { /* IE hack for inline block on block level elements */
*display: inline;
}
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; }
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
HTML:
<div id="outer">
<i></i>
<div id="middle">
<div id="c"><div>
because history is important!
</div></div>
</div>
</div>
<div id="footer">
<div>
<p style="float:left;"><strong>Przemys?aw Pawe?czyk</strong>'s imprint | Coming in 2012!</p>
<p style="float:right;">Przemoc's network</p>
</div>
</div>
IE7 does not support display: table-cell, which you're using as part of your vertical centering technique.
Your page was relatively simple, so I simplified the HTML/CSS a lot. The centering now works properly everywhere I've tested it.
Complete code: http://jsbin.com/azuhe4
The line that's causing this behavior is...
position: static
...on the "#middle" CSS spec.
If I disable that line IE7 seems to render (more or less) the logo in the middle of the page.
It's the <!DOCTYPE>.
IE6 & 7 were a little flaky with that (that's what I've read, anyway).
If you do the following, you'll see things come around - with your code (no edits, save for a couple borders to see what's happening).
Here's what I did:
Deleted your <!DOCTYPE>
Added to your DIV {} CSS line - border:1px dotted gray
At your "outer", "middle", and "c" divs, a threw an inline border-color just to see which was which.
Hit Refresh
Then pasted <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, and hit Refresh again. Looked fine to me. Centered vertically, horizontally.
As of April 20, 2011 W3C states <!DOCTYPE HTML> as "Not a Standard". Certainly, IE6/7 have no idea what that tag means. http://www.w3.org/QA/2002/04/valid-dtd-list.html
I got new and easy solution for that:
<style>
.vam{vertical-align:middle;}
</style>
<div style="line-height:200px; border:1px solid #000000; height:200px;
text-align:center;color:#FFFFFF; font-size:1px;">
.<img src="her-banner.jpg" alt="" class="vam" />
</div>