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.
Related
i have a div inside its parent div and code is shown below
<div style="width:100%;height:400px;"><!--main_div-->
<div id="left_container" style="width:float:left;width:220px;height:1000px;"></div>
<div id="middler" style="float:left;width:800px;height:800px;background-color:#333;"></div>
</div><!--end_of_main_div-->
this code is perfectly HTMLized in browser
But when i resize browser(change the width of the browser window) the div(middler) is weirdly pushed below the main div .. why is it happening
like this page is perfectly spread even when the browser is re-sized
http://www.youtube.com/watch?v=YcpwaeP11pY
Because of this:
float:left;
What it's telling the browser is: Put these on the same line if there is enough room. If there isn't, drop it a line.
You're giving it set pixel widths, so it will always drop to the next line when changing window size.
Instead of using widths set by pixel, try using percentages instead.
Because float:left will only try and hug the adjacent div if it can. It's is no guarantee that the div will align to the right of the first div. It will only do so if it has enough space within the browser window.
If you want to keep the div entitled 'middler' to the right of your other div, you'll have to either use percentages or used fixed/absolute positioning.
The question alone is none-too specific, in my opinion.
You also have an error in your syntax on line 2:
This:
width:float:left;
Should really be this:
float:left;
But this probably won't solve your issue.
Because if the browser width is ess than 1020px, there is no longer enough room to fit both boxes side-by-side, so one of them has to give.
Try setting the size in percentages.
Like someone already said, if you set it to pixels the size is static and if the browser doesn't have space to fit both horizontally it will try to fit them vertically.
You could set a static min-width for your main div:
<div style="width:100%; min-width: 1020px; height:400px;">
Note: when you add a padding, margin or border to #left-container or #middler you should add that number to the min-width from your main div.
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 overflow-x:hidden placed on the body tag of my page so that any content extending beyond the window will not be visible. No scroll bars show up, however, I can still scroll to the left / right to see the content (kinda defeats the purpose of overflow-x).
-ms-overflow-x: doesn't fix the problem either.
There is a wrapper 900px;
Inside the wrapper, there is a div inside:
width:100%;
padding-right:300px;
position:absolute;
left:200px;
I would like the inner div to hang over the right side of the window without causing it to scroll (and leaving a 200px space the its left).
Any help? Thanks!
Since the width of the div is 100%, there should never be an overflow, since the div will always fit 100% of the viewport (assuming you haven't changed the size of your body tag).
As for the padding, the padding is added on after the width, so you're saying the div is 100% of the width of it's container (the body tag), and the padding is an additional 300px to the right, which will be invisible as it's out of the viewport.
You might want to try giving the div an explicit size width and experiment that way.
It may help to see an example of your markup as well, to get an idea of what you're trying to achieve.
More HTML/CSS would be useful, but given what you have right now, my first thought is that your wrapper is still set to position: static (the default for HTML elements).
If you add position: relative to your wrapper, it will contain the absolutely-positioned element within it, and should constrain it to the overflow restrictions.
Additionally, you may want to look into the box-sizing property and how the W3C box model works. In short, your padding is adding to the width of the element, so it's actually (100% + 300px), which results in a size that is larger than the container.
If you don't want to mess with box-sizing, you can also add max-width: 100% to your absolute div to force it to not grow out of its container.
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.
I'm trying to make a box with rounded corners where the height and width of the div depends on the content, so it's automatically adjust to it...
You can see the example here: http://pastehtml.com/view/1duizyf.html
The problem is that i can't get the "test_mid_left" (black background) and "test_mid_right" (turquoise background) to inherit the height from the "test_mid_center" (green background). I have tried height: 100% and auto, but none of thoose work. So how do I get them to inherit the height from the content?
(The reason why I have used "min-height: xx" in the left and right content on the example is just to show which boxes I am talking about)
As already mentioned this can't be done with floats, they can't inherit heights, they're unaware of their siblings so for example the side two floats don't know the height of the centre content, so they can't inherit from anything.
Usually inherited height has to come from either an element which has an explicit height or if height: 100%; has been passed down through the display tree to it.. The only thing I'm aware of that passes on height which hasn't come from top of the "tree" is an absolutely positioned element - so you could for example absolutely position all the top right bottom left sides and corners (you know the height and width of the corners anyway) And as you seem to know the widths (of left/right borders) and heights of top/bottom) borders, and the widths of the top/bottom centers, are easy at 100% - the only thing that needs calculating is the height of the right/left sides if the content grows -
This you can do, even without using all four positioning co-ordinates which IE6 /7 doesn't support
I've put up an example based on what you gave, it does rely on a fixed width (your frame), but I think it could work with a flexible width too? the uses of this could be cool for those fancy image borders we can't get support for until multiple background images or image borders become fully available.. who knows, I was playing, so just sticking it out there!
proof of concept example is here
The Problem
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
A Potential Solution
Now, I think the following article resembles what you're trying to do. Take a look at it and see if you can solve your problem.
Equal Height Columns with Cross-Browser CSS
I hope this helps.
The negative margin trick:
http://pastehtml.com/view/1dujbt3.html
Not elegant, I suppose, but it works in some cases.
You need to take out a float: left; property... because when you use float the parent div do not grub the height of it's children... If you want the parent dive to get the children height you need to give to the parent div a css property overflow:hidden;
But to solve your problem you can use display: table-cell; instead of float... it will automatically scale the div height to its parent height...
Most of the times, the Previous parent has a heigt manually set, so you can use that value as reference, no other dirty tricks will be needed, and if the number is not the same for any reason maybe a comment can be added with the original number so in case you need to change it, by searching at the all the values, this one can be adjusted or even changed, in the time someone resolve this one for us.