Hi I am trying to learn CSS and have been looking at the source of websites to learn how it works in practice. I came across the 960 grid system the other day, and found a really beautiful site design that is using the 960gs framework >> OneHub
At this stage, I don't think it is very wise for me to use a CSS framework until I have a better understanding of CSS. So my question is in regard to how they have achieved a centered content box on the website whith a background that fills to expand to your browser width.
I have firebug installed and I can't figure out why the divs on their site eg. #gutter, #navigation will expand to fill the entire browser width. I don't see how these divs are calculating their width value, because it seems that none of the child elements are large enough or have a rule which would force these divs to become larger.
I don't understand how the width is 100%, I would have expected to see some margin auto rule or width 100% specified somewhere in the CSS but I can't find it. Other websites using the 960gs may be doing the same thing but I just used this site for reference since I think it has a nice design.
I hope my question makes sense and thank you for any help with this
DIVs, unstyled, will always fill 100% of the parent element. If that's the body, or another element that fills the browser window, it will fill 100%.
It's called a "block level" element. All block level elements behave this way: div, p, form, ul, etc.
If you specify no rule for width, the width is by default 100% -- that is, it expands to fill its parent element. In this case, the parent element is the body, which is also the full width of the viewport.
With the 960 grid system, when you say entire browser width, you mean 960px. Agree with rpflo, above.
Related
I have a web page as follows (see img)
A certain div has a width of 100% which is filling the whole viewport.
When checking on Chrome, the viewport size is 500px while the CSS size is 536.
Does anyone have an idea why it's different please ?
Thanks.
Cheers,
Many modern visualization techniques, such as parallax, require larger elements than the actual viewport size and a smart usage of transform properties in order to create particular visual effects and/or illusions.
Your picture is actually showing a part of the parent element displaying properties particular to such techniques, clearly showing: -webkit-logical-width:800px and perspective-origin: 400px 300px.
For any element with a position value other than fixed, width:100% usually results into the child having an equal width with the parent, not with the viewport. There are notable exceptions from this rule, though.
If you need a more in-depth explanation as to why does the parent have a different width than the viewport (and it's parent parent, and so on... - all the way to the viewport), you need to post a Minimal, complete and verifiable example and I'll lay down each of the ancestors of your element affecting its width.
If, on the contrary, you don't really need to know what's going on at parents level, but are looking for a way to make your current element as wide as the viewport, you probably want to give it a width value of 100vw.
I'm sort of new at Web Design, I'm getting there, though. But I'm still having trouble with elastic layouts and floats. I think that's where my problem with this page lies but I'm too inexperienced to understand it.
Here's my problems illustrated:
https://img.skitch.com/20120327-nwrm3t1u8cwppnwnegw8f2q7st.jpg
Here's a fiddle with my code:
http://jsfiddle.net/C3Dw2/1/
This is what it SHOULD look like:
http://img.photobucket.com/albums/v410/justice4all_quiet/register_13.jpg
I also want to have the right scrolling section fit in it's parent div. Right now, it's flowing out of it.
Ugh.
Any help would be awesome.
EDIT
The only issue remaining now is the icons not staying in their parent divs.
http://jsfiddle.net/xehMG/2/
See the fiddle for code and demo:
Fiddle: http://jsfiddle.net/C3Dw2/4
Demo: http://jsfiddle.net/C3Dw2/4/embedded/result/
see screen shot for output:
Set min-height on each of the elements that u've given height and width in percentage.Percentage will be effective only when the resolution is big enf to encompass ur children elements.
If you want to use percentages - note the min-width required for their children and set that min-width for its parent.Also use overflow:hidden|scroll|auto as a fall back to control the overflow of the children out of its parent.
I'm working on a website for a client, and I'm not excellent at css... still in the process of learning a lot about divs. I made a div that is supposed to stretch 100% of the page, and it works, unless a user is browsing from a lower resolution (1024 x 768 for example) and has to scroll horizontally, the div will then only extend to the original length of the browser window.
That coupled with the fact that my footer is behaving the same way, and is not sticking to the bottom of the page.
The code/website can be found at:
http://cliqthis.com/temp/roadhouse/index.php
Thank you for any assistance, or an explanation of why this is happening would be helpful as I am still in the process of learning.
You see the scrollbar for resolution 1024x768 because <div id='container'> has a width of 1064 pixels set on it. The parent div will have a minimum width of 1064 due to this.
Are we talking about the black bars not extending all the way to the right?
You need to make sure not only that those divs' widths are 100%, but that all their ancestors' widths are also 100%. With normal (static) positioning, the 100% width means 100% of the element's parent's width.
Using the Web Developer addon in Firefox, with Outline Current Element turned on should prove very helpful in determining which elements aren't as wide as they need to be. (Move your mouse around the page and it will outline the element you're over, and tell you the css selector path to it).
Also you might want to compare the structure to the original template you used. It seems odd to me that, for example, you have an empty div.#footer element, and then a table.foot element after it, rather than inside of it. Perhaps you accidentally broke something there?
Set up a minimum width for the div.
div.class { /* ... */ min-width: ___px !important; /* ... */ }
I am working on a web page that used a fixed width layout, centered in the browser. The width of the centered container is set in pixels.
On a couple of pages, there is a large data table inside the content container. In Firefox the table overflows the fixed width container. IE is more complex and will expand the container around the table, and because of some layout issues the container uses overflow:scroll just for IE.
I need to find out if I can use a fixed width on the container, but also allow it to expand to wrap the large data table. I also need to avoid a solution where I would be modifying the HTML... I can't for example use an ID to only target those containers on pages with large tables. I need a pure CSS solution.
My feeling is that this is impossible, and I am going to HAVE to put an ID on those specific containers that need to be larger than the standard. I'm asking here because I really need a second opinion.
Just a note: I have also experimented with min/max-width, without success.
If min-width and overflow don't work, you're going to need css hacks.
If the problem with min-width is that the container is a block-level element and expands to page width, try using a variant of display:inline on that container, so it doesn't stretch. (Or maybe margin.)
I've just spent the last few weeks learning how to properly design a layout. I basically thought I had everything perfect with my website layout and was ready to go about transferring the coding to Wordpress... and then I accidentally resized my web browser and discovered that all of my div layers were overlapping each other.
Here's what it looks like:
Basically it looks as though it's mainly my center content div that is being squeezed out, as well as my header image and navigation witch are in the same top div. My footer is also squeezed down as well. I've searched the internet for a solution to this problem and can't seem to find a thing.
How do I fix it so that my divs stay in place when the browser is resized?
as Walter said your CSS would be helpful. But, the main problem is that the content in the div is overflowing to other divs because the the content's div cannot contain all the content.
In your css, try setting the div's overflow property to either auto (shows scrolls bars) or hidden (to just hide the content if it goes outside's the div)
e.g.
overflow:auto;
or
overflow:hidden;
Express your widths and font-sizes in ems.
Here's a good calculator:
http://riddle.pl/emcalc/
Percentages will work, too.
Check the css in stackoverflow, and try resizing the zoom level in your browser here - you'll see everything resizes nicely at any zoom level.
I figured it out. Turns out that the width of my center content margin was dictated by margins instead of just a direct width (ie. 500px). So whenever the page was resized, the margins on the sides of the browser tried to stay as they were, thus making the entire column smaller. I just had to get rid of the margins and specify where I wanted the column to sit on the page and just justify a width for it.
you can also try the min-width. i am assuming the center div is fluid and sidebars are fixed-width.
Can you post some of your CSS?
The simplest way is to give all of your columns relatively sane width settings so that the size of the browser window doesn't affect the size of your layout. Getting fluid-width column(s) to behave is more complex and depends more on the specifics of your layout.
Check out the min-width property. Another option is applying another stylesheet when the viewport width is below x pixels with CSS3 Media Queries like so:
#media all and (max-width: 30em) {
/* Alternative narrow styles */
}
or so:
<link media="all and (max-width: 30em)"
rel="stylesheet" href="narrow.css" />
CSS3 Media Queries are still not widely supported, so you might want to look into a solution that applies the "narrow" style sheet with JavaScript through the window.onresize event. I'd recommend jQuery for such a solution.
I Had the same problem if you have a width and height in your DIV Container it wont change except the width unless you put a min-width. The problem I had was when I would make the browser window the divs would like go to the next line
so what I did was in the container I set a height and width. Before I didn't set a height I let the divs determine the heights.