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.
Related
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.
So, I'd like to set the height of the collapsed navigation of bootstrap to 100% height.
e.g. https://getbootstrap.com/examples/navbar/ this should span over the whole screen.
I did some research and mostly found people using height: 100vh; but this is not dynamics, shouldn't matter too much in the end though, but I still don't like it.
Usually, one could e.g. do:
<div id="bar">
<div id="foo">
test
</div>
</div>
html,
body {
height: 100%;
}
#foo, #bar{
background-color: red;
min-height: 100%;
}
But I'm asking myself now, what's the best approach to implement this when using bootstrap v3.
you can hide the Content while the Navigation is collapsed using JavaScript..
for example: document.getElementById("ID").style.display = none;
if there is no content under the Navigation, there is nothing to scroll... :P
So I'm asking myself then, how I can deactive scrolling when the navigation collapsed?
I somehow fail listening to the proper event
As per your comment, I see the issue is that you dont get the proper point of the collapse. The plugin provides the events on collapse.
By bootstrap documentation this is how you do
$('#foo').on('hidden.bs.collapse', function () {
// do something…
})
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.
On this page, the <footer> element is displaying in a fixed position. The footer is cutting off the main content div. This is unintended.
Other pages on the website do not have the footer cutting off the content div.
Using Google Chrome code inspector, when I highlight the footer
<footer class="container_wrap socket_color" id="socket" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter">
There is no display:fixed or display:absolute for <footer>.
I've had a look at the page in Wordpress admin, and there is nothing out of the ordinary with the way it is setup.
Can you see if this is CSS causing this effect? Thank you.
The problem is that in your CSS you have height: 287px; on the #av_section_1 rule (which is your div with the main content of that page)..
If you remove that it works just fine..
remove these from #main
position: relative;
z-index: 2;
overflow: hidden;
remove these from #av_section_1
height: 287px;
Dont know why have you used z-index everywhere and also used overflow:hidden on your main div. The above changes will work for you.
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.