I put all my content in wrapper that 100% width. my wrapper is not a child.
<body>
<div id="wrapper">
<?php require_once("header.php"); ?>
<?php require_once("content.php"); ?>
<?php require_once("footer.php"); ?>
</div>
CSS:
#wrapper {
overflow-x: hidden;
height: 100%;
width: 100%;
background-color:#fff5e5;
}
But browser (chrome, moz) shows that:
Thanks for help.
An element in your page is rendering outside of <body> element. This can be the result of many causes (negative margins, large widths, large paddings) and guessing it is waste of time. Create a minimal, complete and verifiable example and I'll find it in minutes.
If you don't care what is the cause and only want to remove the effect, (which is clearly the wrong way to go about it and I strongly advise against), you can always apply
body {
oveflow-x: hidden;
}
If it is main wrapper,Only adding
display:block;
must solve your issue.
You might want to check if your content inside of the wrapper takes up 100% of the space. If you hover over the element in the debug, a blue box will show up. If it is 100% of the width, then that means that the content inside probably only spans part of the screen width.
Related
I'm using Skeleton CSS Boilerplate
Two different pages of my website, similarly structured, are slightly laterally shifted away from each other. This is causing a jarring effect in the navigation bar when navigating from one page to the other.
Upon investigation, I noticed in the Chrome Dev Tools CSS inspector that the body tag of each page is a different width.
The structure of both pages is the same, shown below. The class .wrap has a max width of 960px, and all the content is contained within .container .wrap.
<body>
<?php
require 'navsub.php';
?>
<div class="container wrap" id="singlepageajax">
</div>
<?php
include 'footer.php';
?>
</body>
So... what could be causing the body tags to be different widths?
Add the following CSS code
html, body {
height: 100%;
overflow: hidden;
}
then add a <div id="container-wrapper"> to wrap up the container
place its CSS like
#container-wrapper {
height: 100%;
overflow-x: auto;
position: absolute;
width: 100%;
}
this will enables the scrolling again
Vertical scroll bar is the cause.
The body element will shrink in horizontal direction to add some free space for the scroll bar, as the browser window has fixed amount of horizontal space.
UPDATE
If you want to prevent this behaviour, you may use:
body{
overflow: hidden;
}
But you may lose the scrolling feature of your browser on the page.
For the life of me I cannot get my side navigation to expand to the bottom of my page. I've googled this and looked at many other stack overflow questions related to this but nothing is helping.
People have suggested setting a height on the parent div, since height: 100%; doesn't know what the 100% is. But how does the parents height know what 100% is?
I also cannot use any "fixed" or "absolute" positioning because that seems to completely break the responsiveness of Twitter Bootstrap.
Here is my code:
<div id="secondary">
<div class="span10" style="background-color: #860038; min-height: 100%; overflow: hidden;">
<ul class="side-nav">
<?php if (!empty($secondary_menu)): ?>
<?php foreach ($secondary_menu as $key => $menu): ?>
<?php $active = ($this->uri->segment(2,'index') == $key)? 'side-box-active': 'side-box'; ?>
<li class="<?= $active ?>"><?= $menu['label']?></li>
<?php endforeach ?>
<?php endif ?>
</ul>
</div>
</div>
So the above code creates my side navigation dynamically throughout my application. I'm using Twitter Bootstrap and on the div class="span10" I put my background-color for the side nav and min-height: 100%. (Also overflow:hidden).
What this is currently doing is creating my container but it cuts off right when the navigation stops, rather then expanding to the bottom of the page.
As you can see, I setup a parent div with ID="secondary", in case we need it.
Screenshot shows the side navigation. I need the maroon red color to expand to the bottom of my screen. Scratch that it lets you post pictures then explain them and then tells you you can't post pictures :) sorry no image I guess.
Thanks for any help in advance.
In order for 100% height to work, parent elements need 100% height as well, including html and body.
Not sure if you've solved the problem, but if someone doesn't:
When you have a background image or color that you want to repeat all the way down the page, but within that page you have columns of different lengths, the only way to accomplish this is to put the background image or color in the container which will then hold the different lengths of column.
Said columns will expand down according to the amount of content you put within them. The longest div inside the container will make the background image repeat-y (down) or the color.
So your structure would look like this:
<div id="container"> <!--which is the #1 element in your body-->
<div id="leftcolumn"> Your side-nav would go here</div>
<div id="rightcolumn">Your main content which is usually longer
than the menu will go here</div>
</div><!-- end container-->
Obviously in this situation your header and footer div would be placed outside the container div and may need to go within another wrapper div to keep everything centered.
And with, for example, the following CSS, it'll work just fine:
<style>
html,
body {
height:100%;
background-color : #103C52; /* or whatever you like*/
}
#container {
height:100%;
background-color: green; /* or whatever you like*/
}
#leftcolumn {
height:100%;
width: 16.67%; /* or whatever you like*/
background-color: red; /* or whatever you like*/
float: left;
}
#rightcolumn {
height:100%;
width: 80%; /* or whatever you like*/
overflow-x: hidden; /* or whatever you like*/
overflow-y: scroll; /* or whatever you like*/
background-color: blue; /* or whatever you like*/
float: left;
}
</style>
If this is not clear, post what you have so far and I will take a look at it... ;)
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.
I have a DIV with a set height and overflow: hidden .
Inside the DIV, there's some content (a P, maybe some IMGs... it's a wordpress post content, by the way).
The content is completely unstyled (no css applied to any of it!)
Now when I remove the height and the overflow: hidden from the DIV css, the whole content will be shown. So far, so good.
But when I set the height and the overflow-property, the content will completely disappear!! Instead of being just "cut off" at the certain height.
The DIV displays properly, but the content then seems to be completely invisible.
:(
Could you please help me if there are any errors / known problems with this method?
My HTML:
<div class="post-text-long">
<?php the_content(); ?> // This displays the post's contents, just to let you know
</div>
The CSS that lets the contents disappear:
.post-text-long {
height: 200px;
overflow: hidden;
}
EDIT: Live example removed, thanks everyone for your help!
Use this instead:
.post-text-long {
height: 210px;
overflow: hidden;
width: 100%;
}
You need to add width to get this code working.
.post-text-long { clear: left; }
The html/css code is ok - http://jsfiddle.net/easwee/gXg5w/4/
You are saying that it's a wordpress content - check if there are unclosed divs or any other elements that might break your design once the content is loaded.
Open your page in firefox - if you have firebug try to delete out all html content and add in some Lorem ipsum text to see the results.
Otherwise provide a live example with problematic content.
I've used the last example on this page for equal height columns.
http://www.ejeliot.com/blog/61
The problem is, when you click an internal anchor link, the content is shifted up, and the overflow is making the top part of the page disappear.
For example, click this link
http://www.noosanativeplants.com.au/~new/articles/botany-words/
Then click a letter to jump to that section. You will notice what I am describing.
Is there a way to combat this, or is this a short coming of the technique? Do you recommend I use the background image technique for faux equal height columns? I'd rather not use this, as one page has a different background, and would require a bit of reworking to do the background for this page.
Thanks
I really recommend you to use the fail-safe faux columns method. If you are not a layout expert (no offence, seriously), stay away from the padding/margin/overflow magic and the one true layout technique. The latter is elegant but it can cause unwanted side-effects if you are to do heavy JS/DOM manipulations and all (see the problems listing).
As slink said you have two overflow: hidden rules in your css:
#main-container {
overflow:hidden;
}
And
#content {
overflow:hidden;
}
If you disable/remove these you will able to use your scrollbars again. Unfortunately the padding / negative margin "hack" will be visible. I recommend you to completely remove this solution and use faux columns. Faux columns background can be added to your #main-content or even the #content div (not just like the example in the ALA article that sets the background image to the body tag).
Good luck!
Update: Sorry, let me correct myself: to use faux columns in your case it is better to set the current background to the html element and the faux background to body element.
Assuming your equal height columns are the left menu and right content in that example, you could just use a margin-left property on the right-column and set the background colour of the container to the desired left-column colour. This would assume your right content always has a greater height than the left, but there are other ways round this.
#container {
width: 960px;
background-color: #000;
}
#menu {
float:left;
width: 240px;
}
#content {
float:right:
margin-left: 240px;
background-color: #fff;
}
<div id="container">
<div id="menu">
<ul>
<li>Home</li>
</ul>
</div>
<div id="content">
stuff goes here
</div>
</div>
The problem is caused by two overflow: hidden; rules defined on elements #content and #main-contaniner.