i really need your help with a CSS-Layout. I tried a few time, however i've no chance (and actually no idea how) to solve it. Moreover I don't even know if it's possible the way I want it!
The #mainContent should always be centered horizontally in the browserwindow. It should be 1024px in width and a 100% of the windowheight. Now the difficult part. I need two divs, one on the left side, one on the right side of the #mainContent. Both should be 100% in height, but should ALWAYS have the rest of the browserwindow. If the browserwindow has only 1024px in width #navLeft and #navRight are invisible.
Is that even possible, if so, HOW?
thank you
1024 is a poor choice of widths. Monitors with 1024 x 768 resolution will ALWAYS get vertical scroll bars. 960px wide is the common choice.
You put the whole thing in a wrapper DIV:
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Inside you have three DIVS, floated-left with specified widths.
Controlling the visibility, based on the user's browser width needs to be done via JavaScript. CSS alone cannot do this.
CORRECTION: this article explains how, and it's something I never knew you could do.
Related
Ok this has me completely stumped, have been trying to fix for days with no avail.
I have used cbpFWTabs.js to split my content.
It however seems to behave very odd in that it ignores my height parameters and will set the div to the content size.
Only way to stop this is to set a fixed height, but i would like the div to dynamically resize to fill the rest of the screen and display scroll bars if it exceeds the content-wrap div (keeping the menubar fixed).
I've checked all parents, it just doesn't seem respond to anything i try :(
Example here:
http://numerco.com/wp-content/uploads/NUA/scratch.html
I'm sure its somthing trivial i missed but its driving me insane.
Thanks !
Whenever you have height: 100% on an element, that means it will inherit the height of its parent.
Thus, the first thing you need to do is set height: 100% on the .container so that its height takes up the full height of the body.
Then, set height: 100% on the .container > section. Then, the children know to stretch to the correct height (which has been propagated down from body).
This should solve the question in your OP. However, it seems like there's still something fishy going on with your heights. Feel free to ask another question if you need to.
I am currently working on a new website and I want to have a div ID to fit 100% of the screen, however I want to have something as a width of 250px to the right of this div. I am trying to do width: 100% - 120px but doesn't seem to make any difference. How can I do this.
Thanks for any help you can provide.
If you want a div with 250px to the right, then you don't want the first div to be 100% of the screen. Set the second div width to 250px and the first div width to auto and it should fill the remaining space.
You can't subtract pixels from percentages, this isn't your answer, but I suggest learning the basics of css first, otherwise you will have no idea why things work the way they do.
Here is a good website with a lot of layout examples and tutorials: http://www.maxdesign.com.au/articles/css-layouts/
And http://www.w3schools.com/ for css standards.
As far as your particular situation is concerned, you are taking the wrong approach. If you want to be able to subtract width from 100% you can use javascript to accomplish this goal. with jquery you can do something like this:
$("#div").width($(window).width() - 125);
This will not work once the window resizes however. You can add resize events to resize your div when the window resizes but this is cumbersome and can seem laggy. Your best bet is to use a css implementation, your question is quite vague though, you seem to be describing a two column layout with a side panel, but I could be wrong. Just for a two column layout there are different options such as whether you want your main content to be liquid or static.
I'm assuming liquid because it is more useful.
I would like to recommend jquery layout for creating layouts. Uses javascript and it's very easy to use to make quick layouts. http://layout.jquery-dev.net/
Here is your solution: http://jsfiddle.net/Z3nfv/1/
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'm not a CSS expert so I might be missing something obvious. I'm trying to set a relative size header and footer (so that on larger monitors, the header and footer are larger than on smaller screens). To do this, I'm using a percentage height. However, this only works if I set the position to absolute. The problem is, setting it to absolute means that it overlaps the main part of the screen (inbetween the header and footer). Setting it to relative doesn't work since it relies on items being inside the header/footer.
This is what my header looks like:
.header
{
position:absolute;
top:0px;
background-color:white;
width:100%;
height:30%;
}
the ASPX page simply contains
<div class="header"></div>
Is there a way to get relatively proportioned header and footers?
Thanks
In order to have elements take a percentage height, you need to define the HTML and BODY to have a defined height as well. Since you don't know what this is, use 100%.
html, body {
height:100%;
}
To use percentage heights the parent needs to have a fixed height, because if the parent is height auto then it will depend on the height of the child content....which depends on the parent height etc. I think when you set the position to be absolute it takes the screen viewport as the parent element which does have a fixed size (theory by me), which is why it works with absolute.
I don't think its a good idea to try and do the proportional header and footer based on the browser resolution. It really doesn't make much sense to me, honestly, you're going to need to try and scale up and down the font sizes or images you have in the header to match etc. If you really want I would suggest having different CSS stylesheets which users can choose (or is selected automatically by javascript). This way if someone has a huge resolution they can choose the larger one if they want (or its automatically chosen for them). That way you don't have to deal with any scaling issues.
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.