I have to make a website that have this layout:
There are 4 blocks: green (the footer), blue (the sidebar), red (the main container), and orange (the content).
I'm finding some difficulties to center the elements. The red block have a fixed width and height (980x680) , the sidebar and the footer should remain in their place, and if I have a bigger screen they still have to fill the full width and the full height.
Do you think is it possible to accomplish this result?
How about something like this: http://www.sidekick.com.au/files/stackoverflow/div-positioning/
The height of the blue sidedbar is the only thing that needs work. Currently it is set to a static height, or the height of whatever is inside it.
You can try this out... http://pixelsvsbytes.com/blog/2012/02/this-css-layout-grid-is-no-holy-grail/ or this one http://www.davidjrush.com/blog/2009/01/css-sticky-footer/
Related
I have a project that involves having a sidebar that floats over an image. The sidebar is set to position: absolute to keep it over the image and to help it scale along with it when the screen size changes.
Here is a codepen that basically recreates what I'm working on: https://codepen.io/gojiHime/pen/JmYqaz
The issue I'm having is with controlling the size of the contents within the wrapper container. I want the preview div to scale along with the wrapper container. Currently, it does not work as expected in that the preview div does not start scaling as the width and height change for wrapper and for thumbs-inner. The thumbs-inner div scales correctly for the most part, but the bottom of div is cut off so you can't see the bottom of the scroll bar in smaller screens.
I know I set overflow: hidden on wrapper but without it the content in preview would extend outside of it as the height of wrapper changed.
So, I'm looking for ideas on how to fix the aforementioned issues. wrapper must stay absolutely positioned and the thumbs-inner div needs to have a vertical scrolling feature, so I can't do anything with those. I don't think setting a height makes sense for wrapper since it needs to scale responsively in height and width.
EDIT: Not sure how much this will help but this is a screenshot of what the layout of everything should look like: enter image description here
The Kraftmaid logo, full-size thumbnail and the text below it (which are in the .preview div in the codepen) have to be visible at all times when changing the screensize.
I'm not sure if this is exactly what you're looking for, but generally for responsive layouts you would want to avoid fixed dimensions, such as specific widths set in x number of pixels.
This shows your code with responsive layouts for .wrapper and .thumbs-inner (note that I haven't addressed any content issues within those two divs since I have no idea what your intended layout is):
https://codepen.io/anon/pen/ZqrZaj
Note that:
I've switched the two layout divs to use box-sizing: border-box; which will allow you to use pixels for margin and padding but still use percentages for width.
I've removed width from .wrapper and switched to percentage based absolute left and right declarations - if you modify these values, the layout should still work.
I've added borders to make the layout more obvious.
Image I have a Layout with a fixed width column that is centered on the screen. This Layout has a header bar that for simplicity's sake has a fixed height.
Is it possible to have that header bar stay in place but make it seem like it extends all the way to the edge of the window on one side?
Let's say the header bar has a blue background and is 50px high. So the area to the right of column should also show a bar that has a blue background and a 50px height.
The only working solution I found was to use JS.
Get the window width, the header width and absolute position a super wide div so that it matches the end of the header. Then add a resize event handler (preferrably debounced) to adjust the position if needed.
This is not the solution I was hoping for. Any alternative (CSS) solutions are very welcome.
I hope what I try is not impossible.
Let me explain first: I have a responsive design which requires a background to be fixed under some situations (media query blocks). The design in question is this one:
http://think-open.at/fileadmin/templates/responsive/content.html
Basically there are two media queries: one for the maximal height and one for the minimal width. If there is enough viewport height there is a scrollbar in the content area and the design height is fixed. But if the viewport is not large enough for showing the predefined height the height-mediaquery removes the scrollbar from the inner div so there won't be two nested scrolling containers (body + div) and sets the content area to height: auto.
There is also a responsive media query if the viewport is too narrow but this works flawless.
Now the problem: When the design switches to the mode where the whole page scrolls (below 830px height) I would like to position the image in the right container "fixed" so it does not scroll out of the viewport. But then the problem arises, that I can't really position the background in regards to the container div as "fixed" positions an background image in regard to the viewport. I have created a CSS fiddle here:
http://dabblet.com/gist/ae5c3598e1465ce0c90e
If you change the width you notice the problem. I would like to have the right border of the image aligned with the right border of the green box.
Is this somehow possible? I have no problem using calc() as there will be a condition in my CMS to use the plain old-school design if an older browser gets detected.
I solved it myself now. Sorry for posting.
The trick was: As my design is centered, I started to try using calc(50% + somepixelvalue). This did the job.
I adjusted the CSS playground:
http://dabblet.com/gist/5b63553f47a81f3bb701
Now the image is always up in line with the right border of the green area. When scaling there is sometimes a 1pixel difference but this doesn't matter as the background will get assigned to some container element which acts as mask.
http://www.akebulan.org/index.html
I am trying to get the sidebar to take up the space it has available. If I set both html and body to 100% the div becomes much larger than needed. I want it to match the container on the right. Is this possible? Thanks!
if you want set background on 100% height left side:
set background in div id="main-div" like this background: url('img/Texture2.jpg');
set background in div class="col-lg-8" like this: style="background: #f7f7f7;";
your example: travelletters.ru/test.html
The problem is that your content is bigger than your sidebar.
What you could do is have a 'main-content' div (which contains your sidebar), and you just set your sidebar to height=100%, so it fills the vertical space needed by taking into account the content on the right
Your sidebar is overiding your content, so there needs to be some buffer or add height css
To summarize, I'm trying to get a "resizable page" both in the height and in the width of the window. I've two fixed blocs too. One on the top of the page and an other on the left (like the Flow app for example).
As you can see there, I'm trying to make the yellow part of the screen resizable (css only) but I get some trouble with the height part. The scrolling zone is always counting the height of the top bloc (the red one).
Is there a way to make it javascript free?
The div with id="container" has a height of 100%. This means 100% of the containing id='wrapper' div. One possible solution is to make the heights:
red part: 10% of the total height
blue+yellow (i.e. the "wrapper" div): 90% height
This would mean the "container" wrapper should nicely fill up those 90%.
Edit: only drawback would be that the red part is no longer a fixed hight pixel-wise.