All grid CSS frameworks have some kind of 'container' class that represents the grid boundaries.
Imagine that I have a page with:
header
search form
search results (loaded dynamically)
some more dynamic content
footer
Should (A) I have everything above inside one single grid container (i.e. to have a container per page); or it is (B) better to have each of above parts (i.e. logical parts of the page) to be a separate container, or (C) is is ok to have 3 containers: header, content, footer.
Is there any difference with this approaches or it is just personal choice? I just couldn't find any advice on this topic.
Depends on the project and what the design requirements are. The "container" class should contain the content, anything that goes outside of that container should not be inside the container div.
Example:
A header that has a background color that stretches 100% of the screen width, but with header elements that are left / right aligned with the container.
The markup would look something like:
<header><!-- this would be 100% width -->
<div class="container></div><!-- this would be whatever your container max-width value is -->
</header>
Related
This is a mockup for a blog post where some featured text is located in a container that has the text floating around it and it also appears to overflow outside of the regular container into the parent container.
This is being built in ReactJS as a template with content being populated from Sanity (a JS CMS). So I'm wondering how you'd structure your markup and then your styling?
A few notes worth sharing:
We're calling this "pull text", not sure if there are other common names for it.
The yellow bar at the top is the hero image and indicates the full width of the content
On mobile, the featured text stops floating and acts as a regular block element similarly extending to the far right of the parent container
Blog content varies in length, some might be very short, others might be very long.
My initial ideas are:
Use CSS grid and allow the featured text to flow out of the center column into the far-right column.
Float might work with a negative margin-right
I'm creating a basic web app which contains a sidebar that is sized vertically by how many elements are in it.
I want the web-app to have adaptive sizing, so will work on any size device.
When the user shrinks the viewport vertically and some of the elements within the sidebar overflow the viewport, I want the sidebar to shrink not overflowing the viewport, and allow scrolling of its contents.
The sidebar is not a predefined height (eg. 50% or 700px), as it is determined by how many elements are within it (could be 3, could be 30).
The image below is the best way I can visualise what I am looking to do:
CSS example
White: is the viewport
Light Blue: is the sidebar
Dark Blue: is the elements inside sidebar
Grey: is the scrollbar
I can get this to work when the sidebar is a predefined height by using overflow: auto, but cannot get this to work when I do not define the height of the sidebar, and leave it to the child elements to determine its height.
Any help at all would be greatly appreciated!
If i can understand true, you can use calc() function in your css.
eg:
If you show 5 element on viewport(height), you can use this code for element style:
height: calc(100vh/5)
this code means: Divide the entire apparent height by 5.
eg: https://jsfiddle.net/uniak/rgzf9nmy/
We are using Bootstrap 3 on our site and I'm attempting to extend content outside of the container, but am coming up unsuccessful. Here is an image on what I'm trying to do:
https://imgur.com/a/tGDMf
I would like to use 9 columns on the right of the container for content in 3 sections, and use a div to cover the left 3 columns and extend to the edge of the screen. I have used :before and :after attributes for extending background's to the edge of the screen in the past, but the content has been inside the container. I need the content to go outside of the container if possible. The content above and below this section will be using Bootstraps columns so I'd like to follow suit with the responsiveness and structure.
Any ideas on how to solve this problem?
Is it possible with CSS to have two fixed headers which when made responsive affect the content of the scrollable element. I.e. has the headers gets bigger it pushes down the content below.
I am trying to do it with flex boxes, but stuck on having a second fixed header within and scroll element.
http://codepen.io/labithiotis/pen/tkAlB
Want to avoid using lots of media query or js. feel like there must be a solution with flex box.
*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/