I'm quite new to CSS and I'm trying to get a page up and running. I managed
to successfully produce what I thought was a nice page until I resized the
browser window then everything started to move around. I have no idea why
this is happening!!
Could someone offer me some advice please. When I resize the window I would
like the 'objects' to stay where they are but the window to resize. for
example, if I drag the bottom corner of a window up and to the left I'd
expect to see what was at the bottom right disapear and scroll bars to
appear but the object in the top left hand corner would stay exactly where
they are.
Am I making sence ?
Have a look at working condition of my page : http://aimmds1.estheticdentalcare.co.in/
then try to resize the browser window by dragging the right size leftwards .
and look at the content in header , and also the menubar .. they jump down ,, the header content was also jumping down then i make overflow: hidden ; .. but as i understand all this is not the right way.
Please find the html and CSS here : http://jsfiddle.net/swati/hCDas/
I already tried prevent div moving on window resize , i tried setting min-width:820px; for div header , that the main containing div.. but that doesnt solve it.
Thanks in anticipation of your help.
1 - remove the margin from your BODY CSS.
2 - wrap all of your html in a wrapper <div id="wrapper"> ... all your body content </div>
3 - Define the CSS for the wrapper:
This will hold everything together, centered on the page.
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
There are two types of measurements you can use for specifying widths, heights, margins etc: relative and fixed.
Relative
An example of a relative measurement is percentages, which you have used. Percentages are relevant to their containing element. If there is no containing element they are relative to the window.
<div style="width:100%">
<!-- This div will be the full width of the browser, whatever size it is -->
<div style="width:300px">
<!-- this div will be 300px, whatever size the browser is -->
<p style="width:50%">
This paragraph's width will be 50% of it's parent (150px).
</p>
</div>
</div>
Another relative measurement is ems which are relative to font size.
Fixed
An example of a fixed measurement is pixels but a fixed measurement can also be pt (points), cm (centimetres) etc. Fixed (sometimes called absolute) measurements are always the same size. A pixel is always a pixel, a centimetre is always a centimetre.
If you were to use fixed measurements for your sizes the browser size wouldn't affect the layout.
I'd rather use static widths and if you'd like your page to resize depending on screen size, you can have a look at media queries.
Or, you can set a min-width on elements like header, navigation, content etc.
hi firstly there seems to be many 'errors' in your html where you are missing closing tags, you could try wrapping the contents of your <body> in a fixed width <div style="margin: 0 auto; width: 900px> to achieve what you have done with the body {margin: 0 10% 0 10%}
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 an absolute div as the main content area on my page design. I have another div that occupies the top portion and which is 450px in height. I cannot know the height of absolute div before page load, so will only be able to find it out after page load has happened.
Now the problem is that my body also occupies 450px (height), so if I want to display something after the absolute div has ended I am unable to do so.
Summary :
Absolute Div : 600px (for example, don't know the actual height) Has position:absolute.
Top Div : 450px (No position:absolute)
Body Becomes 450 px as expected
How do I place a div below the absolute div. Currently the only thing I can think of is jQuery.
Here is a jsfiddle I made to the illustrate the problem. Even though the whole body displays blue, if you fire up the developer tool and inspect, you'll see that the html and body both occupy
UPDATE : Linky I'm trying to display the main content area above a few elements. Those circles that you see are seperate elements. And they need to stay that way.
I think you need to learn more about the positions!
Anyhow the current problem you are referring to will be solve if you change the position to relative!
<div id="First Div" style="height:100px;width:50px;position:relative;background-color:green;">
</div>
<div id="BelowDiv" style="height:100px;width:50px;position:relative;background-color:pink;">
</div>
But if you really need to place it somewhere static or in another word "absolute", then you need to place a container div and set the position to absolute, then place the other two or even more or inside the container Div.
<div id="container" style="position:absolute; top:y; left:x">
<div id="FirstDiv" style="position:relative;></div>
<div id="SecondDiv" style="position:relative;></div>
</div>
You can use jquery to append tags to your container. here is the sample link to do it!
If it didn't help try the height:auto and also overflow:visible for your container!
I have multiple divs with text and what not in them. When the page is made smaller horizontally all of the elements shift. However,if you resize this page, elements disappear and nothing moves. How do I fix this problem so it is like this page?
Thanks!
If you view the source of this Stackoverflow page, then you will notice that all of the content on the page is wrapped inside of a container div with the width set to 100%, and the margin and padding both set to 0. If you want to have a fixed width, then do not use percentages, but instead specify your page to be a specific width in pixels.
If you want to center all you content, wrap it in a div like so:
<div class="wrapper">
<!-- Your Content !-->
</div>
And then add the following to your stylesheet:
.wrapper {margin:0 auto;width:960px;} /* Change 960 to desired width */
I hope this helps!
Predefined sizes make the elements do not move when you resize the screen, that will keep their size in different screen resolutions also, that is to take into account. Also you must use margins and padding fixed.
In short ... not more percentages, but don't abuse fixing everything
I have created a layout in CSS/HTML with the following structure:
Navigation in the footer scrolls the content horizontally to show two different screens. The screen content is fixed height and vertically centered and the layout always fills the entire window.
Because my content has a fixed height, I need the browser to display a vertical scrollbar when the window reaches a certain height.
I also have a couple of position:fixed <canvas> overlays that get cropped by the <html> and <body> elements which are set to height:100%; width:100%.
I hoped that by setting min-height:700px on the <body> selector I could get a scrollbar to appear when the window got too short. This doesn't seem to be work.
How can I make this website generally full-screen but scroll when below a minimum size threshold?
Well, that should effectively make sure the body is always at least 700px. However, position: fixed will still anchor them to the bottom of the viewport, so you will essentially be only scrolling the background. I believe you want the header/footer bars to stick to the top and bottom, so you can always see the full content between them?
So, does something like this fiddle behave more like what you're looking for? http://jsfiddle.net/jblasco/qPB9k/8/
It uses a wrapper div that does the min-height, and uses absolutely positioned bars instead.
Try this: overflow-x: auto;
It will try to put a horizontal scroll bar once the content exceeded the size of its container.
I am creating a blog based on the 960 grid system. It has three simple divs:
header 2. Content 3. Footer and each of them has a fixed width div which holds 2-3 columns of text. The content div, and the fixed width div inside it have the same background color, but when i reduce the size of the browser window, for some reason it ignores the content div's color and reveals the color of the html body.
here's an example of another website where it happens: http://encourageothers.com/ ... reduce the size of the browser to something less than 900 px or so, and scroll horizontally to the right ... u will see what I mean.
Please help me! ... This is driving me nuts!!
jake is absolutely right with the 100% width related to the viewport of the browser.
instead of adding an additional max-width, add an additional MIN-width to the div showing the resize-problem. if your smallest width, before the scrollbar appears, is 1200px - just give the div in question a min-width of 1200px.
Found the solution! ... just set a max-width in pixels and also a width in 100% wherever u see this problem. Works for me.