I have another CSS problem. A layout that escapes me.
I could, I suppose, get the desired effect by messing about with JavaScript, but that always bugs me - it leads to having the code that controls the layout split between the markup file and the CSS file and the javascript file, and that just makes maintenance a mess.
I've created an example of what I don't quite want: http://jsfiddle.net/4sCKq/1/
The split between header and body is fixed - it's a project-wide thing that I can't change for this page. You'll notice that the header has a fixed height, and the body takes up the rest. This cannot change.
The problem is the left div, within the body.
You'll notice here that the left div has a fixed width, and the main div takes up the rest. This also cannot change.
You'll notice that the left div has a variable height, taking up what is left of the browser window, from the header down. Yep, this is also required.
And at the bottom of the left div I have a fixed-size div, that has the same width as the left div, and a fixed height, and that stays at the bottom, as the window resizes. This is also required.
What is left is the left-main div. I want this to take up all of the left div that is not contained by the left-bottom div. That is, between the two of them, left-main and left-bottom should completely fill the left div, regardless of the size of the browser window. But, as the window resizes, it should be the left-main div that grows and shrinks, the left-bottom div should remain at the bottom of the window, and its size should stay constant.
I've added the show-top and show-bottom divs solely to make it clear where the limits of the left-main div are. If you give left-main a large enough height, it looks like it is filling the div, but in fact it is disappearing behind the left-bottom div. The fact that you can't see the show-bottom div reveals that. I cannot have this - I need all of what is within the left-main to be visible.
So, any ideas?
Rather than define a height you can define the bottom absolute pixel value.
Changing one line in your jsfiddle seems to do it, if i understand the question:
#left-main
{
background-color: #AA9977;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 100px;
}
I was able to get this done pretty easily using some basic jQuery. If you decide to go that route, feel free to use this.
LIVE DEMO http://jsfiddle.net/Jaybles/4sCKq/5/
Here's the magic.
$(window).resize(function(){
var freeSpace = $('#left').height() - $('#left-bottom').outerHeight();
if (freeSpace>=150) freeSpace=150;
$('#left-main').height(freeSpace);
});
UPDATE
After seeing the answer from RSG, I'm not sure I got exactly what you were looking for. My code simply prevents the top div from going behind the bottom one, and does not stretch the div to maximize space. If you wanted to accomplish what RSG did, you can do the following (although RSG's answer is MUCH better as there is no flickering)
$(window).resize(function(){
var freeSpace = $('#left').height() - $('#left-bottom').outerHeight();
$('#left-main').height(freeSpace);
});
Related
I have a layout with two divs on the same line. I need one div floated left and the other floated right so that the divs will stay on their respective sides no matter the browser size and the div on the right won't fall below the left floated div when the browser size is smaller than the two divs.
I need the browser to cut off the 2nd div after the 2 divs touch each other when the browser shrinks.
I had a picture to illustrate my question but I don't have enough reputation points to post it.
Do you really need to float the divs? If not you can always create a wrapper for the divs with a minimum width set to allow the divs and a position of relative or absolute to stay next to each other,
#wrapper {
min-width: 250px;
position: relative
}
then set the inner divs display property to "inline-block".
.blocks {
display: inline-block;
position: absolute;
}
All together, this will create a "safety bubble" in which your divs can rest side by side without jumping to the next line, even after window resizing.
Check it out here.
EDIT
After a couple of trial and errors I believe we have an answer.
Javascript.
So in interest of time, I will post the code on jsFiddle here. Breifly, what I added to the previous code was a script that ( on window.onload) you get the id's of both inner divs. You then create two objects to hold the position of their facing borders which are then compared to see if the second div ( one on the right ) has crossed into the first. The numbers in the div are there as a place marker to show that the div does not slide onto/under the other.
*PS the 200px is just a demo number, they can be changed)
I'm assuming that what you mean by "cut off" is that you want the left div to appear "in front of" the right div. To do this, you want to give the left div the css
{
position:absolute;
left:0px;
z-index:2;
display:inline-block;
width:[number]px;
height:[number]px;
}
and the right div
{
position:absolute;
right:0px;
z-index:1;
display:inline-block;
width:[number]px;
height:[number]px;
}
and to their shared parent div add the css "position:relative;".
Alternately, giving both divs "position:fixed;" might work, that makes them relative to the browser winder instead of the parent div, though that will give you very different outcomes when people try to scroll. You'll also need to give the left div a background that isn't transparent, or they'll just overlap. Also note that "position:absolute;" puts the divs 'outside the flow' as it were, in the sense that they will also overlap anything else you put in, and your design has to account for this.
Working example http://jsfiddle.net/RdX5P/
If by "the browser needs to cut off the second div" you mean you want the second div to just disappear when the window gets too small, just float the two divs and put them in a container div with set height and with "overflow:hidden;"
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
}
I have an issue (code is dynamic so difficult to print - I hope this is simple) whereby when a parent container div contains 3 div elements floated left, yet the if the 3rd div goes beyond the body of the page (i.e. the browser's width) it line breaks to go underneath.
I want it to float: left whatever, whether it goes past the 'end of the browser' or not. Is this possible?
Example code:-
<div id="container"><div id="divLeft"></div><div id="divCenter"></div><div id="divRight"></div></div>
Where all the divs left, center and right are float: left;
Yet #divLeft will break to go under divCenter if it's width goes outside the browser width.
Any help much appreciated!
The best way to be sure is to set a fixed width to your div here.
An example here
#container{width:306px;display:block;border:1px solid black;overflow:auto;}
#divLeft, #divCenter,#divRight{float:left;border:1px solid red;width:100px;}
Don't forget the overflow:auto on your container if you want to apply a background or a border, else it won't be under your divs.
it seems the divs don't fit in container div, and the last one floats under them. this is how float works. you must arrange the widths of them.
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.
Here is a snippet of CSS that I need explained:
#section {
width: 860px;
background: url(/blah.png);
position: absolute;
top: 0;
left: 50%;
margin-left: -445px;
}
Ok so it's absolute positioning of an image, obviously.
top is like padding from the top, right?
what does left 50% do?
why is the left margin at -445px?
Update:
width is 860px.
The actual image is 100x100 if that makes a difference??
Top is the distance from the top of the html element or, if this is within another element with absolute position, from the top of that.
& 3. It depends on the width of the image but it might be for centering the image horizontally (if the width of the image is 890px). There are other ways to center an image horizontally though. More commonly, this is used to center a block of known height vertically (this is the easiest way to center something of known height vertically):
top: 50%
margin-top: -(height/2)px;
This has probably been done in order to center the element on the page (using the "dead center" technique).
It works like this: Assuming the element is 890px wide, it's set to position:absolute and left:50%, which places its left-hand edge in the center of the browser (well, it could be the center of some other element with position:relative).
Then the negative margin is used to move the left hand edge to the left a distance equal to half the element's width, thus centering it.
of course, this may not be centering it exactly (it depends how wide the element actually is, there's no width in the code you pasted, so it's impossible to be sure) but it's certainly placing the element in relation to the center of the page
top is like padding from the top right?
Yes, the top of the page.
what does left 50% do?
It moves the content to the center of the screen (100% would be all the way to the right.)
why is the left margin at -445px?
After moving it with "left: 50%", this moves it 445 pixels back to the left.
The snippet above relates to an element (could be a div, span, image or otherwise) with an id of section.
The element has a background image of blah.png which will repeat in both x and y directions.
The top edge of the element will be positioned 0px (or any other units) from the top of it's parent element if the parent is also absolutely positioned. If the parent is the window, it will be at the top edge of the browser window.
The element will have it's left edge positioned 50% from the left of it's parent element's left edge.
The element will then be "moved" 445px left from that 50% point.
You'll find out every thing you need to know by reading up on the CSS box model
When position is absolute, top is vertical distance from the parent (probably the body tag, so 0 is the top edge of the browser window). Left 50% is distance from the left edge. The negative margin moves it back left 445px. As to why, your guess is as good as mine.
At the risk of sounding like Captain Obvious, I'll try explaining it as simply as possible.
Top is a number that determines the number of pixels you want it to be FROM the top of whatever html element is above it... so not necessarily the top of your page. Be wary of your html formatting as you design your css.
Your left to 50% should move it to the center of your screen, given that it's 50. Keep in mind people have different screen sizes and is allocated to the (0,0) top left of your image, not the center of the image, so it will not be perfectly allocated to the center of one's screen like you may expect it to.
THIS is why the margin-left to -445 pixels is used-- to move it further over, fixed.
Good luck, I hope that this made sense. I was trying to word my explanation differently in case other answers were still giving you a hard time. They were great answers as well.
(If you have two different sized monitors, I suggest toying around the with the code to see how each modification affects different sized screens!)