http://codepen.io/anon/pen/BFjCE
I am trying to postion the div which is at the bottom of this example to the right of the larger div. They are both being floated left but the 2nd div won't postion next to the bigger one.
I am guessing it is something to do with the sizing and when ever i make it smaller it works.
This image shows what I mean
Well you have answered the question already, size of the div will matter. In case the adjacent divs size sum up more than the available width of the box containing them, it will cascade down. In case you still want them in same row, you would have to give overflow-x
The problem you're having is that the two widths in reality exceed the 100% page width, because you have padding on the widths. The padding is not included in the 60% and 40% widths that you specified for your sections, so the float is going past 100%, and thus the second element has been pushed down.
I did a quit edit to your CSS changing .grid-1-2 from 60% to 50%, and this solved the problem.
.grid-1-2 {
width: 50%;
}
Related
I want a div to be position: fixed; with a top: 125px; bottom: 125px;
The content of this div is dynamic, so the sum height of the children of this popup is not always taking up the entire div's height, meaning the parent is showing at the bottom of the children. What would be the way around this? Would I have to use margin instead of top and bottom?
You don't need bottom here, just set the top and let the height expand naturally to fit the children. If you don't want the parent to ever be less than a specific height then use min-height to set that.
Hard to say without seeing your complete layout, but maybe probably just omitting the bottom css would be enough.
If you don't specify a size restriction a div should, by default, dynamically grow and shrink to fit the contents of it's children. In this case you are forcing it to a certain size by setting an absolute position for both top and bottom, thereby creating a fixed height.
So, I have this code
http://pastebin.com/W3ggtgZB as css, and the body looks like this:
http://pastebin.com/2tkmhnfW
What I am trying to do is create a div with two children divs, one of which has a fixed width, and the other one I want to fill the rest of the blank space. I'm eventually going to want a div going across the top of this side div, too, but, that comes later. My issue is, the child div sub1 expands to be 100% of its parent width, which is an issue, because then it overlaps out of the parent div and keeps going. I tried things like floating left, using block and inline, I tried setting the width to auto (which makes it disappear for some reason) - but nothing seems to really work. It looks okay, at first, but when you zoom in, sub1 kinda follows its own rules. Can someone help me fix it so that sub1 will just fill in the rest of the space left in the main div?
Here is the answer:
http://dabblet.com/gist/6069015
Only need to specify the side column's floating and the rest will take place as you want, adapting the screen size as well.
Hope it helps!
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 am creating a table which I want to have a top part, middle part, and a bottom part. The middle is also divided into a left, center, and right. I want it so that the only thing that ever gets larger or smaller is the middle's center. I am encountering a few problems with this however:
The table isn't filling the entire height;
The Center-Left and Center-Right aren't holding their widths
I have created a JsFiddle so that you can see what I mean.
http://jsfiddle.net/CGv2Z/
Thanks!
Ignoring the fact that this is a table and you appear to be wanting to use it for layout (hint: You probably shouldn't be), and some other problems.
There were 2 primary problems.
You had every element under .Window set to display: block; and width: 100%. Remove that.
You have the width of .Window-Content-Content set to 100%, which is 100% of it's parent, which isn't what you want. You have left and right set to specific widths, table cells will then naturally fill in the extra width. if the parent table has a width set on it.
http://jsfiddle.net/CGv2Z/10/
take a look at this :
http://jsfiddle.net/CGv2Z/12/
Please reference the following example:
In it, an outer div 200px wide is meant to establish our page width. It contains an inner div 400px wide, but with left/right negative margins of -100px.
My intended end result is that the browser register total content width at 200px, not 400px, but horizontal scrollbars show up as soon as the window is resized to less than 400px. What is going on here?
Negative margins don't adjust the width of the div. A negative left margin will move the div to the left of it's position in the flow of the page, and a negative right margin will allow other elements to overlap the right hand side of the div by the amount of the margin.
You can hopefully see what I mean in this jsFiddle.
From your question it sounds like you need overflow: hidden to contain a large div within a smaller one without spilling out of its boundaries.
Gareth's answer is correct. Even with negative margin, the div is still part of the standard page flow and will not be ignored with respect to layout. Genuine page content cannot be ignored for scrolling purposes.
However, if you're doing this for an aesthetic, such as having a shadow down the sides of the page that extends beyond your max width, this can be achieved with a background - this question should help.
as Gareth already mentioned, margins do not affect the box size. The solution is rather simple. The outer container needs to be 400px, this is what is going to trigger the horizontal scroll bars. The inner container needs to be 200px with 100px left and right margins. When you resize the window, the scroll bars appear as soon as you have gotten smaller than the outer container.
http://jsfiddle.net/58VFB/
Try adding this to your CSS...
body {
overflow-y: scroll;
overflow: -moz-scrollbars-vertical;
}