I was looking for a sticky footer with a full height sidebar solution and partially found it here:
yet another HTML/CSS layout challenge - full height sidebar with sticky footer
The post marked as the correct answer explains a neat solution, but I was wondering whether it's possible to turn that fluid content div in a fixed one, same with the footer. (By fixed i mean fixed width).
The content div and footer should cover the entire visible width of the screen, and when resized, they should not resize with the window. They should stay the same and have a scrollbar appear instead.
Also, another particular thing I'm after is to have the sidebar with some additional left-margin. Here's the fiddle:
http://jsfiddle.net/2NbMg/
<div id="wrapper">
<div id="content">
<div id="sidebar">Sidebar<br/>Sidebar<br/>Sidebar<br/></div>
<div id="main">
Content
</div>
</div>
<div class="push"></div>
</div>
<div id="footer"><div id="footer-content">Footer</div></div>
(the CSS can be found on fiddle in order to keep this post uncluttered).
Oh, and if there is a way to make the content span from the right of the sidebar, not from the the window, it would be awesome!
I've been searching and trying to achieve this for two days with no success. I'd really appreciate if someone could help..
Later edit #toninoj:
Thanks again for the input and I apologize for not being so explicit. Basically, I want the footer to take full width especially on widescreens and laptops. The reason why I would like to stay away from 100% width is that I want my footer to still be large when the window is resized (made smaller), not adjust itself on resize or according to the window's size. The footer will have some serious amount of data contained within it, and it would look bad on resize.
I could throw in a high amount of pixels in order to keep its width fixed, but wouldn't that create problems on laptops, for example? (scrollbar appearing although not necessary)
You need to specify exact width of an element, e.g. width:200px; and you should give it position:fixed to make it sticky. also you should give it overflow:scroll;
If you want a fixed width footer without a scrollbar, you just specify something like
width:1600px;
overflow:hidden;
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.
*This is just a general question prior to the development, hence no code provided.
I want a div in the middle of my site to have a background width of 100% in order to go all the way across the screen, but this div is INSIDE the wrapper/container (of which has a 980px width) so it's restricted as normal to the regular content width.
How can this happen without ending wrapper and container, creating the full width div, then making a new set of wrapper/container divs? As w3 validator states to me I should have these particular div's more than once.
Im not sure exactly what you want without examples, but you may want to try something like this:
<style>
#width980{width:980px;height:200px;margin:0 auto;background:#aaa;}
#fullwidth{height:100px;background:#000;position:absolute;left:0;top:50px;right:0;color:#fff;}
</style>
<div id="width980">
width980
<div id="fullwidth">
fullwidth
</div>
</div>
Here, I made you a fiddle: http://jsfiddle.net/Wde8W/
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%}
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.
My code is as below:
<div id="frame1" style="overflow-y: auto;overflow-x: auto;width:87.5%;height:100%;" >
content
</div>
Here declared div working as a scrollable div but it doesn't resize as per window resize.
I have a situation where I need, on the same line, When the window is resized and the div's
eventually touch, I need them NOT to wrap, but instead, enable the horizontal and vertical scrolling.
Please Help...
<div id="frame1" style="display:block; width: 87.5%">
content
</div>
Height will increase based on content
Not quite sure what you are trying to do here. I'm guessing you have 2 div's next to each other and you want one of them to start scrolling when the space is too small for them both. If you know the width of the other div you could just do something like right: *div width* which would make the 'frame 1' div fill the rest of the space when the width was set to 100%. Then if the content of this div were too large for that div, scroll bars should appear. You would obviously need to set the position value to something other than static to get the top, right, bottom or left css values to have an affect.
I recently used something similar to this on a site with 3 fixed div's; a header, a footer and the main content. For the content, I have top set to the height of the header and bottom set to the height of the footer with a height value set at 100%. This makes the content fill the space between the header and footer. I then set the overflow-y value of the content to scroll so the vertical scroll bar is always visible but it is only on the content as the header and footer don't scroll anyway which gives a really nice effect, especially with webkit scroll bars.
Again, I'm not really sure if that was what you were asking. Temporary link to site here (resolution-gaming.comuf.com).