hi i am haveing trouble with height.. please tell me friends how can i resolve this issue.
Please check here to check the website
this is the link of my website. and Rates page .. i am having trouble with height.
i wrappered all the content in
#wrapper {
background: url("images/wrapper_bg.png") repeat-y scroll left top transparent;
margin: 0 auto;
padding: 0 10px;
width: 960px;
}
but
#main {
height: 100% !important;
width: 960px;
}
is not responding for the internet height.
please help me
Try putting overflow:auto; in your #main
The main issue is the elements inside of #main are floated. So the height of the floated elements won't cause the height of #main to expand
OR
put clear:both; on the #footer
The problem is that because everything inside your #main div has the float property set. Basically, this makes main look like it has no elements, which causes the #footer div to rise up. I can think of two ways to fix this:
Add "overflow: hidden" to your #main style, or
Add "clear: both" to your #footer style
Related
I have the whole page set to gray as the background color, but would like only the content area to be set to a different color. According to my CSS, this should be happening but it isn't. Why not?
html,
body {
background-color: #FAFAFA;
}
#page-wrapper {
margin: 0 auto;
padding: 0;
width: 1024px;
}
#content {
background-color: blue;
}
OK, well, I thought there might be an obvious answer, because this is a severly slimmed-down version of my code. Yes it has content and there are things in the page-wrapper.
The jsfiddle link is here: http://jsfiddle.net/2pzo80Lu/
Also, if anyone has critiques of the code otherwise, it would be much appreciated.
You need to add overflow:auto to your rules for #content because the children are floated. Floating them essentailly removes them from the normal flow and collapses the parent since it behaves as if there's no content. Adding the overflow rule restores the behavior you seek.
#content {
background-color: blue;
overflow:auto;
}
jsFiddle example
your elements inside #content div is floated right and left so the div has no height ( 0px ) , you can solve this in css by adding the following code
#content {
background-color: blue;
overflow:auto;
}
or in html by adding the following code before the close of the element of #content
<div style="clear:both;"></div>
this will clear any floating and you code should work very will. good luck
I'm trying to have the div expand to fit the content contained in a <section> tag for my HTML and CSS page. The thing is that it cuts off midway through the content and I can't get this to work.
So far I've experimented with setting overflow:auto but to not much success - the inner container scrolls but I'm looking to make the whole page scroll.
Can someone have a look and help me out? JSFiddle: http://jsfiddle.net/6xgT5/
Just get rid of height:100% on #mainContent and replace it with float:left. That should do the trick. Let me know if that resolved the issue.
For the footer, git rid of position absolute and replace it with float:left, width:100%:
footer {
float: left;
background-color: #CAD0C8;
border: #000 1px;
width: 100%;
height: 45px;
text-align: center;
padding-top: 5px;
}
Thats because you are fixing #footer and it makes to float outside a content layout. So you need just add to the section padding-bottom :45px /*footer height*/
Add overflow:auto; to #mainContent.
This div below is causing the page to scroll horizontally on smaller then 1450px browsers. I thought overflow would fix this issue, but does not appear to... may be something I need to do on the parent div's. Any ideas?
http://barr-display.mybigcommerce.com/
#Header {
position: relative;
clear: both;
width: 1450px;
min-height: 190px;
overflow: hidden;
background: url('/content/headerbg3.jpg') repeat-x;
}
On body you need the following
body {
width:100%;
overflow:hidden;
}
The reason your code is not working is that you're setting overflow on the child(#header) when it needs to be set on the parent.
Looks like you want three things:
No scrollbar when header image is cut off.
YES to scrollbars when main page content is cut off.
Ability for your header background to extend to the right if the browser window is wide.
You really needed to post more of the relevant code here. However, I look at your site, and this'll fix it:
Change your rule for #outer:
#Outer {
clear: both;
margin: 0 auto;
min-height: 190px;
width: 1024px;
}
Remove the margin and width rules from #outer's parent, and replace with width:100%;overflow-x:hidden;
Add these lines to your css:
html, body {
width:100%;
}
body {
overflow-x:hidden;
}
You need overflow-x so the vertical scroll bar doesn't disappear.
Also, remove overflow: hidden; from the #Header.
I have the following:
XHTML:
<div id="container">
// contents
</div>
CSS:
#container { margin: 0 auto; width: 940px; overflow: hidden; padding: 10px; border: 1px solid #CCCCCC; }
The div is centered on the page with margin: 0 auto and I use overflow: hidden to allow the DIV to automatically expand down to the height of its contents.
I have some content in the DIV which has a box-shadow on it. The problem is due to the overflow: hidden rule the shadow does not fully appear on the page. The only ways around this I have found:
Take out overflow: hidden - but then the container DIV doesn't expand down.
Use height / min-height on #container - however this wont work well with all pages on the site.
Use float: left - but then the DIV isn't centered on the page.
Anybody got any more suggestions for this?
You can use one of the many clearfix techniques. That will let you remove overflow:hidden and fix the cropped box-shadow.
Here's a recent article on the topic: http://css-tricks.com/snippets/css/clear-fix/
Pretty sure some margin on the div would solve it, but if you show some more code it's easier to check.
in the header section of my web page, the design is something like the logo and navigation div should overlap a repeat-x image(i.e bg-header).
this is the html i have used
<div id="header">
<div id="header-bar">
<p>kljslakdjlaskjdkljasdlkjasdlkjaskldjasjd</p>
</div>
</div>
and this is the css
#header {
min-width: 1040px;
height: 111px;
position: relative;
}
#header-bar {
margin-top:50px;
height:53px;
}
now when in the #header-bar if i give margin-top:50px then the header div shifts the position to 50px from top. i want to achieve something like
the header div is to define the height of the header content.
i want to wrap header-bar in the header div and the elements or the div wrapped inside the header div should should have the margin of 50px from within the header.
for example the header-bar should have a margin of 50px from the top of the header div.
when i use the above code it moves the position of header div too. i want the header div to be fixed on top only the sub div or content within the header div is what i want to position.
hope i am not confusing you.
where i am going wrong?
thank you
EDIT: it works if i use padding-top but excluding the background with repeat-x property.
i want to move the image with repeat-x property. in the header-bg div
Margin doesn't affect the position of elements relative to their parents.
To achieve the effect you want, you need to use padding on the #header, for example:
#header {
min-width: 1040px;
height: 61px;
position: relative;
padding-top: 50px;
}
#header-bar {
height:53px;
}
If you add "overflow:hidden" to the #header div, it'll work like a charm! Note that there is padding, but also margin. If you remove the padding, there will still be space left, that's the margin!
Jsfiddle example here
Use padding on the header div rather than margin.
#header {
min-width: 1040px;
height: 111px;
padding:50px 0px 0px 0px;
}
#header-bar {
height:53px;
}
You're running into something called margin-collapse. In essence, adjacent margins will collapse together, and only display the larger one - that is, the one with more absolute distance from 0. Since your #header margin (0px) is adjacent to your #header-bar margin (50px), the 50px margin is the one that is displayed, and it affects both of your elements.
If you were to add even 1px of padding to the top of #header, you would get the desired effect:
#header {
min-width: 1040px;
height: 111px;
position: relative;
padding-top: 1px;
}
I'm not sure I understood the question.
Does it seem like your answer : link ?