I have a pretty simple two column layout where the left column is for main content and the right column is a sidebar, which contains some 300x250px ads. My issue is that I want the sidebar to always be the same width so that it won't cut off my ads (they can't be resized). However, I'm finding it difficult to achieve this using susy. Below is a screenshot of the layout.
Any ideas?
What you are describing doesn't need a layout frameworkâa floating div with a width will make the sibling be fluid. You could be more explicit with CSS calc: https://css-tricks.com/a-couple-of-use-cases-for-calc/
width: calc(100% - 300px);
Related
I am creating an Angular application with Bootstrap and i stumbled on a problem. I am trying to size one of my divs in the page where the height is fullscreen, however i have a navigation bar and one other element above this div (i am also using padding from the above element). I want my div to be exactly right height to fit from the last element to the bottom of the page.
Now the problem is, when I set style of my div to 100vh the site doesn't fit and i get a slider to scroll through the whole page. Is this because vh doesn't take the navigation and the other element into account and just set my div to default screen size? And how to correctly repair this problem that it will work the same across any screen?
There are several approaches to get your div the height you're looking for.
Use the calc css function. It should be something like this:
div {
height: calc(100vh - 60px);
}
Replace the 60px with the pixel size of your navigation element.
[Alternate solution] Use flexbox css styles. You'll need to use a column flexbox setup and flex: 1 on the element you'd like to take up the remaining height.
You can have a container div of 100vh. And inside it your nav bar will be sticky-top in a child div. And your other child div is the parent of your content.
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.
I have a CSS grid layout for a webapp, with a fixed-size header and footer (defined with rem units), and an expandable center row (defined as 1fr) that contains two sidebars and a central content area. The outer grid container is defined with a width and height to fill up the viewport (100vw/vh). I want the center row to take up all the space between the header and footer, and for any overflow to scroll, rather than to expand the height of the page.
I've tried various possible solutions, including using overflow-y:scroll, but nothing seems to work. The extra content makes the page longer, rather than making the region scrollable.
I don't want to use a fixed size for the center row, because I want it to expand to fit arbitrarily large screens.
Here's a fairly minimal example of my layout:
https://codepen.io/Shepazu/pen/EwePgB
(Please note that the nested areas in the HTML and CSS are intentional, so any solution should be CSS only, and shouldn't change the HTML markup.)
Assuming the fixed height of header and footer is 100px, then give the style to the content area:
.center-row {
max-height: calc(100vh - 200px);
overflow-y: auto;
}
I am building a web site for home made jewelry. I'd like it nice and centered ( for all those ppl with low resolution ) so all of the titles, navigation and content are in a single div, that I positioned in the center. On the left ( inside the div, everything is inside the div ) I have my vertical navigation sidebar div. On the right I have the title and the content. So far so good. Now to the problem:
I would like my sidebar to have a right border all the way from the top of the page to the bottom ( with 1em margins if possible ). The trick is that my content to the right variate from text to pictures and forms and is quite different on every page - when the content is larger then the screen the screen scrolls and in which case I'd like my sidebar border to scroll down with it - I've not been able to do that.
I think I have done quite a reading - my closest solution was to set the border's position to static but this quite obviously isn't working when the site is centered. So to the question - is there any CSS only way to make the sidebar div's height dynamic or something and define it to expand with the content to the right? This way the border will always reach the bottom.
Wrap your navigation in another div. Give this new div a height of 100% and assign it a border-right CSS property. You can also set padding too. Hope this helps.
How about giving left border to the content section Div, instead of Nav menu. so that way the border could change height according to the content area height
body,html{
height:100%;
}
#wrapperdiv{
height:100%
}
#navigation{
min-height:100%
}
I need to make a layout that looks like this:
[250px - fixed div] [fluid div, must expand depending on the width of the body and the 2 divs next/before it] [250px - fixed div]
is this possible?
the container of all 3 divs is also fluid (100% width).
all these divs contain background images (left + right + repeating center image) and should stay in the back.
I suggest reading The Holy Grail for a complete tutorial walk-through and description of necessary browser hacks and such for creating the layout.
In addition, I would advise that you consider placing a max-width either on the containing element or your fluid div (for instance:#container {max-width:1024px;}), because on exceptionally high resolutions / large screens, a stretching div can become obnoxiously large to the point of user frustration.