Just a quick question:
I have this html:
<div class="container">
<div id="header">
<div id="navbar">
</div>
</div>
</div>
and CSS:
.container {
position: relative;
text-align: left;
width: 100%;
background-color: yellow;
}
#header {
position: relative;
background-color: red;
height: 120px;
width: 960px;
margin: auto;
}
My header (red container is stretched from left to right 100%) but I want it to be in a middle width given width; Help me please =)
try the css in
#header{ margin:0 auto;}
jsFiddle
You probably want to do
#header {
margin-left:auto;
margin-right:auto;
}
That'll center the div horizontally.
You can either do
#header{margin:0 auto;}
Or
#header{position: absolute; left:50%; margin-left: -480px;}
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.
We want to display an image like this centred in a page: the height should be 100% of the window height, with corresponding proportional width. On either side of the image, we'd like to continue the grey brick pattern that you see at top and bottom of the image across the page on either side. The background should match the size of, and line up with, the one in the image, however big the image is.
Can anyone suggest a CSS-only way to do this?
Here's the kind of markup I've been trying so far:
<div id="container">
<img src="http://i.metro.co.uk/images/temp/visual.png" id="middle">
</div>
CSS:
#container {
height: 100%;
background: url(visual-top.png) repeat-x;
}
#middle {
outline: 1px solid red;
display: block;
height: 100%;
margin: 0 auto;
}
Here's a Codepen.
Sure you can. You might run into aliasing-problems so that your images don't line up perfectly, but in theory it's easy.
The way I would do it is using multiple backgrounds. Here is the CSS you need:
body {
background: url([screenshot.jpg]) center top no-repeat, url([tile.jpg]) center top repeat-x;
background-size: auto 100%, auto 17.5%;
}
Then you need to fiddle with the height of the tile. I came up with 17.5%, but that depends on your screenshot.
Here is a working fiddle.
<div id="brick">
</div>
<div id="mario">
</div>
css
html,body{
width: 100%;
height: 100%;
margin: 0;
}
#brick{
position:absolute;
width: 100%;
height: 60px;
background-color:gray;
background-image: url(brick.jpg);
background-size: 100% 100%;
top:0;left:0;
z-index: -1;
}
#mario{
width: 400px;
height: 100%;
z-index: 2;
background-image:url(mario.jpg);
background-size: 100% 100%;
margin: auto;
border: 1px solid;
}
yes it can be done.
<div class="wrapper"><img src="yourimage.jpg"/></div>
the css
.wrapper{
width:100%;
height:100%;
text-align: center;
}
.wrapper img{
height:100%;
z-index:1;
}
So it will be on top of your background
html:
<div class="wrapper">
<div class="top"></div>
<img src="path/to/img.jpg"/>
</div>
and the css:
.wrapper{
text-align: center;
height: 100%;
width: 100%;
position: relative;
}
.wrapper .top{
position: absolute;
height: 80px;
left: 0px;
top: 0px;
background: url('pattern.jpg') 0 0 repeat;
width: 100%;
z-index: -1;
}
.wrapper img{
height: 100%;
width: auto;
}
<body>
<style>
.main{
width:100%;
display:table;
text-align:center;
height: "image-height";
}
.wrapper{
width:100%;
height:auto;
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div class="main">
<div class="wrapper">
<img src="image.jpg">
</div>
</div>
</body>
You can try this. This is nice article.
I've created the below jsfiddle recreating my problem, I want that the .dashboard & .inner-dashboard have always a 100% height and keep the footer always at the bottom.
http://jsfiddle.net/rv7xN/1/
HTML
<div id="wrap">
<body>
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
</body>
</div>
<div id="footer"></div>
CSS
html,body{
height:100%;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
#footer {
height: 60px;
background-color: blue;
}
.dashboard{
width: 100%;
height: auto;
min-height: 100%;
position: absolute;
padding-bottom: -60px;
background-color:green;
}
.inner-dashboard{
height:100%;
padding-bottom: -60px;
background-color:red;
}
Here's an example : jsFiddle
I had to modify the html to have a common container for the dashboard and the footer.
<div id="wrap">
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
<div id="footer"></div>
</div>
I turn the wrapper (common container) in a table and the other elements in table-cell.
So even if your dashboard is height 200%, the footer's still at the bottom.
html,body{
height:100%;
}
#wrap {
position:absolute;
display:table;
height:100%;
width:95%;
padding-bottom:60px;
}
.dashboard{
width: 95%;
height: 200%;
display:table;
border:5px solid green;
}
.inner-dashboard{
width: 95%;
height: 100%;
display:table-cell;
border:5px solid red;
}
#footer {
display:table;
height: 60px;
width:95%;
border:5px solid blue;
bottom:-10px;
}
Is that it ?!
I have added modified your css and added position attribute
I hope the revision solves your issue: [UPDATE] http://jsfiddle.net/saurabhsharma/rv7xN/3/
I am trying to create a page layout something like this.
This is my HMTL structure -
<div id="content-three-cols">
<div class="leftcol">
</div>
<div class="cols-content">
<div class="banner">
</div>
<div class="two-cols">
<div class="rightcol">
</div>
<div class="middlecol">
</div>
</div>
</div>
</div>
This is my CSS code so far -
.leftcol {
display: inline;
float: left;
min-height: 500px;
width: 180px;
background: #34ab2b;
}
.banner {
background: #ffe400;
border-bottom: 1px solid #DDDDDD;
float: left;
width: 750px;
height: 150px;
}
.middlecol {
width: 600px;
min-height: 600px;
background: #2b73ab;
}
.rightcol {
width: 150px;
min-height: 500px;
background: #b2540f;
float: right;
}
Adding this styles I couldn't get my expecting output. Instead my desire result this code create a mess layout for me. Can anybody tell my how can I figure this out.
This is JsFiddle
Thank you.
Quite simple really, here is a quick demo i made, i will explain everything in a second.
Demo
HTML:
<div class="left"></div>
<div class="head"></div>
<div class="center"></div>
<div class="right"></div>
CSS:
body, html{
height:100%;
}
.left, .right, .head, .center{
float:left; // Float all the containers to the left so have a `inline` effect
}
.left{
height:100%;
width:25%; // Full width minus right and center width
background:orange;
}
.head{
background:red;
height:10%; // Height of header
width:75%; // Full width minus left sidebar
}
.center{
width:50%; // Full width minus both sidebar's width
background:skyblue;
height: 90%; // Full height minus header height
}
.right{
width:25%; // Full width minus center and left width
background:green;
height:90%; // Full height minus header height
}
also note, you may need to have a Clearfix handy seeing as a lot of elements are floating in thin air.
Happy coding :)
Clearfix...
Well take a look at this fiddle, everything is working fine
http://jsfiddle.net/mqzJN/
Now if we add a float to the link like this
http://jsfiddle.net/mqzJN/1
Then you can see the background is gone, because the <div> doesn't have any height any more because the link is floating in thin air.
So you use a clearfix to fix this, like in this fiddle
http://jsfiddle.net/mqzJN/2/
So any element that has a float you might wan't to add the clearfix class to the container of that element like in the last fiddle example.
There you go! (http://jsfiddle.net/aV2Dn/)
<div id="wrapper">
<div id="left_column"></div>
<div id="top_bar"></div>
<div id="middle"></div>
<div id="right_column"></div>
</div>
#wrapper{
width:500px
height:500px;
margin: auto;
}
#left_column{
width: 100px;
height:500px;
background: #34ab2b;
position:absolute;
left:0px;
top: 0px;
}
#top_bar{
position: absolute;
left: 100px;
top: 0px;
width: 400px;
height:100px;
background-color: #ffe400;
}
#middle{
position: absolute;
left: 100px;
top: 100px;
width: 300px;
height:400px;
background: #2b73ab;
}
#right_column{
position: absolute;
left: 400px;
top: 100px;
width: 100px;
height:400px;
background: #b2540f;
}
here
The HTML:
<body>
<div class="left">
</div>
<div class="right">
<div class="upper"></div>
<div class="lower">
<div class="innerLeft"></div>
<div class="innerRight"></div>
</div>
</div>
</body>
The CSS:
body {
width: 100%;
}
.left {
width: 25%;
height: 450px;
float: left;
background-color: #f00;
}
.right {
width: 75%;
height: 450px;
float: right;
background-color: #4cff00;
}
.upper {
width: 100%;
float: left;
height: 100px;
background-color: blue;
}
.lower {
width: 100%;
height: 100px;
background-color: grey;
}
.innerLeft {
width: 65%;
float: left;
height: 350px;
background-color: fff;
}
.innerRight {
width: 35%;
float: right;
height: 350px;
background-color: #000;
}
I have this annoying little bit of spacing I can't remove.
Here's a fiddle.
It's the white padding(?) between the dog and grey box.
I should probably mention I'm in the process of learning about the box model (relative/absolute) etc.
use display: block; on your img http://jsfiddle.net/QzYcf/1/
#header img { width: 100%; display: block; border: none;}
Move the wrapper div to encase all the divs. Like this: fiddle
You what the header like this fiddle right
HTML:
<div id="wrapper">
<div id="outer">
<div id="inner"></div>
</div></div>
<div id="header">
<img src="http://davesizer.com/blogs/wp-content/uploads/2010/03/eva_jump.jpg" alt="Dog">
</div>
Change this #wrapper and #header to this:
#wrapper{
position: relative; /*or position: absolute; top: 250px;*/
top: 240px;
width:100%;
background-color: lightgrey;
}
#header{
position: fixed;
top: 0;
width: 100%;
height:auto;
background-size: 100%;
}