http://t-webdesign.co.uk/new/
How would i go about getting the grey div (#content_right) to expand to the same size as the left hand side div without using a fixed height attribute?
Thank you
you might want to check the equal height columns technique out:
Related
I have a fixed div on with a height of 100% on the left side of my webpage. When I use transform:rotate(6deg); it leaves an empty space at the top of the page. I have tried to add height to it, but it just makes it worse. Any help would be appreciated. Thanks! (:
Is it triangular space left?
After rotating div with 100% height it probably also resizes width of page?
Problem is probably in point of rotation.
Please give more details - somehow this div need to be cut (shifted).
I'm trying to make a div inside another div to be placed 70% from the top of the parent div so no matter what the screen size is the inner div should flow up or down to adjust for it (kind of like fluid layouts but vertically). I tried doing the following:
http://jsfiddle.net/uxaVe/
But the padding-top is fixed even though I have it set in percentage, I must be doing something wrong but I'm not sure what it is, could you guys help me out? Thanks in advance!
Remove the padding, and replace with
position:absolute;
top:70%;
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
How to do the following layout without using tables:
left element(100px)|right element (occupies what ever space is remaining, even when there is no content)
Thanks
Edit: link to code: http://pastebin.com/vU33jNxD
Float the left element and give the right element a left margin of 100px.
Remove the 100% width for the #right div. This will make it so there isn't an extra 100px to the right of the screen.
I have 2 divs...each are float left, and each have a "width".
When I resize my browser, the right div goes down to the bottom of the left div. Why? I'd like it so that during resize, it stays there.
There are a lot of solutions to this. A solution that preserves your existing float layout:
Enclose those two div's in a parent div where the width is set wide enough to hold both those divs.
They are "wrapping" because you marked them as floated elements and when their parent container becomes too small to put them on the same "line", the second one pops below, just like text, etc.
You are likely making the browser width too small for both floated divs to be side by side.
One way to prevent this is to wrap them in a larger semantic div that has a fixed or min-width. Or, simply give the body itself a min-width. Min-width is not supported in IE 6, just set the width for IE6 and it will treat it as min-width.
Give Width as "50%"