I learned recently that I can center a div on the page (even when the window is resized) by doing margin-left:auto;margin-right:auto. This is great, and I can't believe I didn't know it. However, it seems to affect child divs so that they no longer accept margins normally.
http://jsfiddle.net/mLxx5/
Why is it that #header_text does not move down 15px from the top and left of #CBS_content_container. Instead it takes its margins using the window as its origin. Like, if I change #header_text{margin:150px;}, it will shift things around wildly.
Thanks for any help; I'm sure this is simple!
If you put overflow:hidden on your container div it will make the inner margins work better. It's got nothing to do with the auto, just how margins work.
You might also be better to use padding instead of margins on inner containers.
Related
I have a dojox chart (chartDiv) that gets created within another container div (panelContainer).
Even though I have the width and height of the chartDiv set to be 90%, it either introduces scroll bars into the chartDiv, or if I dtart altering the padding and margin settigns for the ChartDiv, it will spill outside of the parent container.
I know this is going to be a basic issue, but I have been playing with lots of different CSS settings but nothing seems to solve keeping the chartDiv within the confines of the panelContainer (taking up 95% of the space)
This fiddle might help you spot where I have gone wrong.
When you make a chart (or a dojox.gfx canvas) without width/height, it will try its best to determine its dimensions from the container you put it in. It can get confused though!
In your fiddle's case, #chart has a known width, because it's a block element and inherits its width from panelBG which is 100% of panelContainer's width.
The #chart div doesn't really have a height though, since a block element is 0px tall until you put something in it (or add some style to it). As a consequence, (I think) the chart simply assumes a height of some proportion to the width.
In your CSS, I see you have a #chartDiv rule with width and height 90%. I'm guessing you intended that to be #chart. That wouldn't actually have resolved the problem entirely though!
Assuming you changed that, the chart would now use 90%x90% as width/height, but if you try it, you'll see that the labels/axis are still positioned incorrectly.
Because you've floated the title container to the left, the chart container starts on the same "line" and tries to have its content "float" around the title container. This skews the axis labels out of place (green), while the actual chart (svg/canvas, pink) drops down below the title container.
To fix this, tell the chart container to stay clear of floats on both sides:
#chart {
width: 90%;
height: 90%;
clear: both;
}
It isn't really necessary to float anything though, and setting the height to 90% isn't always ideal. I made a suggestion in an updated fiddle: http://fiddle.jshell.net/froden/WsrHs/4/ .
The differences are just that the title container is a div spanning across the top, while the chart container is absolutely positioned so that it fills whatever space is left underneath. You can then just set width/height on panelContainer.
Absolutely positioned elements are taken out of the normal flow. This is why some of the elements are expanding beyond their containers. I have a feeling your floats are involved in that, too, but the fiddle is a little too complicated and a simpler version needs to be made.
I have a big absolute div that holds a smaller relative div. The smaller div wraps an Image (png) and auto sizes with height:auto. All works fine. But on one particular site, I get 5px of extra spacing at the bottom of the smaller div after the resize, like it over calculated the height needed? I assume I'm somehow inheriting something from the site that is impacting my resize and div container.
I reworked everything, clear floats, overflow, alternate positioning, removed auto option, flow, etc, but I can't seem to get rid of that 5px extra at the bottom, and its only on that site?
My question - how do you debug your height or auto height issues, and any idea what could be causing this?
Thanx,
Chris
on the container div:
line-height: 0px; will eliminate any height increase caused by white space.
padding: 0px; will eliminate an padding along the inside of the container div.
on the image
margin: 0px will eliminate any space added around the outside of the image.
Could you point us to the site or a jsfiddle so we can get a better idea of what's going on?
As #RyanMcDonough mentioned, Chrome's Inspector is awesome. In IE, you have the IE developer toolbar. In FF you can use Firebug (which is a classic!).
Try
font-size:0;
line-height:0
for smaller div
Example http://jsfiddle.net/U9z5K/14/
Or use
display:block;
for an image
I'd use something like Chrome's Inspect Element, and have a look at the css rules that are affecting it.
You can then go through all the elements and enable/disable on the fly to see what is affecting it.
https://developers.google.com/chrome-developer-tools/
In its simplest form, the problem is as follows. I have two divs (Ldiv and Rdiv) filling up my screen. Widths are 60% and 40% respectively, and heights vary according to the amount of content. Ldiv floats left and Rdiv floats right. The problem is that, as I narrow the window and push Rdiv against Ldiv, I seem to lose the right margin of Rdiv unless I make its width 35-39% instead of 40%. I have tried wrapping both inside an enclosing div container but this hasn't worked any better.
Can this be fixed by making one of the divs (say, Ldiv) a fixed width (in which case the layout is not entirely liquid, but that wouldn't matter too much)? I've read a number of posts here which say this is the way to go, but I can't see why it should. Many others say that with only 2 divs they should both float, but is there a non-floating alternative?
Thanks
Its not possible to give a real answer without seeing your code, BUT i guess to still have margins and paddings in your divs and/or your body element. So, in consequence the 40/60% dont add up to 100%. You can "remove" this with
body, #Ldiv, #Rdiv {
padding:0;
margin:0;
}
I'm building a page which is static vertically, but allows the space between page elements to grow when the user expands the window. This works fine. However, I'd like to set a minimum width for the page so that the elements stop shrinking together when the user resizes the window below a predetermined width, to prevent them overlapping.
I think the solution is probably simple, but I can't figure it out. I've set the DIV which contains "Recent News" to 48px from the right, absolutely positioned, and I'd like to set something similar so that it never gets closer than 800px (or whatever) from the left edge of the window.
I can post code snippets, but not sure what CSS would be useful right now.
You can see the problem I'm having here: http://www.cjfoote.co.uk/news/index.html
Use the css property min-width. This will make it so that when under certain width, it will not get any smaller.
See Also
CSS min-width Property
Yes, min-width is the correct property.
However, you need to change your layout a little bit in order to use it, because #centre, #left, and #right are all absolute.
You can do better with having the #centre positioned static or relative, with enough padding-right and padding-left to place the absolutely positioned #right and #left inside it. Then #centre will naturally consume the rest of the space and you can use min-width on the body.
I'm working on a jquery slider, except instead of using a fixed-width container, I'm using the whole browser window. I've got jQuery set up to fix the margins to make sure it's centered correctly (although I just made them 500 pixels in the demo to keep it simple), but the problem is when I try to add more divs, it puts them on a second line instead of putting them beyond the edge of the browser. Here is my code: http://jsfiddle.net/JsPZT/
Eventually, I'll change the overflow so that they are hidden when they are beyond the edge of the browser, but for now, I just want to know that they are on the same line and not being pushed onto the second.
So my question is what should I change in the CSS to make sure the divs are always on the same line, even if it means pushing them beyond the edge of the window?
To get divs to stay on the same line when they are off of the screen, you have several options. Here's what I can think of off the top of my head.
Make the parent container always large enough to hold the divs you want to float. Theoretically, they shouldn't jump down to the next line that way, but I haven't tried it myself.
Another option is to use a combination of display:table and display:table-cell on the parent and children divs respectively. You just have to make sure you are supporting the browsers you want to support.
My last idea is to set each div with position:absolute. Then, just adjust the left attribute to 100% * x to place the div off the screen to the left or right. Depending on what you are trying to do, when they are off the viewable area you could just leave them at left:-100% or 100%. The same should work for the top attribute if you want the div to be off the screen above or below the viewable area.
Try white-space: nowrap;
If that doesn't work, you will probably need an inner div with a width that's the sum of all contained divs.
You need to add a width to your #track CSS. That is your wrapper, and without a width on that, the items will just overflow and drop to the next line. You'll probably have to add another div to set the overflow and get everything positioned correctly.