I have a div that I want to not resize with the browser window. I can't set the width or give it a min-width because it does need to resize with its contents. I simply want it to ignore the browser size completely and size normally to its contents. Seems pretty simple but I've been searching for days and been unable to find a solution to this.
Any ideas? I'm looking for an html/css solution not javascript. I already have a javascript hack that works but I'd rather not do this.
A div full of content won't be wider than the browser width by default unless, for example, there is an image in there that is wider. That will cause horizontal scroll. If you want it to be wider, you can give a width like 150%.
Related
I have a div which requires scrollbar. I used style="overflow-y:auto" for my div. But if the scrollbar gets displayed, it is affecting the width of the content. Is there any way to maintain the width of the content, constant inspite the scrollbar getting displayed or not. Also I can't set the width of the div in pixel, since my application must be compatible for all screen size.
The element's content width includes the width of scrollbar.
So sorry to disappoint you, but this behavior can not be changed.
Even though you haven't shared much details on your specific case, this could probably be solved by using JavaScript/jQuery, as explained here in various forms:
How can I check if a scrollbar is visible?
I am trying to get a div to expand to fill its container without causing that container to expand beyond the browser window's width, as in this page. Click "Expand" next to "Stack Trace in the last entry.
What it's supposed to do is show a horizontal scrollbar.
What it's actually doing is expanding beyond the width of the window.
I can get it to sort of work if I give the <div class="stack"> element a max-width in pixels, but I want it to expand to fill no matter how wide the window is, without expanding beyond it.
How can I fix this layout? What's a general way with css to get an element to expand horizontally to fill its container while not going beyond the window's edge?
The Page is back on now!
I cann't get your table stuff sorted. There are some invalid width Parameters.
You should use div-Containers rather then tables to layout your page!
The workaround solution I came up with was adding a max-width to the expand/collapse div. It doesn't really prevent the table being wider than the window, but it solves 95% of the cases.
Don't use tables, use DIV's and for full width use
width: 100%;
This will always use up 100% of the browser window width.
You can provide you outer Div width:100% so it will take browser width. Or else you can calculate browser width with Jquery $(document).width(); and store this in variable and provide to your outer div.
I am kind of new to this but I figured the best way to explain my situation was to draw it out so here is the image of what I am trying to do http://d.pr/i/5ez3
Basically is there anyway to have floating divs re-size once they collapse and the browser window gets smaller.
You will have to use media queries to break down at what width the divs should take when the width of browser falls below some particular width.
http://css-tricks.com/resolution-specific-stylesheets/
How can I wrap the text displayed in the browser to either the width of the browser or a specified width, whichever is less?
I have been putting text inside <table width='850'> to wrap at a specific point, so if the user maximizes their browser on a gigantic monitor a whole paragraph doesn't fit in a single line. But when the user makes the browser super narrow, the above method causes text to carry over the edge of the viewable area. Not what I want exactly.
So, I'm looking for a better approach.
Oh, maybe I should add that my pages are extremely simple. There aren't banners up and down the left or right sides of them. Just text and images occupy the space from the left border of the browser to the right. Boring stuff.
EDIT - I accepted an answer, but I did find an issue (and a solution that seems to work) with the accepted answer when used with Internet Explorer. I spent half an hour trying to get max-width to work, but just couldn't. Every other style property worked fine though. Then I discovered this http://svendtofte.com/code/max_width_in_ie which said I had to use the following for max-width to work in IE, and it did: p { width:expression(400 + "px"); }. I don't understand why the fiddle example worked with max-width on IE, but not my page. Maybe it's cuz I include my css in my html page?
You could set the max-width property in your css.
That way, the page will expand until a certain point and then no more.
Example:
.mainDiv{
max-width:700px;
}
Working example: http://jsfiddle.net/Pa5JG/
More info on max-width: http://reference.sitepoint.com/css/max-width
Just use max-width. See this fiddle.
i made myself a Speed Dial-like homepage with links I visit the most.
Now, i made it elastic, so when browser window is narrowed horizontally, the boxes getting narrower too.
What I want is that when browser window is narrowed vertically, that boxes get narrower again.
I tried with several percentage height rules but it didn't work, need help.
Here is the page I'm working on its one-file page so CSS is not separated.
http://www.purplerspace.com/dl/
You have to add the height percentages to almost all the divs if you want it to work. Add height: 100% to html, body then the wrappers and also the lis and yeah, the a style too.
Don't know if it's optimal but tables for this should work. Set the table height and width to 100%. And don't forget to set your html and wrapper tag to 100% in height.