Fiddle: http://jsfiddle.net/dbwvx42s
Description of Issue: I'm using Bootstrap to make some columns within a section. The section has zero height (e.g. height: 0) but 56.25% bottom padding in order to maintain the aspect ratio (16:9) of the other content on the page.
The problem I'm running into is how to vertically center the content within this zero-height, padded element. I've attempted a flexbox solution to no avail. I've tried inline-blocking the content and using vertical-align, which was also a no-go. I'm running out of tricks!
Any help appreciated.
Code:
#section-1 {
background-color: #0099cc;
color: #fff;
height: 0;
padding-bottom: 56.25%;
}
You can create an absolutely positioned child element containing the content:
#section-1 {
position: relative;
background-color: #0099cc;
color: #fff;
height: 0;
padding-bottom: 56.25%;
}
#section-1 div.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div id="section-1">
<div class="content">
Content goes here
</div>
</div>
Now, div.content can be used as a normal sized div.
Related
I want the size of my footer in the bottom of the page to be the same as my navigation bar in the top (with some white space in the corners).
The bar is inside a container which has container{margin:auto;}thats why there is white space in the corners .
I don't understand why the footer took the whole screen width, it is inside the same container as the bar on top.
here is the footer css:
.down{
position: absolute;
margin: auto;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: gray;
text-align: center;
}
I don't want to edit the margin left and right because it wont be responsive anymore
Tough to say without the HTML but try adding the following rule to the container:
.container {
position: relative;
}
The footer has a position absolute on it. By giving the container a relative position, the footer will be positioned relative to the container instead of the body.
This will cause the footer to not be attached to the bottom of the window, but the bottom of the content. So in addition, add a minimum height to the container:
.container {
min-height: 100vh;
}
you have to put your <div class="down"> inside the container
<div class="container">
<nav></nav>
<div class="down">
</div>
</div>
.down{
position: absolute;
margin: auto;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: gray;
text-align: center;
}
I want to divide the homepage into three responsive main sections horizontally: a header, a body and a footer, and then divide the body part into three responsive and equal vertical sections.
Please suggest a way to do so
Divide sections horizontally
There are many ways to do that, and by default most HTML tags are stacked horizontally of top each other, but to fix a header on top of everything and and a footer below everything, without leaving the page even when scrolling you need to use the position: fixed rule with the top, left, bottom and right values adjusted to your design's needs. In the example below we stick the div with class header to the top of the screen, by setting the top: 0, and make it span the full width by specifying the left: 0; and right: 0; properties, the same goes for the .footer but it is sticking to the bottom instead using bottom: 0;. Then we have the div with class body to contain the rest of your page, we need to give it a margin-top equal to the .header's height in order to prevent hiding content below the .header, the same goes for margin-bottom and the .footer's height.
Divide the body vertically (responsively)
This is achieved easily by giving the width of elements using percentages, so if you need to divide the .body div into three columns, each should span the third (33.33%), and that is achieved by setting the width: 33.333%. Now to show inner divs on the same line you need to set the display property to inline (or other inline values) and make sure the margin is zero because it is not counted in the width property.
Of course there are many alternatives to do that, but this is an example on how to do it:
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background: #4286f4;
text-align: center;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background: black;
color: white;
text-align: center;
}
.body {
background: green;
margin: 70px 0;
padding: 0;
width: 100%;
text-align: center;
}
.body_v1, .body_v2, .body_v3 {
height: 100px;
width: 33.333%;
border: 0;
display: inline-block;
margin: 0;
float: left;
padding: 0;
text-align: center;
}
.body_v1 {
background: #42f465;
}
.body_v2 {
background: #108928;
}
.body_v3 {
background: #034210;
}
<div class="header">header</div>
<div class="body">
<div class="body_v1">a</div>
<div class="body_v2">b</div>
<div class="body_v3">c</div>
</div>
<div class="footer">footer</div>
After all, my advice is that you use a third party framework to achieve this instead of reinventing the wheel, there are many examples out there you can have a look and choose the one that more suits you.
I am having a lot of trouble figuring this one out, essentially I have 3 columns: navbar (dark gray), main content (dark red) and sidebar (dark green) where navbar can be expanded and shrinked and sidebar can slide out and slide in (so change width from 0 to something and back to 0). And I want to keep all of this responsive. Idea is to shrink main content accordingly when some or both navbar and sidebar are expanded. unfortunately only way I can think to do this is to change width of main content to something like width: calc(100% - navbar width - sidebar width) but this is really verbose when I need to check if sidbar is expanded or navbar, or both are not expanded etc...
Here is an image illustrating how main content shrinks:
I assume flexbox could be used here somehow, but was not able to figure it out.
let example marku be
<nav> </nav>
<main> </main>
<aside> </aside>
note: nav and aside need to be 100% height of the page and are fixed in place.
You can use flex-box for this. A simple approach would be as follows: http://codepen.io/anon/pen/pgVVJb
You can change the classes to see how it changes the layout. NOTE: I am using classes to change the width of the columns but you could use JavaScript or static CSS similarly.
Code dump:
<div class="container">
<div class="small">Nav</div>
<div>Content</div>
<div class="medium">Sidebar</div>
</div>
html, body, div {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.container div {
flex: 1;
border: 1px solid #ccc;
background: gray;
}
.small {
max-width: 50px;
}
.medium {
max-width: 150px;
}
One popular solution to this is putting all of these elements in a wrapper with position: relative or even putting setting body's to position: relative, and all the elements inside with position: absolute. Then you can set each element as follows:
.navbar {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 50px;
}
.main-content {
position: absolute;
top: 0px;
left: 50px;
bottom: 0px;
right: 150px;
}
.sidebar {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 150px;
}
Of course the container element need to have some height for this to work.
I often have this problem with a lot of fixed navbars i.e. when I have a fixed navbar, how do I give the element below it some margin, so that the fixed navbar is not covering that element?
I was just wondering if there is a more elegant way of doing this apart from the <br> tag and margin-top.
The sample code would be like:
HTML code :
<nav>
I AM NAVBAR
</nav>
<br><br>
<div>
</div>
CSS code :
* {
padding: 0;
margin: 0;
}
nav {
height: 50px;
width: 100%;
background: #444;
color: #fff;
text-align: center;
font-weight: bold;
font-family: verdana;
position: fixed;
top: 0;
left: 0;
}
div {
height: 500px;
width: 100%;
background: tomato;
}
Fiddle here.
Fixed position relatives to the screen's viewport. You can just set top margin or padding on the body tag, and make the value >= the navbar height.
body {
margin-top: 50px; /*or padding*/
}
http://jsfiddle.net/5k5mxcn1/1/
There's a theory in CSS that you only apply bottom margins.
http://csswizardry.com/2012/06/single-direction-margin-declarations/
So to keep things modular, you could create a wrapping class:
<nav class="nav__wrapper">
<div class="nav__content">
Navigation
</div>
</nav>
<p>Text content</p>
css:
.nav__wrapper {
height: 30px;
margin-bottom: 10px // breathing room
}
.nav__content {
background: #dadada;
height: 30px;
line-height: 30px;
position: fixed;
width: 100%;
}
fiddle: http://jsfiddle.net/wv53qLwz/
A fixed element is position relative to the viewport, meaning it stays at the same designate spot and does not leave a gap in the page where it would normally have been located.
You can apply a top margin to the element that is directly following the fixed element.
div {
margin-top: 50px;
}
However, I've found out that using the scroll-margin property does the trick. It's explained better here https://css-tricks.com/almanac/properties/s/scroll-margin/#aa-enter-scroll-margin
div {
scroll-margin-top: 50px;
}
I have been struggling to come up with a good solution for centering a div. I don't like messy html, and I don't like having 2 or 3 unnecessary div's just for the sake of centering something. So I decided to use position:absolute.
Now I know that position:absolute breaks the flow of the document, and this is why this is happening, but is there a way to "unbreak" the flow of the document?
Right now, I have a div with 100% width, 20% height and vertically-centered. This div contains a paragraph and I have another paragraph element at the bottom of the page (outside of this div) - but because I am using position:absolute, the copyright notice appears before the div.
Is there a way we can get our document back to normal flow. I don't want to have to resort to setting margin-top: npx; to every single element on the page that appears after the div.
JSFiddle:
HTML:
<div id="container">
<p>Hi lol</p>
</div>
<p>Copyright Notice here</p>
CSS:
*
{
outline: none; outline: 0; border: none; border: 0; margin: 0; padding: 0;
}
#container
{
width: 100%;
height: 20%;
position: absolute;
left: 0%;
right: 0%;
top: 40%;
bottom: 40%;
background-color: khaki;
}
p
{
text-align: center;
}
also set your copyright paragraph to absolute bottom.
p { position: absolute; bottom: 0px; /* or any appropriate position */ }