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%"
Related
As of now I have div A inside of div B, and A's height is set to 100% because I want it to cover everything from the start of it to the bottom of its parent div.
However, having its height set to 100% doesn't perform the way I was hoping (that it would simply span all the way from its starting point to the bottom of its parent), instead it sets its height to exactly match its parent div. Since div A starts a few hundred pixels down inside div B, this causes div A to overflow an extra few hundred pixels below div B.
Example below:
The real trick is that div B needs to be able to expand vertically depending on its content, while div A continues to fill the area from its vertical start to the bottom of its parent.
Is there some other method to consider? I understand that I could use the calc unit, however, calc doesn't work on safari up until safari 6, and that would rule out a lot of mobile devices.
I might be misunderstanding what you're trying to achieve here but wouldn't a
overflow:hidden;
on the Div B work out?
Is this possible with css (I can probably manage it with javascript):
Its basically a margin: auto effect, but i want a different background for each margin, so i'm looking for divs with auto-widths on either side of the (fixed-width) center div if that makes sense. Probs better visualized:
http://jsfiddle.net/guc9V/1/
Bit of a hack but it works.
I didn't use your width value as jsFiddle would need resizing to see how it works.
This essentially tells the divs to act as table-cells, so they will fill the containing div, which acts as the table. If you didn't specify the width of the middle div, each column would be 33% wide.
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
I have created fiddle here: http://jsfiddle.net/ozzy/WEGMh/
How it should look is here:
Issue is the left and right hand divs arent showing. I have tried z-index , but it must be something painfully obvious.
My code may be crap too..
The idea is the container height will be flexible. Container width fixed.
Header fixed width and height
left div will be fixed width and flexible height.
right div can just adopt left divs parameters.
footer div fixed width and height.
If that makes sense.
The left and right divs are showing, it's just that their height is zero.
They get their height from their content, and as there is nothing in them, the height becomes zero.
The default for a div is to fill up the available width, but not to fill up the available height.