I am using :before and :after to create some elemetns outside of my main content block, they have width:100% so they fill the full length of the browser.
Unfortunately they add a scroll bar to the bottom of the screen that I dont want. If I use overflow:hidden, the scroll bar goes but the designs are clipped and I loose the content on the sides of the site.
Any Ideas?
the width of the elements totals 100% + 100% = 200% of the (I am guessing here) body width and then add your main content block width - this is why you get the horizontal scroll bar.
as a general suggestion, post the code on jsfiddle.net so we can have a look and play with it, because it is not possible to help you more without it
Related
Here's what I have: 1000px width div's inside a 100% width container with a background image repeating horizontally.
Live: http://www.baskra.com/scroll
When I resize the browser window (anything less than 1000px should generate a horizontal scroll bar, right?), the scroll bar doesn't come up, as you can see in the image below.
What should I do to make the scrolling bar appear? (Nevermind the slideshow, I'm still working on it.)
JSFiddle: http://jsfiddle.net/vBjeg (Not every image is working, but I believe the most important here is the CSS.)
I appreciate all your thoughts!
Remove overflow: hidden from .row
I am building a web site for home made jewelry. I'd like it nice and centered ( for all those ppl with low resolution ) so all of the titles, navigation and content are in a single div, that I positioned in the center. On the left ( inside the div, everything is inside the div ) I have my vertical navigation sidebar div. On the right I have the title and the content. So far so good. Now to the problem:
I would like my sidebar to have a right border all the way from the top of the page to the bottom ( with 1em margins if possible ). The trick is that my content to the right variate from text to pictures and forms and is quite different on every page - when the content is larger then the screen the screen scrolls and in which case I'd like my sidebar border to scroll down with it - I've not been able to do that.
I think I have done quite a reading - my closest solution was to set the border's position to static but this quite obviously isn't working when the site is centered. So to the question - is there any CSS only way to make the sidebar div's height dynamic or something and define it to expand with the content to the right? This way the border will always reach the bottom.
Wrap your navigation in another div. Give this new div a height of 100% and assign it a border-right CSS property. You can also set padding too. Hope this helps.
How about giving left border to the content section Div, instead of Nav menu. so that way the border could change height according to the content area height
body,html{
height:100%;
}
#wrapperdiv{
height:100%
}
#navigation{
min-height:100%
}
I have a div sidebar which scrolls with the page on my website. Everytime the window resizes, the sidebar would overlap the page content.
Here is a demo page to show the problem:
http://wrasa.org/memberpage_demo.html
Here is the CSS code for the menubar I'm using for my page
.menubar {width: 200px;position: fixed;left: 20px;down: 200px;}
Any suggestions for fixing the problem or using a different code would be welcomed,
Thanks in advance!
As, you are using fixed positioning; div will remain fixed relative to the browser and will overlap if other content shift in the area. This happens because browser don't allocate any space to such divs.
In your problem you be solved by specifying the min-margin to left of main content, which can actually be achieved by min-width css property. just place one more to left of main content with some min width.
You can know more on this from this link
Using a percentage margin in CSS but want a minimum margin in pixels?
I have a fixed size layout where I center the content container.
I want the menu (home, about, contact, login), to span 100% of the screen.
Take a look at this jsfiddle: http://jsfiddle.net/Hxhc5/1/
The result I want is this:
I have tried a to make a 100% width container with the menus, where I would have a container inside to center the menu, but it did not work well, because then the layout is relative, changed with the window size.
Wrap an extra div arround the menu, give it the grey background, remove the extra padding, make the menu bg white:
http://jsfiddle.net/sg3s/Hxhc5/3/
This is problematic when we want to keep the space between the menu and the right col 'open' though.
The easiest way and probably the best is to have a mock image of which the middle is left 'open' and use it as a background. Since a png image of this type is insanely small it is better than more markup, css or a js solution, plus it has no quirks if used correctly:
http://jsfiddle.net/sg3s/Hxhc5/10/
You also showed your actual developement site; if you want to implement this for the menu you will have to make the menu fixed height (everthing else and its width can still be fluid) due to the type of opacity you use in the layer. The same background trick can be made to work with it.
Why not use a background image that spans the entire page instead?
Just add the content of the menu into another div, with width: 500px, margin: auto; and set the menu width to 100%. Here is updated jsFiddle : http://jsfiddle.net/Hxhc5/2/
I seem to be missing a horizontal scroll bar on this page, http://www.animefushigi.com/
If you make your browser window skinner, half the page will be cut off but there will be no scroll bar.
I believe the main content width should be 1024 px before the need of a scrollbar
because the wrapper div does not have a stable min-width(and for browser which not support min-width, such as ie6, there is a child div .wrapper has a stable width in this case, so it will be ok,too ),which should be setted.
e.g.
//add css
#master_wrapper{min-width:1000px;}
It looks like overflow:hidden is used to clear floats in a couple of places. If you get rid of it on #master_wrapper then the horizontal scrollbar will return. However this will cause that element to collapse to a height of 0 and making this image disappear from your page. You can however rearrange your background images using the html for one of them to sort that issue out.