So essentially I am writing a game in javascript. I have a canvas on the left, a canvas in the middle, a textarea topright, and a canvas bottom right. But I can't seem to get the right CSS code to figure out this layout like the picture. I want the middle to take up about 50-60% of the middle of the page, and the left and right columns taking the rest of the space. Would be nice if it auto resized with browser window. Any help would be appreciated.
Set a container to hold all the elements and then make smaller containers inside. Target each with CSS and set its properties.
Here I set a general CSS class .generalStyles just to simplify the code.
You would use something like this: (run the snippet)
.generalStyles
{
position:relative;
float:left;
background-color:#000;
border-radius:4px;
box-sizing:border-box;
color:#f00;
height:100px;
padding:5px;
text-align:center;
}
.container
{
width:100%;
background-color:#FFF;
}
.leftPanel
{
width:24%;
margin:0 1% 0 0;
}
.rightPanel
{
width:24%;
margin:0 0 0 1%;
background-color:#FFF;
padding:0;
}
.middlePanel
{
width:50%;
margin:0;
}
.topPanel
{
width:100%;
margin:0;
height:49.5%;
}
.bottomPanel
{
width:100%;
margin:1% 0 0 0;
height:49.5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div class="container generalStyles">
<div class="leftPanel generalStyles">left stuff goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="middlePanel generalStyles">middle goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="rightPanel generalStyles">
<div class="topPanel generalStyles">top stuff<br/>and more here</div>
<div class="bottomPanel generalStyles">bottom stuff<br/>and more here</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
h2 {
text-align:center;
font-family:arial;
color:red;
font-weight:normal;
}
.left {
background-color: #000;
border-radius:10px;
float: left;
width: 20%;
padding: 10px;
margin:10px;
height: 300px;
}
.middle {
background-color: #000;
border-radius:10px;
float: left;
width: 60%;
padding: 10px;
margin:10px;
height: 300px;
}
.right {
float: left;
width: 20%;
margin: 10px;
height: 300px;
position: relative;
top: 0;
}
.top {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
}
.bottom {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.row {
box-sizing:border-box;
display: flex;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="left">
<h2>left</h2>
</div>
<div class="middle">
<h2>middle</h2>
</div>
<div class="right">
<div class="top">
<h2>top right</h2>
</div>
<div class="bottom">
<h2>bottom right</h2>
</div>
</div>
</div>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right">
<div class="rightDiv"></div>
<div class="rightDiv"></div>
</div>
</div
and css
.container{display:block;width:100%}.left,.middle,.right{width:100px;display:inline-block}.left{border:1px solid red;height:100px}.middle{border:1px solid green;height:100px}.rightDiv{border:1px solid #ff0;height:40px;margin:10px 0}
Fiddle
Related
I want the div which displays "D" to appear beneath that one which displays "A" so that divs with matching background colours appear stacked over one another. However, I am getting this:
Where exactly in my CSS code must I clear my float?
#container {
background-color: #333333;
width: 990px;
}
#left {
background-color: red;
width: 300px;
float: left;
}
#splitter {
background-color: green;
width: 90px;
float: left;
}
#right {
background-color: blue;
width: 200px;
float: left;
}
<div id="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div id="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
You have to deal with floats and for this you need to understand what floats and BFC are :
a few ways to do this, that you should understand once you been reading a bit about floats, clearing and Block formating context.
(last example in the snippet below, oldish, even avoids the floats but does the layout)
/* DEMO purpose : Show the id or class being used on that container*/
section:before {
content: attr(id)' 'attr(class);
display: table;
background: #177EE5;
padding: 5px;
margin: 5px;
color: #fff;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
letter-spacing: 1px;
font-variant: small-caps;
}
/* your css turned into class to be valid since used for many tags */
.container {
background-color: #333333;
width: 990px;
}
.left {
background-color: red;
width: 300px;
float: left;
}
.splitter {
background-color: green;
width: 90px;
float: left;
}
.right {
background-color: blue;
width: 200px;
float: left;
}
/* wrapper for each examples */
section {
clear: both;
overflow: hidden;
margin: 1em;
}
/* different ways shown, usefull for testing only if you read about floats and dig a bit */
/* table */
.table .container {
display: table;
}
/* overflow */
.overflow .container {
overflow: hidden;
}
/* float */
.float .container {
float: left;
}
/* flex */
.flex .container {
display: flex;
}
/* inline-block */
.inline-block .container {
display: inline-block;
vertical-align: top;
}
/* last examples without floats */
/*no float & ie8 */
#table div {
float: none
}
#table #first-row,
#table > div {
display: table-row;
}
#table > div > div {
display: table-cell;
}
#table {
background-color: #333333;
width: 990px;
table-layout: fixed;
}
#left {
width: 300px;
}
#splitter {
width: 90px;
}
#right {
width: 200px;
}
#table > div > div {
background-color: red;
}
#table > div > div + div {
background-color: green;
}
#table > div > div + div + div {
background-color: blue;
}
#table:before {
display: table-caption;
width: 100%;
margin: 0;
}
#table > div:after {
content: "Notice there's a gap to fill here since cols do not cover the 990px";
display: table-cell;
}
<section class="your CSS :-: no BFC involved">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="table">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="overflow">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="float">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="flex">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="inline-block">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<p>another way without float including IE8 ?</p>
<section id="table" class="table">
<div id="first-row">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</section>
There could be more examples from the same chunks of code and floatting children.
Clear the floats in the container.
You have 3 simple ways to do that:
1. Float
#container {
clear: both;
}
2. Overflow
#container {
overflow: hidden;
}
3. Micro clearfix hack
Link
Here is what you want done bro..
this one is by using display:inline-block https://jsfiddle.net/p4domjrb/
this one is by using float:left https://jsfiddle.net/p4domjrb/1/
.container {
background-color: #333333;
width: 990px;
display: block;
position: relative;
}
.left {
background-color: red;
width: 300px;
display: inline-block;
margin-left: -4px;
}
.splitter {
background-color: green;
width: 90px;
display: inline-block;
margin-left: -4px;
}
.right {
background-color: blue;
width: 200px;
display: inline-block;
margin-left: -4px;
}
don't use id I suggest use class isntead because idis called only once.
<style>
.container{
background-color: #333333;
width:990px;
display:block;
clear:both;
}
#left{
background-color: red;
width:300px;
float:left;
}
#splitter{
background-color: green;
width:90px;
float:left;
}
#right{
background-color: blue;
width: 200px;
float:left;
}
</style>
<body>
<div class="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div class="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
</body>
result is
Can somebody help me to understand how to make 6 elements look like on the picture (videos part)?
Here's what I have so far:
.videos {
width: 730px;
height: 400px;
float: left;
margin: 15px 5px 15px 0px;
}
.videos > div {
display: inline-block;
}
#big {
height: 200px;
width: 400px;
background-color: #fff0e0;
}
#small {
height: 90px;
width: 200px;
background-color: #fff0e0;
}
<div class="videos">
<header>
<h2>Videos</h2>
</header>
Browse all videos
<br>
<div id="big">Big video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
</div>
Part of your problem is that widths and heights do not include the sizes of the margins. So if you have, say, a 6 pixel margin between everything, and the bigger rectangle is 200px high, the smaller rectangles need to be 97px high to make everything line up.
Then there's the problem of spaces: with inline-blocks, newlines in the source take up a space horizontally, which throw things out of alignment. I changed the inline-blocks to floats.
And you can't have duplicate ids in a HTML document. I needed to change the ids to classes.
(This doesn't really matter for CSS, but it would be a big problem in other cases, so it's best to play it safe and not have errors.)
You also missed a / in the source; the second <h2> should have been </h2>.
That's about it.
.videos {
width: 630px;
height:400px;
margin: 15px 5px 15px 0px;
}
.videos > div {
float: left;
margin: 0 6px 6px 0;
background-color: #fff0e0;
}
.big {
height: 200px;
width: 400px;
}
.small {
height: 97px;
width: 197px;
}
<div class="videos">
<header>
<h2>Videos</h2>
</header>
Browse all videos
<br>
<div class="big">Big video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
</div>
Simple Example:
HTML
<div id="left-wrapper-lg">
<div class="big-col">
</div>
<div class="small-col">
</div>
<div class="small-col no-margin">
</div>
</div>
<div id="left-wrapper-sm">
<div class="full-col">
</div>
<div class="full-col">
</div>
<div class="full-col">
</div>
</div>
CSS
#left-wrapper-lg {
float:left;
width:64%;
margin-right:2%;
}
#left-wrapper-sm {
float:left;
width:34%;
margin-right:0;
}
.no-margin { margin:0 !important;}
.big-col {
float:left;
width:100%;
margin-right:0%;
}
.small-col {
float:left;
width:48%;
margin-right:2;
}
.full-col {
float:left;
width:100%;
margin:0;
}
Change your css , jsFiddle
.videos {
width: 730px;
height: 400px;
float: left;
margin: 15px 5px 15px 0px;
}
.videos > div {
display: inline-block;
}
#big {
height: 200px;
width: 400px;
background-color: #fff0e0;
float:left;
margin-right:10px;
margin-bottom:10px;
}
#small {
height: 90px;
width: 195px;
background-color: #fff0e0;
margin-bottom:15px;
margin-right:10px;
float:left;
}
I've been trying to figure out what my right div is floating out of position.
.header{
background:red;
height:100px;
width:100%;
}
.left{
background:white;
float:left;
height:800px;
width: 200px;
}
.main{
background:yellow;
height: 800px;
width: 600px;
overflow: hidden;
}
.right{
background:white;
float: right;
height:800px;
width: 200px;
overflow: hidden;
}
.footer{
background:red;
height: 100px;
width:100%;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<title>Layout</title>
<body>
<div class="header"></div>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
<div class="footer"></div>
</body>
</html>
Any pointers? I know this is going to be deceptively simple but I've drawn a blank
div{
border: 1px solid #000000;
margin:3px;
}
.header{
background:red;
height:100px;
width:100%;
}
.left{
background:white;
float:left;
height:800px;
width: 200px;
}
.main{
background:yellow;
height: 800px;
width: auto;
overflow: hidden;
}
.right{
background:white;
float: right;
height:800px;
width: 200px;
overflow: hidden;
}
.footer{
background:red;
height: 100px;
width:100%;
}
<div class="header">header</div>
<div style="clear:both;"></div>
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
<div style="clear:both;"></div>
<div class="footer">footer</div>
This is the correct way :
first put the floating elements (left - right) than the non floating one (main)
Also make shure you clear after float ("clear:both")
ps I give thhe main "with:auto" but is not necessary... only more compatible
<div class="header">header</div>
<div style="clear:both;"></div>
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
<div style="clear:both;"></div>
<div class="footer">footer</div>
Semantically, you probably should go with the main content of the page first, then the supporting content. This template also will shrink the content area based on the space available, although that can easily be adjusted with the CSS if you wanted a fixed layout by setting a specific width on the .content element.
<div class="header"></div>
<div class="content">
<div class="main">
<div class="main-inner"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
Then for the CSS, you use something like this:
.header, .footer, .content {
clear: both;
}
.header, .footer {
height: 100px;
}
.content {
width: 100%;
max-width: 1000px; /* Keeps the site from growing beyond 1000px */
margin: 0 auto; /* Centers the content area */
}
.main, .left, .right {
float: left;
}
.main {
width: 100%;
}
.main-inner {
margin: 0 200px;
}
.left, .right {
width: 200px;
}
.left {
margin-left: -100%; /* Puts the left sidebar to the top left of the .content element */
}
.right {
margin-left: -200px; /* Puts the right sidebar on the right edge of the .content element */
}
/* Colors and Heights so you can see things */
.main-inner, .left, .right { min-height:600px; }
.header, .footer { background-color: red; }
.main-inner { background-color: yellow; }
http://jsfiddle.net/j1rLfmky/
I have a site I'm currently working on which requires a sticky footer as some of the pages content is smaller then the rest.
My Website
I have tried many resources/tutorials trying to get a sticky footer working.
Tutorial Followed
I have attempted to implement this tutorial and below is my code which goes with it. I'm hoping someone
Could anybody possibly suggest CSS changes to my code to implement this feature.
<body>
<div id="wrapper">
<div id="header-wrap">
<div id="header"></div>
<div id="home-header"></div>
<div class="push"></div>
</div>
<div id="footer-wrap">
</div>
</div>
</body>
CSS
#footer-wrap
{
background: url("images/footer.jpg") repeat-x scroll center bottom transparent;
color: rgb(117, 139, 141);
height: 462px;
position: relative;
width: 100%;
}
#header-wrap
{
clear: both;
min-height: 100%;
margin-bottom: -462px;
}
#header-wrap:after
{
content:"";
display:block;
height:462px;
}
Not working for me. Need Help!
Also 'push' is not in use. Use it maybe?
EDIT
body {
height: 100%;
margin:0px
}
html
{
height: 100%;
margin: 0px;
}
#wrapper
{
min-height: auto !important;
min-height: 100%;
}
UPD
<style type="text/css">
#footer-wrap
{
height: 462px;
position: relative;
width: 100%;
}
html, body {
height: 100%;
margin:0px;
background: #eee;
margin-bottom: -462px;
}
#wrapper
{
min-height: auto !important;
min-height: 100%;
border: 1px solid red;
margin-bottom: -462px;
}
#wrapper:after
{
content:"";
display:block;
height:462px;
}
</style>
HTML
<div id="wrapper">
<div id="header-wrap">
<div id="header"></div>
<div id="home-header"></div>
<div id="page-wrap"></div>
</div>
</div>
<div id="footer-wrap">
</div>
You can do this by css trick
css
body, html{
padding:0;
margin:0;
height:100%;
}
.wrapper{
min-height:100%;
position:relative;
}
.container{
width:960px;
margin:0 auto;
padding-bottom:100px;
}
.header{
height:100px;
background-color:#066;
}
.footer{
position:absolute;
bottom:0;
height:100px;
background-color:#006;
width:100%;
}
html
<div class="wrapper">
<div class="container">
<div class="header">
Header
</div>
<div style=" text-align:center; padding-top:25px;">
Place you content here as much as you like
</div>
</div>
<div class="footer">
Footer
</div>
</div>
working js Fiddle File
This works.
CSS
* {
margin: 0;
}
html, body, #wrapper {
height: 100%;
}
.header-wrap {
min-height: 100%;
margin-bottom: -462px;
}
.header-wrap:after {
content: "";
display: block;
}
#footer-wrap, .header-wrap:after {
height: 462px;
}
#footer-wrap {
background: orange;
}
HTML
<div id="wrapper">
<div class="header-wrap">
<div id="header">#header</div>
<div id="home-header">#home-header</div>
</div>
<footer id="footer-wrap">
#footer-wrap
</footer>
</div>
I would put the site name in the middle of this header but unfortunately I can not do it, I've tried many combinations but I just can not. I'll post the source
CSS
.header {
background-color:#00B9ED;
height:50px;
border-bottom:0px;
padding-left:auto;
padding-right:auto;
width:100%;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:1000px;
padding-top:0px;
padding-bottom:0px;
}
.logo {
width:150px;
margin: 0 auto;
}
.logo img {
width:150px;
height:50px;
}
.logo:hover {
height:50px;
background-color:#A9E2F3;
cursor:pointer;
}
HTML
<div class="header">
<div id="wrapper">
<div class="logo">
<img src="image.png" />
</div>
</div>
</div>
have no idea how can I do? Thanks
Use Below Code
<style>
.header {
background-color:#00B9ED;
height:50px;
border-bottom:0px;
padding-left:auto;
padding-right:auto;
width:100%;
}
#wrapper {
margin-left:auto;
margim-right:auto;
padding-top:0px;
padding-bottom:0px;
}
.logo {
text-align: center;
}
.logo img {
width:150px;
height:50px;
}
.logo:hover {
height:50px;
background-color:#A9E2F3;
cursor:pointer;
}
</style>
<div class="header">
<div id="wrapper">
<div class="logo">
<a>Bhavin<img src="image.png"></a>
</div>
</div>
</div>
Always try to code with standards. You can use text-align but it is for align paragraph or other elements with text. Insted align I would recommend to use margin:0 auto;width:150px;.
Here you got jsFiddle
try this
CSS
#wrapper {
margin: 0 auto;
padding-bottom: 0;
padding-top: 0;
width: 1000px;
}
.logo {
margin: 0 auto;
width: 150px;
}
HTML
<div class="header">
<div id="wrapper">
<div class="logo">
logo<img src="image.png" alt="LOGO"/>
</div>
</div>
</div>