I have created fiddle here: http://jsfiddle.net/ozzy/WEGMh/
How it should look is here:
Issue is the left and right hand divs arent showing. I have tried z-index , but it must be something painfully obvious.
My code may be crap too..
The idea is the container height will be flexible. Container width fixed.
Header fixed width and height
left div will be fixed width and flexible height.
right div can just adopt left divs parameters.
footer div fixed width and height.
If that makes sense.
The left and right divs are showing, it's just that their height is zero.
They get their height from their content, and as there is nothing in them, the height becomes zero.
The default for a div is to fill up the available width, but not to fill up the available height.
Related
I'm trying to stretch the div container to fit the whole window. However whenever I set the width and height to 100%, I still get vertical and horizontal scroll bars that barely scroll anything. Hiding it with:
overflow:hidden
hides it but then the border on the right and bottom are missing. I want the div to fit exactly as the size of the window.
http://jsfiddle.net/pqDQB/
What I tend to do in situations like this is tinker around with the unit I am using.
Step 1: Make sure your content doesn't have any padding or margin that causes your issue.
Step 2: I recommend setting your width to width: 100vw and height to height: 100vh. This stands for viewport width and viewport height and will expand your div to cover the whole screen when both are set to 100.
I have the problem that a div is not scaling over the full page when the page is not fully seen, i.e. scroll bars appear at the bottom.
Scales fine:
Does not scale fine when seen part is too small:
How can this be fixed? Here's the fiddle: http://jsfiddle.net/gdztn/29/
Clarification: The inner div must always be 800 px wide while the outter div should scale over the whole width of the page. As you can see in the second image, the outter div does not reach the right end of the page when scrollbars appear.
Thanks!
the problem is that the #head width is 100% and the inner div has a fixed width. if you scale the page down, it's still 100% but smaller than the inner div. it's like having a smaller container and an exceedingly bigger content which overflows.
to address this problem, you should set min-width of the #head to keep it from shrinking smaller than the inner div, like min-width: 850px
http://jsfiddle.net/gdztn/43/
EDIT: also remove position:absolute from #head. if actually needed to be absolute, then add width:100%
I have a strange horizontal scroll, strange because I have a 100% width container.
Take a look at this link to see what I'm talking about
Remove the float and width from the triggers.
Your elements have width: 100%, which causes them to occupy the entire width of the page.
You're adding a border and padding to them, which adds to that width and makes them bigger than the page.
It's problematic to use width and padding at the same element.
Try to remove the width and additionally remove the float property from your h2.trigger class.
I have 2 divs...each are float left, and each have a "width".
When I resize my browser, the right div goes down to the bottom of the left div. Why? I'd like it so that during resize, it stays there.
There are a lot of solutions to this. A solution that preserves your existing float layout:
Enclose those two div's in a parent div where the width is set wide enough to hold both those divs.
They are "wrapping" because you marked them as floated elements and when their parent container becomes too small to put them on the same "line", the second one pops below, just like text, etc.
You are likely making the browser width too small for both floated divs to be side by side.
One way to prevent this is to wrap them in a larger semantic div that has a fixed or min-width. Or, simply give the body itself a min-width. Min-width is not supported in IE 6, just set the width for IE6 and it will treat it as min-width.
Give Width as "50%"
Check my website, and see the Divisions left menu. When you have maximized your broswer there is no problem, but when you restore it to half of screen, the left menu overlaps to the right.
Here is the CSS code. Can someone help me?
It's because your "divisions" div is absolutely positioned.
You can remove "position: absolute" and increase the width of the "divisions" div to 300px.
Your left menu is absolutely positioned that's why it overlaps other content when window size is too narrow. But the solution for this problem is quite tricky and actually depends on what you want to achieve.
Percentage
One possible solutions would be to set width on "divisions" and "content" div in percentage. This way they'll never overlap. But it depends if you can afford to have dynamic width for your "content" div.
Repositioning
If your content must be fixed width... You'll first have to decide how would you like your content/menu to appear when window is too narrow (maybe even narrower than content width)... And work from there.
Body element width
Set minimum window content (as in <body>) width. Either by using:
transparent image at the beginning of your document <img src="t.gif" width="1250">
set body's minimum width css as min-width: 1250px; has to be 1250px wide, because content is centrally positioned, so it must have equal space on the left and on the right (right one being useless empty space just allowing non overlapping space on the left of content)
The last one is actually the simplest and works. It only makes it a bit wide for smaller screen sizes, but your content width (including menu on the left) already exceeds 1030px anyway...
A very straight-forward and simple
and quick-fix solution would be with CSS :
#content {style.css (line 17)
left:-270px;
margin:0 auto;
padding:30px 10px 0 550px;
position:relative;
width:780px;
}
I tried this in my Firebug and it worked fine. hope it'll suit you're needs :)
next time just use css floats:
put the side menu and the content div in a wrapper,
float:left for the menu, and give the wrapper a fixed width, and center align it.
you can also make the navigation menu go "out" from the left with negative left positioning it.