I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}
Related
i've a div block where i need to show a block always in bottom of the section no matter if above section is empty inner div should be in the bottom section div like attached
this is what i am doing
<div class="col-md-6 col-xs-6" style="position:relative; min-height:300px;">
Content for upper section
<div class="row" style="position:absolute; bottom:0 !important;">
<div class="col-xs-12">
Div in footer section of the parent div
</div>
</div>
</div>
what i expect even f there is no content in top section bottom div should be in footer of the parent div instead of starting from the top section , as in attached image but that is not the case please help me to solve it
Check your spellings, its a typo:
Change positoin to position
You must have some custom styling because i just tested your code and it works. The row-class is stuck to the bottom as it is supposed to.
By the way, all col-* classes is position relative by bootstrap default. No need to specify it in the style tag.
I have this page with a fixed nabber on top (using default bootstrap navbar).
The page holds a menu that includes links to different parts of the page using html anchors. The point is: the scrolling position is not perfect because I have this navbar occupying the first 50px of the page, so after clicking on the html link to anchor, the content is 50px hidden by the navbar.
What I want to do is: that the anchor link consider the first 50px to scroll it perfectly to the content.
Does anyone have an idea of how to fix it?
With Twitter Bootstrap there is a necessity to provide additional spacing when the navbar is fixed.
Underneath(or after, you might say) you'll want to provide the additional spacing required to unsheath the covered content out of mystery and into usefulness.
further reading: http://getbootstrap.com/components/#navbar-fixed-top (they actually recommend a padding-top of 70px to the body element)
You can either place a div that is 50px high over the content you want to scroll to, then anchor to that:
Link
<div id="link" style="height:50px;"></div>
<div class="content">
Content Here...
</div>
JSFiddle Demo
Or, give the content div a padding-top, or margin-top of the height of the nav bar:
Link
<div id="link" class="content">
Content Here...
</div>
CSS:
.content{
padding-top:50px;
}
JSFiddle Demo
I'm working on a project using the framework Twitter Bootstrap 3.
My basic HTML layout is.
Sidebar
Main content
The sidebar element has 100% height and float: left so that the div classed main-content stays inline.
When I give the sidebar float left property and add a row classed div in main-content div.
The height of .row goes crazy. But instead of float: left if I use position: fixed to the sidebar then the .row height gets adjusted according to content inside the .row.
I did play with the web console in Chrome and noticed that there are two pseudo elements created on row :before and :after.
When I unchecked the css property of those pseudo classes the height of the .row is to the height of the child.
Why do I have this issue when I use float: left to the sidebar?
How can I overcome it?
Did google on this, and I found this. But it doesn't help me.
Also I've created a fiddle to demonstrate the strange behaviour of the .row classed div where it extends to almost to screen of the height but there's nothing present inside the .row element.
Someone help me to get this clarified and fixed.
Thanks in advance.
EDIT : Why the height of the .row div is 100% when I didn't define it's height?
I find your mark-up a bit odd considering you are working with Bootstrap. Why don't you make use of the Bootstrap functionality to create your sidebar and main content div? This way you also don't run into unwanted "100% height divs".
Have a look: http://jsfiddle.net/GeA7N/3/
<div class="page-container">
<div class="row">
<div class="sidebar col-xs-4">
</div>
<div class="main-content col-xs-8">
<div class="well custom-well"></div>
<div style="background: red">Content div that is not 100% height by default</div>
</div>
</div>
</div>
Have you tried using http://www.layoutit.com as a guide for a layout? You don't have to register to use it. Once you get the columns setup correctly you can go in and and set the height of the columns with the style attribute on the div. Hope this helps a little bit
Children inherit attributes from parents, unless otherwise specified.
So let's specify a height for row and it will no longer inherit.
All I am adding is a row height attribute to overwrite both the parent's height attribute.
.row {
background-color:blue;
height:50%;
}
JSFiddle Demo Blue is to show the row div. The grey is just the underlying background of the page.
EDIT : Why the height of the .row div is 100% when I didn't define
it's height?
Reason: The ::before and ::after pseudo-elements of the .row class have the style display:table; thereby causing your first row to fill as much remaining space as it can.
Solution: To avoid overriding the Bootstrap framework, simply encapsulate your .container class with another div which has the style display:flex;
I'm trying to make an our team page using bootstrap but I can't get the footer to act right. At first it was not filling the width of the page, now (I'm not so sure what I did) this problem is solved but it is overlapping onto the content: some thumnails, writing, and a link. The page with the problem is: http://rdtaxsavers.com/new/OurTeam.php
My css file is at rdtaxsavers.com/new/css/bootstrap.css
You'll notice that the rdtaxsavers.com site footer works fine. Thanks in advance!
EDIT: I got it back to where the footer is not overlapping but now the width issue is back. You will see in my css that my modal-footer class has width:100%; at the end of it but this does not fix the issue.
EDIT: This is driving me nuts. When I fix the width problem then it overlaps, when I fix the overlap the width is broken.
I think you are placing the footer inside the Container class, the container class has a width of 1170px. therefore the footer will not be 100% width to the body. move the footer out of container class. or you have to change the width of container class.
this is what you have:
<div class="container">
<div class="row">...</div>
<footer>...</footer>
</div>
try to do this:
<div class="container">
<div class="row">...</div>
</div>
<footer>...</footer>
Try clearing the float:left in the ul.thumbnails element.
Using this really simple html / css (http://jsfiddle.net/XXzTj/)
<div style="background-color:red;">
<div style="margin:12px; background:blue;">hello</div>
</div>
The margin is spaced 12px all round correctly, but I was expecting the red background of the parent element to be shown in the top and bottom 12px spaces, instead its just 'blank space'.
Am I going mad or have I done something wrong?
try this --
<div style="background-color:red;height:auto;overflow:hidden;">
<div style="margin:12px; background:blue;">hello</div>
</div>
http://jsfiddle.net/XXzTj/1/
The child div is forcing the parent div to be rendered offset from its surroundings because you are using the margin property. Since the parent div has no content the browser has no reason to apply styling above or below the child div.
In order to honour the margin properties of the child div, however, which does have content, the parent div is rendered with its background either side of the content.
To have the browser render it in the way I imagine you expect, you would need to apply the padding style. Again, that's because the parent div has no content. Padding forces its styles to be rendered within the area because padding essentially acts like space that content would fill up.
It's collapsing margins in action. Either use padding for parent element instead of margin for child one, or create new context by setting position: relative, overflow: auto/scroll/hidden, or add generated content (:before and :after pseudoelements) with display: block to parent element to prevent margin collapsing.
Not too sure why that isnt working to be honest but this does work:
<div style="background-color:red; padding:12px;">
<div style="background:blue;">hello</div>
</div>