We Keep Coding

horizontal scroll bar appearance on web page with change in screen resolution

What is the correct CSS to remove the horizontal scroll bar appearing on the web page with changes in resolution ?
Has the width to be fixed to does it have to be in %?
Also, is the position to be kept absolute or relative ?
Please help - also are there any pointers for best CSSdesign across the browsers and when site is opened on phone ?

There could be many scenarios leading to this issue,
Most common one is that you have defined a parent element (most probably a div) with width of 100% and then you have added padding and margin to it.
have a look at this link :
http://www.w3schools.com/css/css_boxmodel.asp
Other way is to create a responsive design (go with mobile first responsive design).
Read this for more info: http://designshack.net/articles/css/mobilefirst/
Finally I would recommend you use a css frame work. there are many out there and each has it's pros and cons. I personally prefer Bootstrap : http://getbootstrap.com/

you could do a overflow-x:hidden; on the elements you want to hide the scrollbar from

Thanks for the responses, solved this my removing the fixed width of div in CSS which was causing problem

Issue with container holding marquee animation - jquery

I’m having an issue with a container holding the marquee and i’m not sure what’s causing it.
Essentially, the container is stretching way too far, causing the animation to flash across extremely fast (because the animation accounts for the width).
I don’t want to state a width for the marquee because I want the container to stretch to whatever its siblings width is.
I’ve created a fiddle to display what’s happening. In the fiddle, i’ve included the exact html included on my own webpage.
I assume there’s an issue with the css of one of the other elements, but what? What's causing the container to stretch to extreme lengths?
FIDDLE: http://jsfiddle.net/uz9pG/
This is the jquery plugin marquee that i'm using http://jquery.aamirafridi.com/jquerymarquee/

Tables, fluid widths and overflow hidden tricks don't really get along well. You'll either need to change your code to use a different markup structure or put a fixed width on one the containing divs within your <td>.
Also, you have conflicting settings in your JS vs data-attributes in your markup. <div data-duration="2000" data-direction="right" class="marquee">
Here's a working version. http://jsfiddle.net/uz9pG/2/ Takes a second for the marquee to start. You'll need to adjust your margin code to sort that out. This one removes the tables altogether but you can just as easily add a fixed width to something like your .module_content div if that works for your design.
.module_content {
width: 400px;
overflow: hidden;
}

Push down all elements including those who use position:fixed

I'm trying to build fixed html toolbar for my sites network. i'm using css's position:fixed and top:0 and push all elements using body:margin-top.
problem is when a specific site already have a fixed to top element.
is there a way (using css or js) to push down all elements including the fixed ones by a given value of pixels, considering that i don't know if there is one or what is its id/class/top value.
for example, if one site is using HelloBar (www.hellobar.com), i need my bar to push it and all the page content down instead of float over it.
Hope my question is clear enough.
Thanks in advance.

You need to get the height of the toolbar with jquery. Then give the container which is holding the content a margin-top = height of the toolbar.
var toolbar_height = $('.toolbar').height();
$('.container').css({'margin-top':toolbar_height});

Autoresize Element (div) to Fit Horizontal Content

I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).
For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).
So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?
And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?
I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.
Thanks in advance!
[EDIT] (for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.

I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.

Using this class for each individual item:
.eachItem {
display: inline-block;
}
Will work (I've done something similar to that).
The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(
EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.

Resizing to page width for print style sheet

So I've got a page that shows an image with some absolutely positioned text on top of it.
I want to write a print style sheet for it so that:
the image is resized to fit the width of the page
the text is repositioned and resized to maintain relative position and size with the image behind it
So I know I can do (1) with just max-width: 100%, but I'm not sure how to accomplish (2). I'm okay with using some javascript if necessary, but I wanted to know if there's a way to do this in pure CSS. If I do need to use javascript, what can I hook to check for the pixel width of the image in the printed page? Just use the calculated width as normal?
And yes, this question might be more appropriate for DocType, but I've yet to get any help over there.

My problem was that I had set overflow: auto in the main div, which was causing the contents to overflow the printed page.
To fix it, all I needed to do was set overflow: none.
The overflow: auto was what was making it print like
(source: github.com)

I think you could happily leave it to the printer driver if you trim off the whitespace around the images, and then replace the margins on-screen with css, and the remove it again in a print-media stylesheet. Buiding-in the page margins is going to cause problems.