To summarize, I'm trying to get a "resizable page" both in the height and in the width of the window. I've two fixed blocs too. One on the top of the page and an other on the left (like the Flow app for example).
As you can see there, I'm trying to make the yellow part of the screen resizable (css only) but I get some trouble with the height part. The scrolling zone is always counting the height of the top bloc (the red one).
Is there a way to make it javascript free?
The div with id="container" has a height of 100%. This means 100% of the containing id='wrapper' div. One possible solution is to make the heights:
red part: 10% of the total height
blue+yellow (i.e. the "wrapper" div): 90% height
This would mean the "container" wrapper should nicely fill up those 90%.
Edit: only drawback would be that the red part is no longer a fixed hight pixel-wise.
Related
I'm trying to place three divs side by side.
The first div has a fixed width and needs to be against the left side of the screen (ie: float:left;).
The next div also has a fixed width and needs to be against the right side of the screen (ie: float:right;).
And the last div needs to fill the space in between them and adjust based on the width of the browser window.
When a certain minimum width is reached for this last div in the middle I need it to stop getting smaller and have scroll bars appear in the browser.
Is this possible to achieve? If so, how?
try this link. basically, there are 3 divs, 2 of them which placed on the side are fixed width absolute position div while the center is a normal div with margin.
As of now I have div A inside of div B, and A's height is set to 100% because I want it to cover everything from the start of it to the bottom of its parent div.
However, having its height set to 100% doesn't perform the way I was hoping (that it would simply span all the way from its starting point to the bottom of its parent), instead it sets its height to exactly match its parent div. Since div A starts a few hundred pixels down inside div B, this causes div A to overflow an extra few hundred pixels below div B.
Example below:
The real trick is that div B needs to be able to expand vertically depending on its content, while div A continues to fill the area from its vertical start to the bottom of its parent.
Is there some other method to consider? I understand that I could use the calc unit, however, calc doesn't work on safari up until safari 6, and that would rule out a lot of mobile devices.
I might be misunderstanding what you're trying to achieve here but wouldn't a
overflow:hidden;
on the Div B work out?
I have to make a website that have this layout:
There are 4 blocks: green (the footer), blue (the sidebar), red (the main container), and orange (the content).
I'm finding some difficulties to center the elements. The red block have a fixed width and height (980x680) , the sidebar and the footer should remain in their place, and if I have a bigger screen they still have to fill the full width and the full height.
Do you think is it possible to accomplish this result?
How about something like this: http://www.sidekick.com.au/files/stackoverflow/div-positioning/
The height of the blue sidedbar is the only thing that needs work. Currently it is set to a static height, or the height of whatever is inside it.
You can try this out... http://pixelsvsbytes.com/blog/2012/02/this-css-layout-grid-is-no-holy-grail/ or this one http://www.davidjrush.com/blog/2009/01/css-sticky-footer/
I'm having trouble in design layout css with div element.
Basically my main page layout design is look like the following picture :
The red box is the browser screen area.
The black box is the content area where the data will included / or loaded via ajax.
The green box is the data list which is the response result and contain about hundred rows inside. The data list contain header div and rows divs.
What i intend to do is set the overflow on the blue area which is the data rows so the scrollbar will appear on the right side of the blue box not on the right side of the red or black box.
Then when the browser area (red) resized all the div inside will also resized to the best size.
I've managed to make the scroll bar appear on the blue box when the data inside is overflow by set css overflow : auto /scroll for blue box div. But the problem is the overflow : auto properties seems only work when i set a certain height for the blue box div let's say about 400px. When i resize the browser the blue box div keeps stay with 400px height.
How to make it auto resize? Thanks in advance for any help.
You need to fix the heights of the HEADER, "Table Heading Row", FOOTER and the "subfooter" row
from there you can calculate the top and bottom position offsets for the middle box, which should be absolutely positioned, the becasue it's positioned you will also need to absolutely position the two bottom footers, in my example I have wrapped them two rows and positioned them as one, this may seem excess but there are in fact a lot of your containers which are no longer required (though I didn't weed them out)
also your float code is too excessive, you don't need to relatively position every float to left: 0.0% so I chopped all tham out, you only need top relatively position something if you want to do absolute positioning inside it.. except for the body element which is all we need to use for this style layout (note I did change the end of your HTML slightly)
refiddle: HERE
and btw, I think this one those internal rows would be better as an actual <table>, it seems like rows of Data to me ;) - and the whole thing would likely mean a lot less code..
What your looking for is a positioned div for the blue box.
.blueboxdiv{
position: relative;
top : 100px; // height of header - Top stays 100px away from header thus grows on resize!
bottom : 0px; // Bottom sticks to bottom
left : 0px; // Left sticks to left
right : 0px; // Right sticks to right
}
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.