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.
Related
Here's a JSFiddle:
http://jsfiddle.net/cKuUy/2/
Here's a screenshot of what I'm aiming for:
And what I'm getting in my browser:
The key difference is that in the actual implementation, the bars do not fill the available width of the containing div element. If I place: width:100%, the bar expands to it's container width, but goes down, below the text; despite both elements being floated left.
Any suggestions?
This solution should help: https://stackoverflow.com/a/1767270/1472586
Basically remove float: left and width from the bars and add overflow: hidden to them. You may also have to adjust your margins accordingly (right padding on the headings might work better, for example).
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 a fixed-width page that I want to add a simple border to with the Border CSS command. However, I don't want this border to balloon the page and cause smaller screens to have a horizontal scrollbar. I'm not too great with CSS, but I know enough that I looked into using negative margins to offset the border's width since I had already done something similar to add borders to other elements that I don't want moving. But when I do so on my main container div, everything gets thrown off-center and smashed up to the left side of the page. I'm using the Blueprint CSS framework and I figured there was something in there that was messing with my margins, and I found the main container is applied a "Margin: 0 auto;" to center it on the page.
So, I ask now, how the hell can I apply a negative-margin border to a page while still centering the layout on-screen? I've tried to wrap the container in a div and apply the border and negative-margin to it, but no dice, I tried nesting a div inside the container and applying the border to the container, but that went badly as well. Somebody throw me a bone here!
If the negative margin is working, you can get the centering back by adding a wrapper div with a fixed width and margin: 0 auto.
In my testing, the negative margin didn't change the width of the box. A few other strategies:
Adjust the width of your div to offset the width added by the borders.
Add a background image to the div that simulates left and right borders.
Use JavaScript to detect the width of the window and remove the border when necessary.
Add body { overflow-x: hidden } to suppress the horizontal scrollbar.
Use a CSS3 media query to add the border only when there's enough room (optionally falling back to JavaScript (see #3) for older browsers).
Update: Instead of negative margins, you can probably use box-sizing: border-box so that the border doesn't add to the element's width in the first place.
I have this type of arrangement
...<td>
<div></div>
<div></div>
<div></div>
</td>
The div tags are filled with dynamic data. I have put the div tags in the td cell because the center div is filled with an image, which can be different heights. What I am trying to do is get the top div to align to the top of the cell, the bottom div to align to the bottom, and the center div, which contains the image, to fill the entire space in the middle and be center aligned. All my attempts so far have failed and for some reason (yes I have looked and there is no competing styling) I cannot get the divs to fill the available space. I have tried encapsulating the divs in a container div but this didn't work either. Your advice/help please :)
Thanks, R.
there are some handy CSS properties you should look.
box-sizing (pls, start googling for this one).
margin, padding, vertical-align...
table-padding..
consider using "auto" as value for some centering.
The easiest way is to forget the divs and use table cells instead. The advantage here is that when you set a height to the table, the cells will automatically fill all the space. This way you can define a fixed height to the top and bottom cell, and the middle cell will take up the remaining space.
Example: http://jsfiddle.net/KaWPS/
And if you don't use fixed heights you'll see that the cells take whatever they can get, and the rest is divided over the rest of the cells: http://jsfiddle.net/KaWPS/2/
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.