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
}
Related
On my frontpage, I would like to CENTER the directory view (CONTENT AREA with headline 'Golfverzeichnis'): LINK
Name of the CSS-Element to be centered: jrDirView
Problem-Description: the images and left-aligned links underneath them should remain unchanged, but the whole directory view area, which is right now aligned left, should be centered, so the white space left and right is equal.
Add the fallowing into your CSS jrDirView class
.jrDirView{
margin: 0 auto;
width:1000px;
}
you can experiment with the width until you find the value you want.
If you look at the page, the content area is already centered.
You can prove this by putting a lot of tags under one of the images that shows up in the right most column.
The problem is that your content is not centered, so to the user, it appears that the the page is off center.
You can tweak the problem by setting the left margin of jrDirView arbitrarily to force the content to appear to be centered, but it won't be a very robust solution.
A better solution might be to force the text area to be the same width (approximately) as the known width of the image and then setting a left and right padding on jrListingThumbnail and jrContentDiv
I need to place two repeated background images on the left and right border of a div. I don't know the width or the height of the div.
I though of placing the left border in the div, and floating the right border to the right.
This is my layout:
http://jsfiddle.net/WmLhV/
In Firefox it works ok, but in the other browsers, when the browser window is too short, and a scrollbar appears, the float disappears.
As you can see the container is of display: table-row. I cannot change this or the layout will break...
Is there any better way of putting an image to the right? even without a float?
your div with right align doesn't have height if you want to use 100% height you have to use position. check this fiddle i have done this via position http://jsfiddle.net/WmLhV/4/
Your <div> that's floated to the right doesn't have height. Firefox seems to understand the 100% height even when the contents of the <div> are empty but IE9, for example, doesn't.
One alternative approach would be to give your <div> that contains the text 60px padding-left and 60px padding-right, and then apply background images to it (note: multiple background images will only work in CSS3-friendly browsers). The padding essentially creates empty space for the your background images and always has the same height as the text.
A further, slightly more convoluted approach, would be to divide the inside area into three (left, middle, right) and setting display: table-cell (or using a table), and then essentially allowing the height of the left and right cells to adjust according to the height of middle cell which contains the text. This would reveal the background images on the sides according to the height of the middle text --- standard table behaviour. This would get rid of the need for floats. display: table-cell is not supported in IE6/IE7, but a normal HTML table would work fine.
I would like to know if I can float the div like this using CSS. What I would like to do is to move the DIV which is CSS DIV 2 under the CSS DIV 1 to the right when reducing the windows size. See the screenshot below:
This is how three DIV would display on bigger windows size. First DIV is at the top left corner, the second DIV is under the first DIV. Then the third DIV is on the top right.
When I resize the browser windows, the third DIV which has wider width will drop to the botton under the first DIV, and the second DIV will automatcially move to the top right corner to fill in the space.
Anyone think that this is possible to do it by using CSS, and might not need to use JS or others?
Thanks
I'd say that change is achieved either by changing from a columnar layout to a row layout, or else by swapping the order of the two elements. Either way, it requires JavaScript.
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!)