in my website designing side i meet one problem , even now also i don't know how to rectify that problem. any one help me
<div style="overflow:auto;height:535px; width:656px;position:absolute;" id="abit" runat="server" >
contents...
</div>
in this code i got scroll bar. but i don't want that scrollbar, but i want that actions, how to do this?
advance thx...
Your question is a bit unclear. Perhaps you should try another value:
overflow:scroll - Scrollbar is always present.
overflow:hidden - Extra content is clipped with no scrollbar.
Or perhaps a few moments looking at the other overflow options would answer your question.
Try removing the css height property. The scrollbar might appear because the content is higher that what the div could handle.
1) The scrollbar is appearing because the content of the div is larger than the fixed height of the div.
To get rid of the scrollbar, you can
1)Increase size of div
or
2)set style="overflow:hidden"
or
3)Remove the clamp you're setting, in other words, get rid of style="height:**px"
Related
I have a fixed footer at bottom, When i turn on developer options it overlaps my content div. Also, When i open this in tab it overlaps and causes problem to insert information in the form.
The way to avoid this could be z-index. But, Is there anyway to avoid it altogether?
See this image:
Appreciate the help!
I think you should add padding-bottom to your body, the value of padding-bottom should equal with the height of the footer.
I am developing a website which is 100% height and width. There is a panel stuck to the left and the main content area to the right, which is scrollable.
However, in the content area the last div inside is getting cut off. I cannot see why. I have tested this on Firefox and Chrome, both are doing the same.
Here's the link to see it:
removed
As you can see, it is cut off, adding a large margin-bottom (50px +) seems to fix it, but that just looks bad.
PS: Don't worry about the missing images, it's because I've only uploaded this page, not the entire website.
Thanks in advance
Height: 100%; is fairly inconsistent across most browsers. Try to avoid it.
I'm not entirely sure how your layouts usually work, but setting overflow: hidden; on everything in your CSS reset is going to make things wonky from the start.
Take out "overflow: hidden;" and you can see the problem. Your content pane is matching the height of your body, as such, you're losing the height of "topBar" on the bottom of the page. because the Body is hiding the overflow.
Yup -- try overflow:scroll; or overflow:visible; In addition, I'd see if you can make it work without float:right;, 'cos that takes it out of the normal flow of things and can wreak havoc with your box adjustments.
ETA: I think I see the problem; each of your little content divs has floats left and right, which is gonna render margins useless, 'cos as far as the browser is concerned, each box's content is out of the normal flow of the page.
ETA(2): You have overflow:hidden; in your big first rule, where you set default styles for like a hundred different elements. That's your main problem. Change that to overflow:visible; (or whatever you prefer) and set appropriate overflow properties elsewhere and you oughta be good. I was able to mitigate the issue by doing this. There's still tweaking required, but that solves the base problem. I would still get rid of the inline floats, too.
From main-style.css line 5:
overflow:hidden
and main-style.css line 127:
overflow-y:auto
are both causing the page to cut off the bottom. However, when you correct this, it reveals that your wrapper div isn't stretching to 100% of the window height (because the background gradient stops WAY before the page ends), and the content inside your main divs go wonky. These are things that the other posters have discussed being major obstacles in your page formatting correctly.
Please take a look at this JsFiddle here. It is working in Chrome, FF, IE 6-8 and Safari.
Not sure how to fix the 100% height problem yet, but to solve the floated div content problem, make sure you declare a width of 50% on both the left and right-floated content
(also, you can make the right-floated content text-align:right in order to make it REALLY stay to the right of the div).
<div class="centerText messageWrapper">
<div class="messgaeHeader">
<div style="float:left; width:50%">
From: 12345678<br />
</div>
<div style="float:right; width:50%; text-align:right">
Date: 123456789<br />
</div>
</div>
1234567890
</div>
Perhaps someone could chime in with a fix for the 100% height issue this is causing now. I realize this isn't a complete answer, and my solution breaks the page in a different way, but perhaps it will be a jumping off point to you or someone else who may have the solution.
I have a table in a div and set my overflow:auto in this container div.
I get a horizontal scroll bar, but not a vertical one when there are many rows.
Whats the problem?
try overflow:scroll instead. Will force the scroll bars to appear - full description .
Alternatively it could be because you haven't set a height to the div (more likely). Try setting one and see if that improves things.
Alternatively has the container div got the height set too big so preventing the vertical scroll.
To be honest I'm trying it and I'm finding it hard to stop the horizontal scroll from appearing (as long it is scroll:auto)
Maybe I've missed (misunderstood) something.
I have a div, it has overflow:auto and I have content that has a set width to it, (6 photos in a row) when there is no scrollbar they are fine, however when the content goes to force overflow to add a scrollbar instead of adding the scrollbar width to the width of the current div it just takes the space from the inline element space, forcing it to cut off the last photo, and have a bunch of extra whitespace where the additional space is left over. I am using min-width on the wrapper of the div with overflow auto. Is there anyway to fix this?
There isn't really much you can do about this. A couple ideas:
Use overflow:scroll to force the scroll bar to always display. That way there will be no surprises; it will be consistent.
Compensate for the width of the (possible) scroll bar in your initial CSS. This, unfortunately, will have to be a guess. 30px or so should be plenty.
Another thing to consider is reworking your design. Page elements with overflow:auto/scroll can sometimes be useful, but I hear they can have usability problems on some touch devices, and well, scroll bars are ugly ;)
I'm trying to follow CSS How to set div height 100% minus nPx but for some reason it is not working.
I'm new to web development, so I apologize if I am doing everything in the most horrible way imaginable.
Here is the page: http://glados.cc/chat/layout.htm
The sidebar should be at the right, not sure what I'm doing wrong as I'm following the stackoverflow question I linked to at the top.
The text does wrap if it is too long, which is good! But the height that is taken doesn't increase, which makes it overlap the next line.
Also there are no vertical scroll bars (unlike the stackoverflow answer I linked) when the content gets too long..
Thank you!
The scroll bars can only appear if there is a height or maximum height set. If that is not the case, they simply expand.
Add something like height: 300px;
As for the wrapping of the chat text. This text is positioned absolute, so it is taken out of the flow of the document and cannot push other elements lower. You maybe want to consider using margin-left instead of position:absolute and left on .chatText.
And, as DrStrangeLove pointed out, your sidebar is missing the absolute positioning.
Here is an example:
http://jsfiddle.net/3YrZT/1/
try position:absolute for sidebar and middlePart