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.
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.
Let's see:
Container box is 920px, left box is 600px, right box width dinamically changing between 200px and 400px. As we know in basic situation if two floated box wider than their container the lastest one breaks into a new line.
I tried to solve it with negative leftmargin on right box and it works fine. (buggy on IE6 but it does not matter.)
Is negative margin good or can I avoid annoying float box breaking in other way? (i don't want to use absolute positioning.)
Negative left margin is great. I use it lots of time to align to the center left:50%; margin-left: -250px; // width == 500px; so don't worry you can use it without a problem.
Also ppl use it for lot's of small things. It's not uncommon for sites to have elements with negative margins.
Even here in Stackoverflow if you look at the CSS you can find negative margins.
I have been trawling the web trying to find an answer to my css nightmare question.
The main problem seems to be getting a min-height:580px and a height:100% at the same time in all the browsers.
The thing I need to achieve is:
Site to have a min height of 580px including footer so total height before scroll bars appear is 580px.
Also, a min width is needed of 930px including right and left margin of 15px each side.
left menu of 216px wide and 100% high minus the footer height of 30px.
Main part of the screen should fill all the space available. Unless the screen height is less than 580px or width less than 930px. In this case you get scroll bars.
Compatiblity ie6,7,8, Firefox and Safari.
Can it be done with no Javascript?
There may be cleaner ways, but an idea that comes to mind about the min-height (min-height isn't interpreted by IE<8 anyway):
Place an absolutely positioned, 1 pixel wide, invisible DIV in the left hand corner of the screen. Give it 580 Pixels height.
That should make the height at least 580 Pixels.
The same should be possible with the horizontal width.
You should then be able to work the menu part in the usual way.
Don't forget your HTML element needs height: 100% for height: 100% to work within the body.
First, there's no support for min-height in IE6 or IE7 without javascript, period. So the answer to your question is no.
In general, though (and I'll admit I'm not sure since I haven't tested it thoroughly) but I seem to recall that height:100% overrides the min-height property set in pixels in browsers that do support it.
You could try using a second div either inside or outside your 100% height div that's the 580px you need...
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.