I have a page with two divs "list_events" and "right_content" one next to each other.
When I resize the window "right_content" moves down "list_events" but i dont want that!
I dont want those two divs to move neither to scale down on window resizement..how can I achieve that?
this is the code
.list_events{margin-left:1em;float:left;}
.right_content{float:left;margin-left:1em;}
thanks
Luca
first add a parent div/wrap and put those two divs of yours into it.
like so:
<div id="wrap">
<div id="list_events"></div>
<div id="right_content"></div>
</div>
then you can try the
min-width(px/ems/ etc) on the parent/wrapper div like so:
#wrap{
min-width: 600px;
}
Overall, whatever size you add to the min-width itll scale the parent div down to the size specified.
once the window is sized down past your specified size, itll behave like any other window.
this is my way of doing it.
You can put this divs inside parent div with fixed width/height for that div, or you can determine a percentage width/height for each two divs.
Related
I have one main div covering the 100% of the available space in webpage, and it contains three others divs, like this:
<div id="container">
<div id="header"/>
<div id="content"/>
<div id="footer"/>
</div>
I need two of them (the yellow ones) to be resizable, because their content is dynamic and sometimes need more than a single line of text. So, what I need is they cover the 20% of the available space but if they need more to resize and make the center div smaller. What should I read about? I don't find the keywords to google it. Thanks a lot!
This is a "not-working demo" haha:
Use the CSS min-height property on the header and footer divs, and remove the height property from the content div.
#header, #footer {
min-height: 20%;
}
I don't believe these answers are understanding the question.
If I get you correctly, you want to have the top and bottom be some minimum height (say 20% each), and the center fill the rest.
In that case you will have to use JavaScript. Find the height of window and set top and bot to have a min-height. This will allow them to scale. From there you will get the height of the head and the foot, subtract them from the height of window, and set the content area to be that height.
I would write you out an example but it sounds like you want to do it yourself, which I commend.
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 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'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%}
Here is my site, first of all.
You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.
Now, resize the window to slightly smaller, and the right div will drop down to the next line.
Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
http://www.thecssninja.com/xhtml/ie6-min-width-solutions
You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.
I'm not a fan of horizontal scrollbars, but it beats completely removing content.
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.