I have an issue with dynamically resizing the height of my sidebar div to match the content div.
Based on various other questions here and google searches, I thought that without a height set, it would use the parent div height, but it seems to auto-fit the height to the content instead.
This can be seen on "baradineholdings.com.au" (please don't judge the site, I'm a noob for one and I would rather get the basics working properly before I make it 'pretty').
The home page looks fine, mainly because of no content. If you head to the about page you can see the issue. I almost suspect that in the instance of the main page, the content div is taking the height of the sidebar div, but I'm not sure why.
HTML;
<body>
<div id="wrapper">
<?php include('includes/header.php'); ?>
<div id="internal">
<div id="sidebar">
<h3>Navigation</h3>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</div> <!-- end #sidebar -->
<div id="content">
<p>Images Coming Soon!</p>
<p>Please see the about page for more information.</p>
</div> <!-- end #content -->
</div> <!-- end #internal -->
<?php include('includes/footer.php'); ?>
</div> <!-- end #wrapper -->
</body>
CSS;
body {
background-color: #f1f1f1;
font-family: georgia,sans-serif;
color: #333;
margin: 0;
padding: 0;
}
#wrapper {
width: 960px;
background-color: #f1f1f1;
margin: 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#internal
{
width: 959px;
height: auto;
background-color: #f1f1f1;
margin: 0 auto;
border-right: 1px solid #ccc;
}
#content {
width: 675px;
height: auto;
float: left;
padding: 10px;
}
#sidebar {
width: 150px;
/* height: 410px; */
float: left;
background-color: #27408B;
color: white;
}
#sidebar a {
text-decoration: none;
color: white;
}
#sidebar li {
list-style: none;
}
As I said; noob. So I'm probably doing something dumb here...
I've tried jsfiddle, but even using the large amount of content in the about page, it renders it small, so it doesn't affect the sidebar...
I've tested in Chrome and IE, both have the same issue.
This can be fixed pretty easily with your existing code. The basic method is outlined here: CSS Equal Height Columns.
Basically, you fake it by adding your sidebar color to a wrapper div (in your case, you can use your existing #internal). Because this div actually CONTAINS the main content, it will expand as necessary. To make it look like it's a sidebar, you then give the main content a background color that matches your body. The actual sidebar div has no background, it just holds the text. You might need to see this in action for it to really make sense, but here are the relevant bits of CSS:
#internal {
background-color: #27408B; /* the color you want for the sidebar */
}
#content {
background-color: #f1f1f1; /* matches the body background */
}
And then remove the background-color line from #sidebar. (I also had to add a float to #internal and change its width to auto to get things working.)
Here it is in JSFiddle
What is it that you want to accomplish? The blue sidebar to have the same height as te text in de content area?
If so, the easiest way is to put a blue background image to the div that containce the sidebar and te content div.
To do that, you have to put < div style="clear:both">< /div> after your < div class="content">...< /div>This way, your id internal div will grow with de height of de floating children elements.
<div class="sidebar">...< /div><br />
<div class="content">...< /div><br />
< div style="clear:both">...< /div><br />
After that you can add a repeating blue image:
#internal {
background: url(blue.png) top left repeat-y;
}
An alternative is to use jquery/css hacks, but I doubt it's worth the effort.
Related
I have basic coding experience. In my Wordpress install, some of my pages have a blank white space under the footer that I would like to remove. I have tried several solutions but to no avail. The problem is persistent on chrome, Firefox, IE etc.
I'm not really sure of the cause, but the size of the white space changes depending on computer/browser/resolution.
As I am working in Wordpress I have access to custom CSS and source theme files, however, I would prefer to solve this problem with custom CSS.
I would like a footer that sticks to the bottom of the browser window with no whitespace below it.
Q. Please provide me with code/solution that will remove the white spaces below the footer on my website (preferably custom CSS method).
You can find an example of the white space on my website here. (try viewing on a browser resolution higher than 1280x800)
Solutions i've tried:
#footer {overflow: hidden;} didn't work
Putting html, body, parentDiv, childDiv, section, footer { height : 100%; } in my css but that didn't work
#copyright { padding-bottom: 20px;} "#copyright" is under the footer so this did reduce the whitespace to a point where it seemed it weren't present, but on taller browser windows the white space reappeared.
You have whitespace under the footer because the content is not sufficient to push it past the bottom of the monitor at higher resolutions.
I'd recommend using the Sticky Footer to handle this. It allows the minimum height of the body to be that of the browser, regardless of how little content is in the page.
The sticky footer solution requires some specific HTML to be included, and some basic CSS. Here's a Fiddle of Ryan Fiat's sticky footer in action using the code from his example.
The code goes like this:
HTML:
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Footer content here</p>
</div>
</body>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
background-color:#eaeaea;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
border:solid 1px red;
}
.footer, .push {
height: 155px; /* '.push' must be the same height as 'footer' */
}
.footer {
border:solid 1px blue;
}
Looking at your markup, you can use your existing div class="clear"></div> as your .push div, then you only need to add the div class="wrapper"> around your content.
Try something like this
html {
height: 100%;
}
body {
height: 100%;
flex-direction: column;
min-height: 100vh;
display: flex;
}
footer {
flex-shrink: 0;
}
.futovac {
flex: 1;
}
<html>
<body>
<main></main>
<div class="futovac"></div>
<footer></footer>
</body>
</html>
DEMO: https://help.podio.com/hc/en-us
find you code on .footer you code will be like this,
.footer-top-content .widget_links ul li a {
border-bottom: 1px #4C4C4C solid;
background: #333;
color:#999;
replace this code with this one,
.footer-top-content .widget_links ul li a {
border-bottom: 1px #4C4C4C solid;
background: #333;
color:#999 !important;
overflow: hidden;
this helped mine. hope for you too guys..
Just a simple image that uses some jQuery to fade some content over the top when moused over.
Only problem is that when the hover over takes effect, the hover spills into the div gutter making the hover over bigger than the actual container.
each image is layed out like so
<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1></div>
<img class="display" src="http://placehold.it/400x300">
</li>
Can see a live example here.
http://jsfiddle.net/QLUMH/
Any ideas on ways to fix/improve what I am doing here? Cheers
Demo
Here you have live example,
you are giving 100% to width and height.
so that really goes overflow.
Code edited-
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
The issue is that your description fills the entire column, which is wider than your image. If you add an "inner column"/container that collapse to the same width as your image, it will work alright. I've created a fork of your demo that demonstrates this.
I've added a wrapper "ib" (Just stands for inner block. rename this to a proper name) inside each .column.item like so:
<div class="ib">
<div class="description">
<h1>Image hover</h1>
</div>
<img class="display" src="http://placehold.it/400x300">
</div>
And then just created a very simple CSS rule for making this wrapper collapse to its contents:
.ib {
display: inline-block;
position: relative;
}
You did not style your li. The issue is that in foundation.css it is getting padding-left and padding-right. You need to remove that and use margin-left and margin-right instead. And you also need to fix the width of the li. As .description will get its 100% height. So you need to include a small css in your own file (don not modify foundation.css).
#portfolio li.columns{
/* You can use the width in '%' if you want to make the design fluid */
width: 400px;
padding: 0px;
margin: 0px 0.9375em;
}
Fiddle
You'll just have to get rid of the padding on tne li
li{ padding:0 }
or use the the box-sizing property:
`li { box-sizing:border-box; -moz-box-sizing:border-box; }
Change in CSs will help,
I have updated the same in fiddle
with change in CSS,
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
#portfolio .description h1 {
color: white;
opacity: 1;
font-size: 1.4em;
text-transform: uppercase;
text-align: center;
margin-top: 20%;
width:400px;
height:300px;
overflow:hidden;
}
Update:
If the H1 created extra cutter and wrapping issue(for some), please use the DIV tag instead, which should work fine!
I hope this will solve your problem :)
I found a lot of questions on stack overflow about getting rid of white space, but I can't seem to figure out how to put it in.
I have a bottom navigation on my site that floats with the page, but if the window is small, the bottom part of the page gets covered up. I would like to insert some white space at the bottom, so when the window is smaller than the length of the page you can still read it.
I've tried adding:
margin-bottom: 50px;
padding-bottom: 50px;
to the div containing the top page content, but it doesn't work.
Is there something I am missing? Here's a demonstration: http://www.writingprompts.net/name-generator/
#left, #right {
margin-bottom: 90px;
}
or
#top_section > div {
margin-bottom: 90px;
}
It doesn't work on #top_section because you use absolutes and therefore the content actually over extends the div itself, but trust me, either of those two css' i gave you WILL work
Simply add the following rule:
#top_section {
overflow: hidden;
padding-bottom: 90px;
}
This will make #top_section be as big as the floating content inside it.
http://jsfiddle.net/rlemon/fSYmu/ This is a simplified example, having no idea what your layout looks like (I am not going to assume the demonstration is yours... unless you revise and tell me it is) i'll show you how I would do this
HTML
<div class="container"> <!-- main page wrapper -->
<div class="content"> <!-- main content wrapper, backgrounds apply here -->
<div class="inner-content"> <!-- content inner, where your content goes! -->
content
</div>
</div>
<div class="footer">footer</div> <!-- footer -->
</div>
CSS
html,body,.container {
height: 100%; margin: 0; padding: 0; // I am important so the page knows what 100% height is.
}
.content {
height: 100%; // see above... i need to cascade down.
background-color: green;
}
.content-inner {
padding-bottom: 100px; // offset for the footer.
}
.footer {
width: 100%;
position: absolute; // stick me to the bottom.
bottom: 0;
height: 100px;
background-color: red;
}
enjoy!
You need to use fixed position in CSS to achieve this.
HTML:
<div id="top-section">
Insert content here...
</div>
<div id="bottom-nav">
<div id="content">
Bottom content...
</div>
</div>
CSS:
#bottom-nav {
bottom: 0;
position: fixed;
width: 100%;
}
#content {
margin: 0 auto;
width: 960px;
}
I have a page that I am trying to create with a div on the left containing an iframe and a div in the middle also containing an iframe.
The sidebar is to hold links and the content section is to load said links.
My goal is to get the sidebar expanded all the way down to the bottom of the page as well as the content section.
Here is my css:
html, body {
height:100%;
margin:0px;
padding:0px;
}
#wrapper {
position: relative;
min-height: 100%;
}
#sidebar {
position: relative;
float:left;
width: 150px;
overflow: hidden;
min-height: 100%;
}
#pdfholder {
float: right;
width: 600px;
}
And here is my html:
<body>
<div id="wrapper">
<div id="sidebar">
<iframe id="sidebarframe" name="index" src="./sidebar.html">
</iframe>
</div>
<div id="pdfholder">
<iframe id="pdfholderframe" name="viewer" src="./blank.html">
</iframe>
</div>
<div style="clear: both;"></div>
</div>
</body>
I know I am doing something wrong but I have gone through around 10 different websites and I cannot for the life of me find it!
You can give both containing divs a min-height of 100% and there's not much more you need to do:
http://jsfiddle.net/GolezTrol/eHMec/
You can give the iframes a height of 100% too, but it didn't become clear to me whether you need that or not.
From what I can understand from your question, this JSFiddle (simpler version here) should do the trick.
CSS
div
{
background: black;
}
div div
{
margin-left: 150px;
background: white;
}
div ul
{
float: left;
color: white;
}
HTML
<div>
<ul>
<li>Nav bar</li>
<li>More nav</li>
</ul>
<div>
Content
</div>
</div>
Obviously this is a very simple example and you should give your elements classes or IDs if needbe; I wanted to keep it simple.
The principle of this is a float: left, a margin-left: 150px and some background-color properties. You give your container div a background colour of whatever you want the sidebar to be coloured as, and then set the content divs background back to white, or whatever you want that to be.
The float: left for the navbar ul means the main content is pushed back to the top.
The margin-left: 150px gives the navbar 150px on the left of the content to expand into. Obviously you should change this to the width of the navbar.
I have a containing div that is NOT restricting the width of its child divs. The divs are stretching all the way to the full width of the screen, when i have a set width on both the container and the child. Why is this happening. I do NOT have any positioning or floating going on.
Please view my HTML:
<ul class="tabs_commentArea">
<li class="">Starstream</li>
<li class="">Comments</li>
</ul>
<div id="paneWrap">
<div class="panes_comments">
<div class="comments">member pane 1</div>
<div class="comments">member pane 2</div>
<div class="comments">member pane 3</div>
</div>
My CSS, the relevant parts of it at least:
#MembersColumnContainer {
width: 590px;
float: left;
padding-right: 0px;
clear: none;
padding-bottom: 20px;
padding-left: 2px;
}
ul.tabs_commentArea {
list-style:none;
margin-top: 2px !important;
padding:0;
border-bottom:0px solid #666;
height:30px;
}
ul.tabs_commentArea li {
text-indent:0;
margin: !important;
list-style-image:none !important;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
float: right;
}
#paneWrap {
border: solid 3px #000000;
}
.panes_comments div {
display: ;
padding: px px;
/*border:medium solid #000000;*/
height:150px;
width: 588px;
background-color: #FFFF99;
}
You could set max-width on either, or both, of the div elements to prevent their expansion:
#containerDiv {
min-width: 400px; /* prevents the div being squashed by an 'extreme' page-resize */
width: 50%; /* defines the normal width of the div */
max-width: 700px; /* prevents the div expanding beyond 700px */
}
It might also be that you're allowing the div's overflowed contents to be visible, as opposed to hidden (or auto). But without specific examples of your mark-up and css it's very difficult to guess.
Generally giving elements layout is pretty straight forward (always assuming you have a good understanding of floating, positioning and the box model), and in most cases you wouldn't have to use max- min-width to control elements on the page.
My two cents: If I was you, I'd start stripping out code (starting with the !important rule), and see when the problem is solved. De-constructing the code like that is a good way to find bugs.
Sorry I couldn't help, but I'm reluctant to give advice since the code you provided shows a lot of other stuff going on elsewhere that might be contributing to your problem (like having to use !important).
:D
I figured out the problem. The file that was calling in the css was conflicting with another external css file that had the same element with the same name in it. Thank you all for your help though.