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/
Related
I have a fluid layout consisting of a header and a content area. The header is meant to occupy 10% of the window's height and the content area is expected to occupy the remaining 90%. Text in the entire screen should scale proportionally to the window's height. Also text in the header should be centered vertically. I am able to meet all these requirements except the last one. Anyone know how to do this?
Here's what I have so far: http://jsfiddle.net/nareshbhatia/h2s4h/
I am using Em units to do relative sizing of the text. I use JavaScript to change the font-size of the body element whenever the window is resized. This approach scales the fonts beautifully for the entire window. Finally, I tried to center the header text vertically by setting the line-height of the header to be the same as its height (i.e. 10%). This usually centers the text vertically (when the height is defined in pixels), but in this case the text does not center vertically. Any ideas on how to fix this?
Edit The jsFiddle is updated to show the suggested answer.
The line-height approach centers the text when you only have one line. You are using percentages, so I think this question might help in that respect.
What you could do instead is use some more jQuery or JS to, on load:
Measure the outer height of the paragraph (or whatever element you are using) in the .content
Calculate the bottom offset of this paragraph in relation with the .content (how much space you have remaining from the bottom border of the paragraph to the bottom border of the .content div)
Divide the remainder in two, and add that number as a top margin or top position for the paragraph.
This will let you have longer text without messing with the line-height.
If you want a pure css solution, check these alternative ways of centering vertically.
I'm trying to create a two columns layout where there is one column floated left, and there are two DIVs floated right. The sum of the two right DIVs is a height that is less than the height of the left DIV. I think I'm missing some CSS that allows this to happen. As of right now the second right DIV is appearing below the end of the left DIVs because of the height difference.
It's probably easier to view the page itself to see the issue. I need to have the DIV close the end of the right content so that it appears that all of the text is within a box.
http://brimbar.com/no_crawl/RiverHollow/history.html
I can add a negative margin to accomplish this, but I'm assuming I'm going about this all wrong.
Un-float both (or all, if you plan to add more) of your righthand divs, put them inside a wrapper, and then give that wrapper a margin-left value equivalent to the width of your left div.
screenshot: http://easycaptures.com/fs/uploaded/677/0314515048.png
demo: http://jsbin.com/aviyok/1/edit
You should also remove the huge negative margin on your right content div; that breaks very easily.
I am attempting to implement the following layout without using javascript and without using tables:
There are a LOT of rows on a page. Each row is filled by four content elements, the tallest of which determines the height of the row. Each content element has two other elements, in this case, an image and a caption. The image is aligned to the top of the row while the caption is aligned to the bottom.
In the HTML structure, the image and caption must stay together in the content element.
Some solutions I've tried:
Splitting each row into two: a row of images and a row of captions, separates the images from the captions.
Using the famous equal height column div structure results in an ugly absolutely-positioned Matryoshka Doll arrangement of divs.
The issue with tables is that the page will be made MUCH more dynamic in the future (rearrangable content, fluid layout, dynamic searching, content of varying width), and tables will be extremely annoying to do this with.
If I'm imagining your markup correctly, perhaps this will work for you:
http://jsfiddle.net/Puppies4Life/Fd94X/1/
I absolutely positioned the .caption to the bottom of .row. I made it a point to position .caption to .row instead of the immediate parent .content because of the varying heights of .content. The image remains in the flow of the document. I Added some additional padding to the bottom of .row to account for the text and put in a simple clear fix (I suggest using a better option in your production code)
Hope this helps solve your problem or possibly ignites an idea or two!
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 want a layout with two columns, two divs, where the left one has fluid width and the right one has fixed width. So far so good - see jsfiddle below - however, the height of the right column must be in relation to the height of the left column. So that if I have some content in the fluid column and would resize the browser window, thereby increasing or decreasing the height of the left column, the right one should follow and getting the same height.
What I got so far: http://jsfiddle.net/henrikandersson/vnUdc/2/
Edit: Resolved, see comment below
Ah, the ol' two column layout. Unless you want to resort to JavaScript to track the height of one column to adjust the other, you're not going to be able to do it in the way you expect. Using height="100%" usually doesn't work in these situations, either.
What you can do is something like the old Faux Column technique. The div's don't resize, but you have a background image on the parent element that tiles vertically, giving the illusion of equal columns. Old school, yes, but effective.
You can use JavaScript to get the height of the left div, then set the right div to this height.
To get height of the left div:
var divHeight = document.getElementById('left').offsetHeight;
To set height of right div:
document.getElementById('right').style.height = divHeight+'px';
Your JSFiddle example fixed.
So, I got an answer to my question from #thirtydot (see comment above):
Do you need to support IE7? If not, you can use display: table-cell