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.
Related
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.
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.
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 */ }
What's the best approach to creating a div that will take the full width of the screen, no matter what resolution? I'm trying to add a 'top' bar and bottom 'footer' area with divs that have a black background and styled border that I'd create with a small image and repeat. For some reason my attempts are leading to small spaces on the top and sides of the div?
My markup is similar to:
<div id="top">
Top bar stuff
</div>
<div id="pagewrap">
All the page content
</div>
CSS
#top {
width: 100%;
margin: 0;
padding: 0;
background-color:#000
Usually this is the body tag having some paddings and/or margins. Try adding:
body {
padding: 0;
margin: 0;
}
If this works, you may want to consider using a normalization stylesheet that fixes this type of issue as well as many other related types of issues.
Extended answer...
The above answers the core issue folks landing here seem to have. But to expand a bit, try to directly answer the original question, and also providing some staple code that I use for things nowaydays:
Here's how I would create a full-width, but also full-height div inside a body in a cross-browser (but modern browser only) way:
document.getElementById("pagewrap").innerHTML = "All the page content<br>".repeat(100);
* {
box-sizing: border-box; /* not completely needed, yet useful */
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
display: flex; /* or css grid for more intricate layouts */
flex-direction: column;
}
#top {
background-color: LightCoral;
height: 150px;
border-bottom: 3px solid Crimson;
}
#pagewrap {
background-color: LightGreen;
flex-grow: 1; /* make it stretch to the bottom even if little content */
overflow-y: scroll; /* optional */
}
<div id="top">Top bar stuff</div>
<div id="pagewrap">All the page content</div>
Just use top:0; and left: 0; and you can also eliminate padding: 0. Don't use top: 0; for other div except top, use left: 0; for other div for eliminate the left space.
#top {
width: 100%;
margin: 0;
padding: 0;
background-color:#000
top: 0;
left: 0;
}
Ensure that body has padding and margin set to 0 in CSS.
I want to create a html page with a header of fixed height, a middle part with variable height and a footer with fixed height. The footer and the header shall not move when scrolling.
No problem so far.
But i want the midlle part to be divided, so that the right column and the left column have seperate scrollbars and scroll independently. This is possible with overflow:scroll as long as the parts have fixed heights. But i want them zu grow and shrink with the window.
I do not linke frames and i want to alter the contents of the 2 columns frequently using javascript (ajax).
What is the best way to create such a page?
I've tested this in IE7/8 (not 6!) and recent versions of: Firefox, Chrome, Opera.
Live Demo (complete with boring colours)
The HTML is very simple:
<div id="header">header</div>
<div id="middle">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
On the other hand, the CSS is a bit more complicated:
html, body {
margin: 0; padding:0; border: 0;
overflow: hidden
}
#header, #middle, #footer {
position: absolute;
width: 100%
}
#header {
background: #777;
height: 150px;
top: 0
}
#middle {
background: #f00;
top: 150px;
bottom: 150px
}
#footer {
background: #777;
height: 150px;
bottom: 0
}
#left, #right {
overflow-y: scroll
}
#left {
background: #aaa;
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%
}
#right {
background: #999;
position: absolute;
left: 50%;
top: 0;
float: right;
width: 50%;
height: 100%
}
I will explain how the CSS works if you ask me to.
Try using percentages on divs (and leave out the table). For example, you might set a header at height: 20%, and two middle scrolling divs at height: 70%; width: 50%; float:left;. This leaves the footer div at height: 10%. Changing the contents of the middle divs via ajax shouldn't change their height. But of course, this provides a variable, not fixed, header and footer.
note: these numbers are just for illustrative purposes. You'll need to adjust them, including padding/margins, which are not accounted for.