How to force browser NOT to calculate the size of the content based on some absolute positioned elements?
I am looking for something like https://developer.mozilla.org/en-US/docs/CSS/-moz-stack-sizing
For a simplistic use case please view http://jsfiddle.net/edzis/5nnYk/
html, body, .container {
/**
https://developer.mozilla.org/en-US/docs/CSS/-moz-stack-sizing
DOES NOT WORK
**/
-moz-stack-sizing: ignore;
-webkit-stack-sizing: ignore;
stack-sizing: ignore;
}
This may not be an exact match to what you are looking for, but maybe it can present some ideas.
If you can change the html code, you could make use of "overflow: hidden" by using a second absolute positioned layer and let the "container" div only be responsible for the dimensions where you want to have scrolling.
NB: There is a possible issue here if the initial window width is small and the container causes scrolling, the elements off screen may not be rendered and will require refreshing.
Here's an updated jsfiddle link: http://jsfiddle.net/5nnYk/24/
code e.g:
<div class="panel">
<div class='left'>LEFT</div>
<div class='right'>RIGHT</div>
</div>
<div class='container'>
</div>
Then set the panel class to:
.panel{
width:99%;
height:200px;
position:absolute;
z-index:1;
overflow:hidden;
-webkit-transform-style: preserve-3d;
}
BTW: I set width to 99% instead of 100% because it fixes another issue that sometimes rises and causes a horizontal scroll. Another way to solve this is use left: 0px; on the panel.
Related
I have an absolutely positioned form that appears roughly 200px below where it should be on the page load. If I open up Chrome Dev Tools and disable and re-enable any CSS image it goes where it should be.
This only happens in Google Chrome.
I've tried using the chrome specific CSS rules below but it doesn't work.
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
How can I fix this?
Here is the page in question: http://info.iconixx.com/Iconixx-Incentives_imc_incentives1.html
It's likely nested in a different element then your wanting it to be. Make note of the parent element.
Find the element in which that header image is coming from. Likely <header></header>
Then make sure that element is defined as position: relative;
Within those tags have the relevant mark-up of the element you are trying to position within this area.
<header>
<div id="absoluteelement">
</div>
</header>
Now when you do:
#absoluteelement {
position:absolute;
top:50px;
left: 200px;
// more
}
It will be positioned top and left coordinates from the parent element, so top and left from the top and side of <header> just double check your code and nesting. Also, make sure you have all widths and heights defined for that area. Hope this helps.
I think you should really take a look how your markup is structured and consider reformatting it. For 1 the left box in the banner comes after the Form which is on the right. Just like anything else you should build left to right.
<div id="banner">
<div id="left_content"></div>
<div id="right_form"></div>
</div>
You could then....
#left_content{ float:left; }
#right_form{ float:right; }
This isn't going to give you the exact look you want... but using this approach will really help eliminate thse types of issues to begin with.
I have a problem with footer positioning. It doesn't go to the bottom/last.
So, I have a container div which has 3 divs - float:right , float:left and the center one (which has position:absolute) that comes between the two floated divs.
The center one must have fixed width and height because it's an image.
In that center div I have another div with a lot of content.
The problem is, because the center div has fixed width and height, it doesn't take the childs div height.
So my problem is how to put the footer that it comes last (after the container)?
Note - with JQuery I put the width of the floated divs because they take 100%-980px width.
This is how it looks like.
I tried putting to the center div overflow:auto,overflow:overlay,margin-left:auto;margin-right:auto;.
After reading your question again an again i come to conclusion and create the below fiddle using your code and embed a sample image for you desired size.
Please let me know if i am wrong while understanding your question. So i can work around according your needs.
fiddle: http://jsfiddle.net/ah3nr/6
Demo: http://jsfiddle.net/ah3nr/6/embedded/result/
My approach:
I have remove the position:absolute from center div and added new div for image and relate them both using css layer techniques.
Updated css:
.sectionDownContainer {
width: 980px;
/*height:270px;*/
border:1px solid red;
/*position: absolute;*/
position:relative;
top: -32px;
z-index: 1;
}
/*.sectionDownMenu {
margin-left: 50px;
margin-top: 1px;
display: block;
}
*/
#image_container {
position:relative;
width:980px;
height: 270px;
margin-top:-2px;
z-index:2;
}
.sectionDownContent {
width: 640px;
margin-top: -190px;
margin-left: 50px;
position: relative;
z-index:5;
color:#000;
font-weight:bold;
}
Screenshot:
Try this for the parent.
overflow:auto;
Also refer to this stack overflow post: Expanding a parent <div> to the height of its children
You need to set this property of the center-div: height:auto (you could also add a minimum height: min-height:400)
About your second question with the footer, this is much more complicated. You must do this:
<div id="content">
<div id="content_left">
</div>
<div id="content_center">
</div>
<div id="content_right">
</div>
<div id="footer">
</div>
</div>
I'll give you now the full CSS (because it's not so easy):
.content {position:relative; overflow:hidden;} //hidden overflow just a hack for common issues...
.content_left {height:auto; float:left} //set height to auto (very important)
.content_center {height:300; float:left} //a fixed height also works!
.content_right {height:auto; float:right}
.content_footer {width:100%; height:auto; float:right} //for tests you can also set a fixed height
This solution is also according to other threads on Stackoverflow: Align DIV's to bottom or baseline, How to align content of a div to the bottom?
But, if you experience problems with that, you may do this (my preferred solution):
<div id="content">
<div id="content_left">
</div>
<div id="content_center">
</div>
<div id="content_right">
</div>
</div>
<div id="footer">
</div>
And its CSS:
.content {position:relative; overflow:hidden;} //hidden overflow is just a hack
.content_left {height:auto; float:left} //set height to auto (very important)
.content_center {height:300; float:left} //a fixed height also works!
.content_right {height:auto; float:right}
.content_footer {width:100%; height:xxx; float:left} //you can use any height...
Note that all above solutions works only if you set all the "contents" to float, it doesn't work with absolute values! I found this here: http://wiki.answers.com/Q/How_can_a_parent_DIV_wrap_around_child_DIVs_which_are_floating_left_or_right
This is due to an issue with divs: It's not possible to "tell" a parent div the size! So childs like "content_center" or "content_right" won't tell the "content" how long they are and how long "content" must be. So it's impossible to tell the footer where to align, if you use absolute values for the childs.
So your second question, although it looks trivial, is a very important question, and not easy to solve.
IMPORTANT UPDATE:
I tried to find a solution with absolute now. The problem is, that absolute and fixed are taken out of the regular (text)flow, so their size can't influence the size/positioning of any other element anymore. But we also have to understand that an absolute element still controls all its childs, so we should rather set the childs as relative than the parent (here: "content")! So I finally found the solution, and it's quite weird, because it's almost the opposite thing I suggested above, but that solution was influenced by the posting of others, while following solution is "my own" one (I added a header for demonstration purpose):
<div id="header">
</div>
<div id="content">
<div id="content_left">
</div>
<div id="content_center">
</div>
<div id="content_right">
</div>
<div id="footer">
</div>
</div>
The CSS (the "header" clearly shows, that "content" inherites all positioning to its childs like "content_left", "content_right", aso.):
.header {position:absolute; left:0; top:0; height:100; width:100%}
.content {position:absolute; left:0; top:100; height:auto; min-width:700} //min-width is only voluntary, but quite useful
.content_left {position:relative; left:0; top:0; width:200; height:auto;} //height:auto is important to adapt the height from containing text!
.content_center {position:relative; left:200; top:0; right:200; width:auto; height:auto;} //in the middle element, also auto-width is important!
.content_right {position:fixed; right:0; top:0; width:200; height:1000;} //we set a fixed position, but that won't influence the footer anymore!
.content_footer {margin:0 0 60 0; position:relative; left:0; bottom:-60; width:100%; height:150;} //a fixed height is also okey...but relative position is needed!
//you still need to add margin:0; border:0; padding:0 or similar values for some elements to get a good layout
The important point here is, that you can decide which child element will be the longest one, and set this element's position:relative, while the other may have absolute or fixed. But if you don't know which element will be the longest, all child's positions need to be set as relative. Anyway, I suggest to set all childs to relative (beside fixed if needed), because their parent "content" will set their absolute height-position already correctly, so there's no need for any absolute at all.
I'm repeating myself: Above I wrote it's not possible to tell a parent div the size...actually it's possible, but not if the values absolute and fixed are used. Only if you use the browser standart value (static) or relative, the parent div will be informed about the size of its childs, an therefore the footer is set correctly at the bottom of the page.
Well, my solution works everywhere...even in IE (tested 6.0 and 8.0!) due to the hack margin:0 0 60 0 where the value 60 should be the positive value of bottom:-60. Now we finally got the non-floating crossbrower-solution. ;)
The problem you're experiencing is that certain CSS properties cause elements to be "removed from the flow" of the document (see the W3C Visual formatting model). Parent elements naturally grow to fit the height of children elements, however, floated and absolutely positioned elements are removed from the document flow. As mentioned in a few comments, setting overflow: auto; or overflow: hidden; on the parent element re-establishes a bounding box around floated elements. This means you can float elements within the parent container, then set overflow: hidden; on the parent element, and the parent element will contain the floats. However, this doesn't work for absolutely positioned elements: the absolutely positioned box is "removed from the normal flow entirely (it has no impact on later siblings)". The only exception is that the entire document will try and grow to display any positioned elements (give an element position: absolute; top: 3000em; and the page scrollbar will grow to allow you to scroll to that element). I don't know of any way to trigger this for elements other than the document.
Back to your intended effect… If you don't need IE7 support, you can use display: table; table-layout: fixed; to achieve a centered column with a fixed width and two columns of variable width on either side.
jsFiddle Demo
In the near future, this will also be possible using the CSS "flexbox" properties. Flexbox will allow for some nifty new features, including horizontal and vertical centering, changing the order of rendered elements, and setting "flex" values for how much of the remaining variable width an element should take. However, the standard is currently going through a period of flux, and the old standard (enjoying moderate support) is being replaced by a new standard (with little to no support). See "Old" Flexbox and "New" Flexbox and the accompanying demo. Considering the glacially slow progress of web standards implementation, I don't expect to see this in use for a few years unless a truly masterful polyfill is produced.
I having a hard time with my CSS min-height, I have two divs and they are side by said, if one of them expands, I would like the other to expand http://www.willruppelglass.com/
As you can see the leftSideBar stops expanding at its min-height and the content div is expanded past its min-height.
CSS
.leftSideBar{
background:url(../images/leftSide.jpg) repeat-y;
float:left;
margin-top: -49px;
min-height: 591px;
}
.contentWrapper{
background-color:#ebebeb;
width:1411px;
margin:0 auto;
position:relative;
}
.content{
background:#FFF;
width: 1100px;
margin:0 auto;
position:relative;
min-height: 591px;
}
HTML
<div class="contentWrapper">
<div class="content">
<div class="leftSideBar">
<img src="images/leftSideTop.jpg" width="170" height="78" border="0" />
</div><!--leftSideBar-->
</div><!--content-->
</div><!--contentWrapper-->
The reason this is happening is because the content in the content div is pushing past the minimum height but the left nav not actually having content has no reason to get bigger.
My suggestion, even though it is not strictly CSS, I would use a simple piece of jQuery (because I noticed you are already using it) that will dynamically adjust the CSS property of the left div to match the right div. The jQuery version is here:
var div_height = $("#content").height();
$(".leftsidebar").css("height":div_height);
Please note that I have used an ID on the content that doesn't exist in your existing code so you will need to assign an ID to that div to work.
I hope this helps.
You have the first area floating left. Whenever you use float it can act different in various browsers, so I avoid that sort of stuff at all costs for main elements.
If you want your divs to be independent of each other, don't nest them. Better yet, control the positioning yourself using css properties such as "display" and "position". Once you get your divs separated from interacting with each other you'll find you have much more control over them individually.
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
body {overflow-x: hidden; }
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
If I understood correctly,
style="width: 100%; position:absolute;"
should achieve what you're going for.
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
Example:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.
Ok here is the site:
http://danberinger.com/
If you view the source for the HTML and CSS you can see that I have set the height of the div in the middle to 100% and given it an overflow property value of hidden, it is called "main_content". I realized that the height value is having no effect on what is displayed, the overflow value of hidden is allowing the background color of the main_content div to extend down to the footer. I guess I am wondering what the best way for me to achieve a variable div height on each page or "main_content" while maintaining the background color. Am I doing this the right way or am I using some kind of css hack that is not the proper way to do it. All insight is welcome. Make sure to take a look at the source HTML and CSS before giving me an answer.
The easiest solution would be to assign the background color to your body element. Something like this:
body {
margin: 0;
padding: 0;
width:100%;
height:100%;
background-color:#cccccc;
}
This will also eliminate the few pixel white border around the edges, if you want to maintain that, take out the margin and padding declarations.
I might have misunderstood what you want, but try this:
Replace div#intro_container with:
div#intro_container {
width:830px;
margin:auto;
overflow: hidden;
background-color:#333333;
}
And remove the height property from div#messagebox.
I prefer to do in this way:
In the content of div 'main-content', add
In your case it was
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
</div>
It cam be rewritten as
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
<div style="clear:both"></div>
</div>
AFAIK This is a standard way to achieve what are you doing.