I've been searching through forums to find a solution for the problem I'm facing and couldn't find any. So here I am, again, asking for remedy.
I have this page which encase personal profile form. That form is enclosed in page container div and is quite long that it requires main scrollbar in order to see those hidden. And there's a footer section at the bottom of the page where copyright statements are displayed.
My problem is I can't find a way to make my page container div to stretch along with the body element. I've applied height: inherit to that div but still it refused to stretch so that it covers till the border of the footer section. Now, there is big gap between the footer and that div filled with body background color. Here's a screencap for better understanding.
screencap
/*Form container*/
#form_container{
width: 600px;
background-color:#FDAE80;
margin-top: 15px;
margin-left: 110px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
}
body{
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
background-color: #683468;
}
/*Page Container*/
div.mcontainer{
width: 1032px;
height: inherit;
background-color: #ffffff;
}
/*Footer Section*/
div.footer{
width: 1032px;
height: 80px;
border-top: 1px solid #683468;
margin-top: 10px;
text-align: center;
font-family: Arial;
font-size: 12px;
color: red;
position: relative;
bottom: 0px;
background-color:black;
}
Any help would be appreciated.
EDIT Just to clarify, Footer section is inside page container div. Here my html - htm
Try adding a clearing element as the last item in your page container, after all the form elements. Could be <br clear="all" /> or a div with style clear:both.
A better idea - remove the height: inherit; from your mcontainer style. This fixed it for me.
try adding html to the height to:
html, body {
height: 100%;
}
as discussed on A List Apart: http://www.alistapart.com/articles/footers/
Try to use overflow: hidden; on div.mcontainer.
If you have floating elements in your container, try placing clear-both-div at the end of the container div:
<div id="mcontainer">
...code
<div style="clear:both;"></div>
</div>
I had the same problem, now I am using java script (jQuery) to solve it.
In my case it was the div for the menu bar and I calculated the height from the main container plus the height from the header.
$(document).ready(function(){
var h = $(".main").height() + $(".main").position().top
$(".lmenu").css({height:h+"px"})
$(".rmenu").css({height:h+"px"})
});
Right now it seems to make more sense to use the height of the body:
$("body").height()
If there is a version without javascript, it would be interesting to know. But meanwhile this could be a workaround.
Maybe you should try adding: clear: both to footer class
Related
For some reason the footer on one page of my site is not full width. There's a huge white space on the left that I cannot seem to get rid of and its causing my entire footer to be shifted to the right.
This is the current CSS:
#main-footer {
width: 105%;
margin-bottom: -50px;
margin-left: 0;
margin-right: 0;
height: auto;
padding: 50px;
background-color: #2E2E2E;
}
#top-footer {
height: 30px;
background-color: #77CAE9;
margin-left: 0;
width: 105%;
}
I have a feeling it's related to the page width but I can't figure out where to adjust that either. I'll be so grateful if someone can help me out with this!
EDIT: The URL to the page is http://tstand.com/blog
Thanks :)
Angela
Start with moving your <footer> outside of the <div class="container">.
The class .container is used to centre it's content in middle of the screen. See more details here here:
http://getbootstrap.com/css/
A common cause for this can be a default padding or margin of <body> or even <html>. In that case CSS like this should fix it:
body {
margin:0;
}
If the problem persists please post a complete, but minimal example that demonstrates the issue.
I've applied the CSS sticky footer tutorial that I got from here on my website, but for some reason I can't get it to work?
JSBin
Thanks in advance.
Remove the top margin from #body and replace it with padding:
#body {
width: 1200px;
margin: 0 auto;
overflow:auto;
padding-top: 80px;
padding-bottom: 170px;
}
add 100% height to html (not only body):
html, body {
background-color: #FFF;
margin: 0;
padding: 0;
height: 100%;
}
Full JSBin solution and preview
Did you apply the correct #footer id in your HTML code?
<div id="footer">
</div>
I can not immediatly see what is wrong with your code (it is a lot of css, and you use strange tags like center). I swear by this version of the sticky footer however: http://ryanfait.com/sticky-footer/
Works fine for me and is very much legacy/cross browser compatible. Perhaps this is an option for you...
I have a Span tag containing a IMG tag and another Span tag.
I would like the inner Span tag to be aligned to the left and the IMG tag to be centrally aligned plus I want both the tags to be vertically aligned in the middle, and I can't seem to get this right...
This is how it looks (It's blue because the outer Span tag is marked in FireBug to show that it's stretching the entire surface):
As you can see in the image, both tags are centred and they are also aligned in the top of the container, I don't want either of this.
This is the markup:
This is the current CSS of the tags:
.v-button-wrap {
height: 100%;
display: block;
padding: 6px 15px 0 9px;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-icon {
margin-left: auto;
margin-right: auto;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-button-caption {
text-align: left;
line-height: normal;
vertical-align: middle;
}
I left out the CSS that isn't relevant for my problem, colors, font-specs and such. Needless to say I'm no ace at CSS. And I've looked up several guides covering the problem, but I've only managed to find examples where the entire content of a div is centered, and that's not what I want.
Does anyone with good CSS knowledge see the problem in my code? Or have another solution to solve my problem..?
Thanks!
EDIT: Here's a screen shot of the entire layout due to request. Sorry I have to blur some things... but they are in either case not important. =)
EDIT2: I did manage to solve my problem using the following CSS:
.v-button-details-panel-header .v-button-wrap {
height: 100%;
text-align: inherit;
padding: 0px;
}
.v-button-details-panel-header .v-button-wrap .v-button-caption {
display: table-cell;
position: relative;
text-align: left;
}
.v-button-details-panel-header .v-button-wrap .v-icon {
display: table-cell;
position: relative;
top: 12px;
margin-left: auto;
margin-right: auto;
}
I'm sure the advice dgvid proposed would have been good for a static layout. But since the panels and horizontally stretched buttons move depending on expansion and collapsing that wasn't a fitting solution.
You might need to set the CSS display property of both your img and span.v_button_caption to inline-block.
See also this article: Understanding vertical-align, or "How (Not) To Vertically Center Content"
As for another technique to achieve the desired result: If you know the height of the container element and you know the height of the element to be centered (and unfortunately from the CSS you've posted, it does not appear that you do), then you could
Give the container element CSS property `position: relative'
Give the element-to-be-centered CSS property position: absolute
Set the CSS top property of the element-to-be-centered to (containerHeight / 2) - (centeredEltHeight / 2).
I created a wordpress blog (http://raptor.hk), but i am unable to set the right sidebar into correct position. i think i have missed something in CSS. the DIV is named "rightbar". I would like the DIV to be positioned right next to the content, within the white wrapper. Also, support of fluid layout (not moving on browser resize) is needed.
the problem is solved (see my answer), but anybody can give better solutions?
You can try putting the following styles for the div id "rightbar".
position: absolute;
top: 200px;
right: 300px;
That will put the "rightbar" div at the top of the page, just under the header and to the right.
I found a solution.
I put the DIV just inside the #main DIV, and set the following:
position: relative;
margin-top: 0px;
margin-right: 5px;
float: right;
width: 200px;
border: none;
border-collapse: collapse;
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.