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.
Related
I encountered a problem and didn't find a solution for this. I'm pretty confused because I thought this was a very simple requirement.
There are the following elements:
a surrounding div#wrapper
div#A, floating left and fixed width
div#B, floating left (right of #A) and dynamic width
Inside of div#B there are plenty of images, floating left and fixed width (and height).
Depending on the screen resolution there should be 1, 2, 3, n columns of images on the right part of the screen (next to div#A). Instead of this, container #B is aligned below container #A and uses the full window width.
My alternative attempt was giving #B a float:right and a margin-left (which was greater than the width of #A), but that also didn't work.
I would like to avoid absolute positioning because the height of the surrounding wrapper should increase with its content.
To visualize what I'm talking about, I made the following diagram:
http://abload.de/img/rezeptbilder1k8lsr.png
Many thanks in advance!
this is happening because..you are having dynamic width for your div#B...ans as there are plenty of images and they are aligned next to each other...so eventually div#B grows to 100% width...when it has 100% width then it arrives under the div#A.because 100% + div#A's width cant fit together in a 100% wide screen..you understand???
1st solution :: you may use width:calc(100% - div#a's width).it will give div#b a width equals to remaining free space besides div#a
or you may use overflow:hidden in your div#B...now at first this div will grow eventually to take the width of remaining free space with a single row of images and once it has 100% width it will create another row of images..but for this your wrapper must have fixed with with **overflow:auto;** also..overflow:auto; in wrapper will introduce scroll bar when combined with of div A and B is greater than 100%
EDIT :: CHECK BROWSER SUPPORTS FOR CALC() HERE
note::if you provide us your try our suggestion will be more appropriate
I can't really provide a solution because you haven't provided any code. (please do so)
That said... Based on your description and your image, your floats on div#A and div#B are breaking. The most common reason for this is that your width is adding up to be more than 100% of the width of your div#wrapper (the containing or parent element of the floated elements)
Your floats should always end up equally 100% (less than 100% works but then you have some extra space somewhere etc).
For example... If you have #wrapper which is 100px wide, then you can have two div's inside which are 50px and 50px wide, or 30px and 70px etc. as adding those values = 100px which is 100%.
So... Why is yours breaking? I suspect it is because you are trrying to mix a dynamic width element, with a static width element. Float was never designed do something like this. There are various ways to achieve it, but which way depends on your code which I don't have.
Other possible reasons why is is breaking is because of too much margin space, too much padding, or even a border on your divs. The width of an element, by default includes it's padding, margin, and border widths. If you have a 100px wide div, with 10px of padding on the left and right and a 2 px border the whole way around (2px on each side). Then you have a div with a total width of 124px.
I have a container div with three child divs. see attached.
the center div can dynamically stretch in height. what I want is if the container div would stretch with the center div, then the left div will stretch to fit the new container div, and therefore stay in sync with the center div.
any one knows a pure css way to do this?
This doesn't actually adjust the height of the column, but the only non-javascript way to achieve this effect without actual content pushing the height down is using faux columns. You apply a background image to the parent element that mimics the column. Doesn't apply as well to responsive design, but the good folks at A List Apart do a better job of explaining the method here http://www.alistapart.com/articles/fauxcolumns/
yes that makes sense if you have a bottom-border. Let us know if you need help with the javascript. There will be no pure CSS way to accomplish this though. You have to find the height of the center div with javascript, and tell your left div to be the same height.
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.
Up to now I have two choices (maybe there are more outside):
Set the width of body tag to a fixed length and set the horizontal margin of the body tag to auto. It makes all contents get horizontally centered.
Create a wrapping div inside the body. Set the width of the wrapping div to a fixed length and set the horizontal margin of it to auto. It also makes any contents inside the wrapping div get centered horizontally.
I don't know, which one is better. Or if you have another alternative that you consider the best one, let me know.
A wrapper div is more flexible, because you never know when you're going to want an element to not be centered. A couple months down the line if the site requires changes you'll be happy you had a wrapper div, ends up being less work because you can have siblings of the wrapper div and do what you want with them.
With that said, if it's a fairly simplistic trivial example/site, sure go ahead and 0 auto the body element.
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%"