I know this is a common problem and I feel really stupid for not being able to figure it out, but I have a 3 column layout in HTML, and I seriously cannot figure this out for the life of me.
Here is the basic layout of my site:
fixed header,
1 sidebar on each side,
middle area with content.
Here is a mockup of the site that I'm speaking about: http://eitanrosenberg.com/tests/pop/bootstrap/
It looks ok at first, but when the browser is resized, the sidebars get really small and there is a ton of white space. Why is this? Thank you so much in advance.
Look at it this way.
The height:100% of the container div (and the column divs) gets their height from the body-element (100% of that), and the height of the body element is calculated as 100% of the height of the html element
The height of the html element is then (in practice) calculated from the current height of the browser window (100% of that).
So the height of your boxes will all be set to match the heigth of the browser window...
and this is exactly what you see when you shrink the browser window heigth!
Because:
Once your content no longer fits within the height of its container (ie. when you shrink the browser window you also shrink the calculated heights of all your containers and eventually the headroom will be too small) - overflow happens. The content of the "highest" box will then be the first to overflow, and parts of its content will then spill out of it to be visible below the boxes (since you don't use overflow: hidden).
The browser will then allow you to scroll past the bottom of the boxes (so to speak) in order for you to be able to see the content that "overflows the box", but it doesn't adjust the height of container - the boxes will still keep the same height as the browser window while you scroll...
So the background patterns will always be the height of 100% of the browser window in this example (an not match the height of the highest content when the height shrinks below that)...
One way to remedy this - is to adjust the height of the boxes with Javascript (calculate the height of the highest column and set that as an absolute value for height on the container and the boxes - every time the page resizes)
... or you could use "display: table" and "display: table-cell" on the container and the columns respectively as a workaround (overriding the Bootstrap grid CSS) for this particular layout width/media queries...
Hope this helps!
Good luck!
Related
I have the following layout I need to solve
I understand that the whole idea of the responsive design is to leave the height to adjust to the content, but for this particular work the customer wants it this way no matter how I have to figure it out but I'm struggling hard to achieve it
In my mockup I have a 100% height and weight body, and then a container taking 85% height of the body size.
Inside that container there are the following elements:
A Top div container with the company logo
A Progress bar with a step number
A small div with some instructions for the current step
A Div containing the form elements that the user has to fill
A bottom div with 2 navigation buttons
The content should be always visible no matter the device used (see image below)
Number 4. has a inner scrollbar with overflow-y because that content will change
In order to do this i set heights in percentage (%) for each div within the container, however I need some padding for the elements, but when the browser resizes or the device changes height and width the elements overlap each other
I don't want to rely on a bunch of media queries to fix this. I wonder if anyone can find an approach or some reference for this since i can't seem to find it
Thanks
If you don't want to use many media queries, I think you should use Jquery (or Javascript) like this:
Fixed height of all div except FORM CONTENT (include padding, margin, border with box-sizing: border-box). You can use some media queries for best style.
Use Jquery to calculate height of FORM CONTENT (this is scrollable content)
Example:
$('#form-content').height($(window).height() - X);
// With X = total height of other divs includes margin, padding, border
Call this script in $(document).ready(...) and $(window).resize(...)
Hope this help.
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 hope the title was clear enough to get the general idea. The problem itself is a little bit trickier. To help with the understanding see my illustration below.
Since I don't have enough reputation points to include the illustration directly, here is a link to it on flickr.com: http://www.flickr.com/photos/cumbrowski/12009919663/
Or link to image here at Stackoverflow.com: http://i.stack.imgur.com/1Kswi.png
Phrasing it out in full-text.
The outer-most container should always be vertically and
horizontally centered in the available browser window. Both Width
and Height are dynamic, but the height cannot exceed 90% of the
available window height.
The inside of the container has 3 containers.
The top-most container has a fixed height but the width should span
the entire outer container width.
The bottom-most container should also span the entire width of the
outer container, but it's height can vary, based on it's content.
Preferably, If the container is empty, the height should shrink to 0
(if possible).
The center-most container controls the width and height of the
outer-container, except, if the total height of the outer container
would exceed the maximum of 90% of the available window height. In
that case the center-container should show scroll bars.
NOTE:
If there is no pure CSS based solution possible and the help of JavaScript needed, okay, sad, but if necessary, what can I do?! jQuery would be okay in that case as well.
I am creating a blog based on the 960 grid system. It has three simple divs:
header 2. Content 3. Footer and each of them has a fixed width div which holds 2-3 columns of text. The content div, and the fixed width div inside it have the same background color, but when i reduce the size of the browser window, for some reason it ignores the content div's color and reveals the color of the html body.
here's an example of another website where it happens: http://encourageothers.com/ ... reduce the size of the browser to something less than 900 px or so, and scroll horizontally to the right ... u will see what I mean.
Please help me! ... This is driving me nuts!!
jake is absolutely right with the 100% width related to the viewport of the browser.
instead of adding an additional max-width, add an additional MIN-width to the div showing the resize-problem. if your smallest width, before the scrollbar appears, is 1200px - just give the div in question a min-width of 1200px.
Found the solution! ... just set a max-width in pixels and also a width in 100% wherever u see this problem. Works for me.
I have just finished redesigning this site (www.imustsolutions.co.za) and I have a problem with the header and the footer when the user zooms in (Cntrl + in FF).
Here is the problem:
The background color of the footer/header does not paint to fill the rest of the screen (horizontally) when the user zooms in.
What am I doing wrong?
Here is the site again: www.imustsolutions.co.za
Thanks in advance.
Regards,
M
The problem is that the width of your header is set to 100% (100% of the original browser window), whereas your main content is set to 980px.
So when you are on a full size mode, 100% will be greater than 980px, but on resizing or zooming in 100% will become less than 980px and your header will break whereas the main content will overflow to the right, if need be.
Setting a min-width for both the header and the footer to the same value as the width (plus the padding and margin if any) of the main content is usually enough to fix such issues.
With regard to your site, as it seems your main content is set to 980px you may then try:
#header {min-width:980px;}
That's basically how it's supposed to work. The width of a block-level element is determined by the width of its containing block. And the width of the initial containing block (i.e. the containing block of the html element) has the dimensions of the "viewport" (i.e. the browser window).
In other words, unless you've explicitly set widths on your blocks to make them wider than the viewport, they'll never be wider than the viewport.
You can see the same thing happening on the footer of StackOverflow itself too, for example: if you zoom in on this page until you get a horizontal scrollbar and then scroll sideways, you'll see the gray background chopped off too.
One way you could fix this is by turning the entire page into a float, since the width of floating elements shrinks to fits the dimensions of its contents and isn't contrained by the dimensions of the viewport.
Simply adding float: left to the html or body tag should do the trick. I haven't tested that in all browsers, though.
Your header and footer DOM element should be placed within main content. So your header 100% will be limited with main content size:980px