So I can successfully center a div using the following CSS:
.container {
width: 1024px;
margin: 0 auto;
}
I then have the container inside the body tags, covering all the displayed page content. This works just fine.
The issue is that when I do the same thing but set the width to 100%, the page is no longer centered. This restricts how dynamic I can make my page, as I have to then create a container for each screen width (in px).
How can I create a container that will center my page with a width of 100%?
Many thanks.
if you want to just center a div within a container.Then you have style div within container as margin:0 auto; . Below is simple demonstration:
.container_
{
width:100%;
height:700px;
background:green;
}
.centreBox
{
width:50%;
height:50%;
margin:0 auto;
background:red;
}
<div class="container_">
<div class="centreBox">
</div>
</div>
And if you want div to place it horizontally as well as vertically in center
.container_
{
width:100%;
height:700px;
position:relative;
background:green;
}
.centreBox
{
width:50%;
height:50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:red;
}
<div class="container_">
<div class="centreBox">
</div>
</div>
And you want to place div with width 100% ,then it will occupy whole horizontal space available.There you can only apply vertical centering:
.container_
{
width:100%;
height:700px;
position:relative;
background:green;
}
.centreBox
{
width:100%;
height:50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:red;
}
<div class="container_">
<div class="centreBox">
</div>
</div>
Hope this helps :)
If you have text inside that container which you want to center, add text-align: center; to the CSS rule you posted.
If you have other elements inside the container which you want to center, apply margin: 0 auto to them, as you did to the container itself (they need a width less than 100% for that to have any effect...)
I tried to create a minimal working example:
<!DOCTYPE html>
<html>
<head>
<title>CSS center</title>
<style type="text/css">
.container {
height: 100px;
width: 100%;
background-color: red;
}
.content {
margin: 0 auto;
height: 100px;
width: 80%;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="content"></div>
</div>
</body>
</html>
The blue content is 80% of the red container width and is centered in the parent.
If you want to center content you should add margin: 0 auto; to content.Not to container.
.container {
width: 100%;
}
.content {
margin: 0 auto;
height: 100px;
width: 50%;
background-color: black;
}
Related
Can a centered div contain a fixed div?
I would like to center a fixed nav box and a scrolling main box side-by-side together in any big window. I can fix the nav box in a non-centered view (first code below), or center the view with a scrolling nav box (second code), but have been unable to combine these two traits, after many tries including multiple nested wrappers. Maybe fixed and centering are incompatible? If this is possible I will appreciate seeing how it is done. Thank you.
(1) Fixed nav box, scrolling main box, not centered:
<style>
#nav {position:fixed; top:50px; left:80px; width:270px; height:400px; background:#ddd }
#main {position:absolute; top:50px; left:380px; width:800px; height:1200px; background:#eee}
</style>
<div id="nav">
</div>
<div id="main">
</div>
</div>
(2) Centered, nav box scrolls (#bigscreen here is just a temp to show the centering):
<style>
#bigscreen {width:2000px; height:1200px;}
#window {width:100%; height:100%; display:flex; justify-content:center; align-items:center;}
#wrap {position:relative; width:1125px;height:800px; background:bisque}
#nav {position:absolute; top:54px; left:20px; width:270px; height:400px; background:#ddd }
#main {position:absolute; top:54px; left:300px; width:800px; height:640px; background:#eee}
</style>
<div id="bigscreen">
<div id="window">
<div id="wrap">
<div id="nav">
</div>
<div id="main">
</div>
</div>
</div>
</div>
First, you need to create a wrapper(#content-wrapper in my answer) that includes #nav and #main divs. Then add display: flex for that wrapper to set child divs horizontally. To align the wrapper into the center, define a fixed width(1100px in my answer) and set left, right margin to auto.
Then add position: relative to the wrapper. That allows you to play with css position property in child divs within the wrapper.
Finally, add position: fixed for #nav div to set fixed position and add position: absolute & left: 300px(in my answer) for #main div to scroll in the wrapper.
See below.
<style>
#content-wrapper {
position: relative;
width: 1100px;
margin: 50px auto;
display: flex;
}
#nav {
position: fixed;
width: 270px;
height: 400px;
background: #ddd
}
#main {
position: absolute;
left: 300px;
width: 800px;
height: 1200px;
background: #eee
}
</style>
<div id="content-wrapper">
<div id="nav"></div>
<div id="main"></div>
</div>
You mean like this?
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.8);
padding: 10px;
display: flex;
}
#nav {
margin-right: 10px;
width:20%;
background: rgb(240,240,240);
}
#main {
width: 80%;
background: rgb(240,240,240);
padding: 10px;
overflow: auto;
}
#content {
height: 2000px;
background-color: rgb(220, 220, 220);
font-family: arial;
text-align: center;
line-height: 2000px;
margin-bottom: 10px;
}
<div id="overlay">
<div id="nav">
</div>
<div id="main">
<div id="content">Overflow content</div>
</div>
</div>
If this is the result you're looking for you should focus only on the following lines, they are the most important ones to achieve this.
#overlay {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
}
#nav {
width:20%;
}
#main {
width: 80%;
overflow: auto;
}
Edit: You can click on full page to see the result in expanded height.
I'm having a small issue with my code . I'm trying to code after a long time and forgot a few basics. I'm trying to create a simple html layout .
As you will also see in the pictures , i'm getting another issue where the page is slightly longer than i expected and its showing the slider to move up and down . I didn't want this unless the page content is longer than expected (wrap) .
The top will remain fixed all the time . the footer will move based on the length of the content or stay fixed at the bottom if the content(wrap) is small.
What i'm expecting:
What i'm getting (without top):
with top :
HTML layout :
<!DOCTYPE html>
<html lang="en">
<head>
#include('layouts.includes.head')
<link href="{{ asset('/css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id ="top">
<div>
<div id = "wrap">
</div>
<footer>
</footer>
</body>
</html>
CSS :
html,body
{
height: 100%;
background-color:red;
}
#top {
height: 50px;
height: auto;
margin: 0 auto -50px;
background-color: yellow;
width:auto;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -50px;
background-color: blue;
width:auto;
}
footer {
height: 50px;
background-color: black;
}
Fix the footer to the bottom of the page and give the wrap element a bottom margin of the height of the footer so the footer will never overlap the wrap div.
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto 50px auto;
background-color: blue;
width:auto;
}
footer {
height: 50px;
background-color: black;
position:absolute;
bottom:0;
left:0;
}
Try like this: Demo
html, body {
height: 100%;
background-color:grey;
position:relative;
}
#top {
height: 50px;
height: auto;
margin: 0 auto;
background-color: yellow;
width:auto;
position:fixed;
display:block;
top:0;
left:0;
right:0;
}
#wrap {
min-height: 100%;
height: auto;
margin: 50px auto 0 auto;
background-color: blue;
width:auto;
}
footer {
height: 50px;
background-color: black;
position:fixed;
bottom:0;
left:0;
right:0;
}
Try this code here
Header and footer would be fixed only the content would be scroll.
If there is no content the layout will be fitted as per the window resolution. the scroller would be disable till then.
I am trying to create 2 side banners (left and right) with fixed positioning, and a centered container for the content.
The problem is that when minimizing the screen, the 2 side banners cover the centered container. I need a CSS solution to set the minimum width of the view to 860px; after which, the window becomes scrollable and divs do not overlap. The perfect solution is:
The HTML I am using is as such:
<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>
<div class="center" style="margin:100px 180px 0 180px;">
<div style="width:100%;">
<div style="width:500px; margin:0 auto;">
</div>
</div>
</div>
<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>
The above code prevents the left bar from overlapping the center container; but the problem is still present with the right bar.
This is a fiddle of the code: preview
You need to wrap the three DIVs in a wrapping DIV and set the min-width to prevent the overlap. This prevents it from getting narrower than the three columns. Add up the widths, set that as the minimum.
Here is a pure HTML/CSS solution for you , tell me if it is not exactly what you needed.
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color : red;
width : 400px;
margin-left : auto;
margin-right : auto;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
height : 700px;
}
.innertubetop{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
</head>
<body>
<div id="maincontainer" style = "min-width : 800px;"> <!-- this will be sum of width of all three columns-->
<div id="topsection"><div class="innertubetop"><h1>Hello iam navigation bar</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Center Column </b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b></div>
</div>
</div>
</body>
</html>
The problem you are in is because of position: fixed; since that object is taken out of the workflow the other objects can't push it away. I was able to get a nice and fully responsive layout to work. (Let me know how it is)
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
Fixed positioned elements can overlap other elements.
Updated answer to better suit his needs (JSFIDDLE, remove the show, in the url, to see code)
Okay what I am doing here is using css media queries to change the layout.
Here is the html,
<div class="wrap">
<nav></nav>
<div class="content"></div>
<section class="lSide"></section>
<section class="rSide"></section>
</div>
Now the media query,
#media only screen and (max-width: 680px) {
.content {
width: 90%;
margin-bottom: 10px;
}
.lSide, .rSide {
position: relative;
width: 90%;
height: 100px;
margin: 10px auto;
bottom: 0;
}
}
Don't forget to add this to your head on your html file,
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
OLD answer
The CSS, (JSFIDDLE, remove the show to see code)
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: tan;
}
.wrap.active {
min-width: 750px;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20%;
background: brown;
z-index: 101;
}
.lSide {
background: #3b3b3b;
position: fixed;
left: 0;
top: 20%;
width: 200px;
height: 80%;
}
.content {
width: 300px;
height: 600px;
background: #c1c1c1;
margin: 0 auto;
position: relative;
z-index: 100;
top: 20%;
}
.rSide {
background: #3b3b3b;
position: fixed;
right: 0;
top: 20%;
width: 200px;
height: 80%;
}
.rSide.active {
display: none;
}
The JS, (updated)
$(window).resize(function() {
if ($(window).width() < '750') {
$('.wrap, .rSide').addClass('active');
}
else {
$('.wrap, .rSide').removeClass('active');
}
});
One solution I have, refer to fiddle next to css, is to remove the right side when a screen size is to small.
thanks for helping out. I have a site with a container div that I'd like to stretch to the bottom of the page. Using position: fixed I'm able to achieve this, but the footer text on the bottom is cutoff and you are unable to scroll down.
Using position: relative I'm able to scroll, but the container div does not stretch to the bottom of the page.
My code is as follows:
.container {
position: relative;
bottom: 0;
top: 0;
left: 50%;
margin-left: -480px;
width: 960px;
height: auto;
background-color: #1b1a1a;
}
.body {
width: 703px;
min-height: 340px;
margin: auto;
background-color: #f2f2f2;
padding: 20px;
overflow: hidden;
}
<div class="container">
<div class="header"></div>
<div class="body">
content content content
</div>
<div class="footer"></div>
</div>
Is this what you are looking for?
http://jsfiddle.net/gespinha/jrsxN/7/
CSS
html, body {
height:100%;
margin:0;
padding:0;
}
.container {
width:100%;
height:100%;
position: absolute;
background-color: #1b1a1a;
}
.body {
background-color: #f2f2f2;
padding: 20px 20px 120px;
}
.footer {
width:100%;
height:100px;
position:fixed;
bottom:0;
background:#f00;
}
I have been searching for this on SO, but I just could not find something exactly similar.
What I am trying to achieve is to have a page, that is full in height and in width, but does have a fixed header. The content height needs to be the remaining area left, but that area needs to have a height of 100%, most of the html code found on SO is just using height: auto. Basically I want to do this so that I can style it: adding border etc. Here's the code so far:
<html>
<head>
<title>Test</title>
<style type="text/css">
body, html {
height:100%;
}
body {
margin:0;
padding:0;
}
#header{
height:50px;
background:green;
width:100%;
}
#wrapper {
background:blue;
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}
#content {
margin: 10px;
background-color: black;
height: 100%;
width: 100%;
border: 3px dashed gray;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content"></div>
</div>
</body>
</html>
See: http://jsbin.com/agiyer
Note that if the content is too tall to fit inside #content, it will simply be hidden.
HTML:
<div id="header">header</div>
<div id="content">content</div>
CSS:
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
background: green
}
#content {
position: absolute;
top: 50px;
left: 0;
bottom: 0;
right: 0;
border: 3px dashed gray;
background: #ccc
}