Not very good at this just starting but I just can't center these divs can someone HELP :/ I have looked online but have not found anything that will work with it... i'm only 12 and it's all quite new to me.
*{
margin: 0px;
padding: 0px;
}
#Title{
height:75px;
width:60%;
margin-top:5%;
background-color:black;
display: table;
margin-left: auto ;
margin-right: auto ;
}
#Wallpaper{
width:15%;
height:250px;
background-color:black;
display: inline-block;
margin-top:5%;
margin-left: auto ;
margin-right: auto ;
float:center;
}
#Logo{
width:15%;
height:250px;
background-color:black;
display: inline-block;
margin-top:5%;
margin-left: auto ;
margin-right: auto ;
float:center;
}
#YoutubeBanner{
width:15%;
height:250px;
background-color:black;
display: inline-block;
margin-top:5%;
margin-left: auto ;
margin-right: auto ;
float:center;
}
Here is one way of doing this, it's responsive and fluid.
DEMO: https://jsbin.com/puhixo/1/
CSS
body,
html {
margin: 0;
padding: 0;
background: #fff;
font: 1em/1.5 sans-serif;
}
.row,
.column {
box-sizing: border-box /*so padding and borders are included in width */
}
.row {
word-spacing: -1em; /* fix the inline block extra space issue */
letter-spacing: -1em; /* fix the inline block extra space issue */
overflow: hidden;
text-align: center;
padding: 0 20px;
width: 100%;
max-width: 1200px;
margin:0 auto;
}
.column {
vertical-align: top;
word-spacing: normal; /* reset child */
letter-spacing: normal; /* reset child */
display: inline-block;
border: 1px solid red;
width: 100%; /* the size UNDER the min-width in the media query*/
padding: 10px;
text-align: left; /* reset child */
}
#media (min-width:500px) {
.column {
width: 33.333%;
max-width: 250px; /* the max-width */
}
}
HTML:
<div class="row">
<div class="column">
Column 1 text goes here. Text goes here for column 1.
</div>
<!--/.column -->
<div class="column">
Column 2 text goes here. Text goes here for column 1.
</div>
<!--/.column -->
<div class="column">
Column 3 text goes here. Text goes here for column 1.
</div>
<!--/.column -->
</div>
<!--/.row -->
You can also write code like this.
html
<center>
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
</center>
css
div
{
display: inline-block;
border: 1px solid red;
}
div.wrapper {
-webkit-column-count: 3;
/* Chrome, Safari, Opera */
-moz-column-count: 3;
/* Firefox */
column-count: 3;
width: 80%;
border: 1px solid black;
text-align: center;
margin: 0 auto;
}
<div class="wrapper">
<div>Hi you</div>
<div>Yes you</div>
<div>Yup</div>
</div>
Would something like this work for you?
Related
I'm trying to get the right column of a 3 column layout to move below the left column on smaller screens. Right now the right column moves in the correct direction except that it hangs below the middle column.
I created this basic simulation of my issue. Note the middle column will always be longer than the left and right columns as shown here.
<style>
.container {
max-width:1280px;
width:100%;
height:200px;
margin-left:auto;
margin-right:auto;
display:flex;
flex-wrap: wrap;
}
.leftsidebar {
width:20%;
height:200px;
background-color:gray;
margin-top:15px;
}
.middle {
width:57%;
background-color:blue;
margin-left:15px;
margin-right:15px;
height:800px;
margin-top:15px;
}
.rightsidebar {
width:20%;
background-color:orange;
height:200px;
margin-top:15px;
}
</style>
<div class="container">
<div class="leftsidebar">left</div>
<div class="middle">middle</div>
<div class="rightsidebar">right</div>
</div>
You can't accomplish that with Flexbox, unless setting fixed height's all over.
Here is a solution that combine Flexbox with float, and use a media query to swap between the two, when on narrower screens.
Note, when using percent based width combined with fixed margins, it can at some point cause the item to wrap. Use CSS Calc to avoid that, as showed in the answer.
Stack snippet
.container {
max-width: 1280px;
height: 200px;
margin: 0 auto;
display: flex;
}
.leftsidebar, .rightsidebar {
width: 20%;
background-color: gray;
margin-top: 15px;
}
.rightsidebar {
background-color: orange;
clear: left;
}
.middle {
width: calc(60% - 30px); /* calc for margin */
background-color: blue;
margin: 15px 15px 0 15px;
height: 800px;
}
#media (max-width: 600px) {
.container {
display: block;
}
.leftsidebar, .rightsidebar {
height: 200px;
float: left;
}
.middle {
width: calc(80% - 30px); /* calc for margin */
float: right;
}
}
<div class="container">
<div class="leftsidebar">left </div>
<div class="middle">middle </div>
<div class="rightsidebar">right </div>
</div>
I could come up only with old good floats, no flexboxes at all. If you don't have to use flexboxes and you are interested, with pretty light hustle it might look like this (snap point is 700px):
* {
box-sizing: border-box;
}
.container {
width:90%;
height:200px;
margin:0px auto;
}
div > div {
background-color: orange;
float: left;
color: white;
text-align: center;
padding: 1em;
}
.leftsidebar {
width: 20%;
height: 200px;
margin-top: 15px;
}
.middle{
width:56%;
margin: 15px 2% 0%;
height:415px;
}
.rightsidebar {
width: 20%;
height: 200px;
margin-top: 15px;
}
#media (max-width: 700px) {
div > div:nth-of-type(2n + 1) {
width: 33%;
}
div > div:nth-of-type(2n) {
float: right;
width: 65%;
margin-right: 0%;
}
}
<div class="container">
<div class="leftsidebar">left </div>
<div class="middle">middle </div>
<div class="rightsidebar">right </div>
</div>
I'm making a Christmas calendar for my girlfriend. I have some issues with centering the boxes and header. Header its not centered and the boxes starts more to the left than right. I have set the wrapper to margin auto 0. Didnt solve my problem. Any suggestions?
body {
background: url("http://hamawandi.com/images/bg4.png") no-repeat center center fixed;
background-size: cover;
font-size:30;
margin: 0;
color: #666;
}
.wrapper {
width:70%;
margin:0 auto;
margin-bottom:10px;
margin-top:50px;
}
.calender-box {
width:130px;
height:130px;
background-image: url('/images/background-xmas3.png');
float:left;
border: 5px dotted red;
margin-left:10px;
margin-bottom:10px;
text-align:center;
font-size:45px;
color:white;
line-height:140px;
text-decoration: none;
}
.header{
font-size:40px;
color:white;
margin:0 auto;
margin-top:-10px;
}
<div class="wrapper">
<div class="header">
❄ Julekalender 2016 ❄
</div>
1
2
3
4
5
6
7
8
</div>
My approach would be using flexbox:
body {
background: url("http://hamawandi.com/images/bg4.png") no-repeat center center fixed;
background-size: cover;
font-size:30;
margin: 0;
color: #666;
}
.wrapper {
width: 70%;
margin: 0 auto;
margin-bottom: 10px;
margin-top: 50px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
/* you must add vendor prefixes to flexbox properties for cross-browser compatibility */
}
.header {
font-size: 40px;
color: white;
margin: 0 auto;
margin-top: -10px;
text-align: center;
width: 100%;
}
.calender-box {
width: 130px;
height: 130px;
background-image: url(/images/background-xmas3.png);
float: none;
border: 5px dotted red;
margin-left: 0;
margin-bottom: 10px;
text-align: center;
font-size: 45px;
color: white;
line-height: 140px;
text-decoration: none;
}
a {
width: 130px;
height: auto;
display: inline-block;
border: 5px solid transparent;
}
<div class="wrapper">
<div class="header">❄ Julekalender 2016 ❄</div>
1
2
3
4
5
6
7
8
<a></a>
<a></a>
<a></a>
<a></a>
</div>
The wrapper is actually perfectly centered in your example. It's just that the 70% area could only fit so many boxes and those boxes float left.
Any extra room is to the right of the last box which fits.
Notice the blue lines on both sides of the boxes which show where your wrapper div starts and ends.
You could make those boxes centered instead of float left or make the wrapper bigger like I do below.
At the top level of my website layout are 4 div tags.
The first one is a full width header section, with css:
#header {
margin-top: 0px;
height: 70px;
border: 4px double rgb(255,255,255);
border-radius: 20px;
background: rgb(88,150,183) no-repeat fixed left top;
padding: 0px;
}
At the bottom is a full width footer:
#footer {
clear: both;
margin: 0px;
color:#cdcdcd;
padding: 10px;
text-align: center;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
On the left is my main menu section:
#categories {
float:left;
width:150px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
All of those 3 elements work fine. They're in the right place and that doesn't change whatever screen resolution the user has on their monitor, or whether they view it on not maximum screen size.
My problem is with the main element of the page - where all the interesting stuff is. It's directly to the right of the menu div - or rather, it should be. My css is:
#main {
float:right;
min-height: 440px;
width: 80%;
margin-bottom: 20px;
padding:20px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
width 80% works OK for most of my users, but for those with less resolution, the main element shifts below the menu, which is ghastly.
What I would ideally like is for the width set in the css #main to be something like (100% - 170px), thus leaving a nice margin between the menu and the main bit at all times and never pushing it below the menu. However, css standards don't fulfil that desire yet!
Could someone suggest how I amend my css to give me a nice clean page that's clean for all my users? Or do I need to go back to setting out my page using tables?
Using CSS3 flex
* { box-sizing: border-box; margin: 0; }
#parent{
display: flex;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
flex: 1; /* You... fill the remaining space */
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Using CSS3 calc
width: calc(100% - 170px);
Example:
* { box-sizing: border-box; margin: 0; }
#aside {
background: #1CEA6E;
width: 170px;
float: left;
padding: 24px;
}
#main {
background: #C0FFEE;
width: calc(100% - 170px);
float: left;
padding: 24px;
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using float: left; and overflow
* { box-sizing: border-box; margin: 0; }
#aside{
width: 170px; /* You, be fixed to 170 */
float: left; /* and floated to the left */
padding: 24px;
background: #1CEA6E;
}
#main {
background: #C0FFEE;
padding: 24px;
overflow: auto; /* don't collapse spaces */
/* or you could use a .clearfix class (Google for it) */
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using style display: table;
* { box-sizing: border-box; margin: 0; }
#parent{
display: table;
border-collapse: collapse;
width: 100%;
}
#parent > div {
display: table-cell;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Is this what you are looking for? You don't need any css3
Dont need any css3
.wrapper {
width: 800px;
height: 800px;
background-color: blue;
}
.content {
width: auto;
height: 100%;
background-color: yellow;
}
.menu {
width: 170px;
height: 100%;
float: left;
background-color: red;
}
<div class="wrapper">
<div class="menu">Menu</div>
<div class="content">
Aside
</div>
</div>
You can use 'calc' function supported by all modern browsers and IE9+, or switch to flexbox (supported by IE11+)
See this pen: https://codepen.io/neutrico/pen/MyXmxa
width: calc(100% - 170px);
Keep in mind that all borders matter unless you set 'box-sizing' to 'border-box' (or just remove these borders and apply them on child elements).
Well, as it is shown on the screenshot I've linked below, there's a problem with centering this div containing two Tumblr posts columns. I want to have it centered in the part of the page, where no sidebar is given. Moreover, I would like to make posts in two columns following each other without any space. IMG: http://i.stack.imgur.com/VLkkr.jpg
CSS:
body {
margin: 0px;
background-color: antiquewhite;
text-align: center;
word-wrap: break-word;
}
body #content {
width: 900px;
display: inline-block;
margin: 15px 15px 15px 15px;
}
body #content #wrapper {
display: inline-block;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
body #content #wrapper #posts {
display: inline-block;
background-color: white;
width: 400px;
margin: 0 15px 15px 0px;
padding: 10px;
float: left;
text-align: left;
}
body .sidebar {
display: table;
width: 250px;
height: 100%;
position: fixed;
top: 0px;
right: 0px;
}
body .sidebar .sidebar-inside {
display: table-cell;
max-width: 250px;
margin: 0 auto;
vertical-align: middle;
}
/* etc */
HTML:
<!-- These two columns -->
<div id='content'>
<div id='wrapper'>
{block:Posts}
<div id='posts'>
{block:Photo}
<!-- Here are posts. -->
</div>
{/block:Posts}
</div>
</div>
<!-- Sidebar -->
<div class='sidebar'>
<div class='sidebar-inside'>
</div>
</div>
Help me out, guys! Please!
Maybe a solution (for one thing) with CSS3 Column: (and do not use mulitple times the id atrribute.. use classes.. )
body #content #wrapper {
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
-moz-column-gap:405px;
-webkit-column-gap:405px;
column-gap:405px;
}
body #content #wrapper #posts {
<strike>float: left;</strike> /*delete this one..*/
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}
Edit: user ask for more..
the reason is that the sidebar is position:absolute; so it does not count in space available for centering..
place this just behind </div> from wrapper
<div class="Gh2"></div>
.Gh2 {
width: 250px; /*sidebar width*/
float: right; /*place it to the right where sidebar is*/
height: 1px; /*need some height..*/
}
than:
body #content {
/* width: 900px; deleted those unwanted settings*/
/* display: inline-block; deleted those unwanted settings*/
margin: 15px 15px 15px 15px;
}
I have the following HTML:
<div class="col span_1_of_3 setCenter">
<div id="divEachImageExt">
<div id="divEachImage">
<div id="slides">
<div class="inta"><img src="theImages/imcpsite.png" width="140" height="140" alt="side" /></div>
</div>
<div id="menu">
<ul class="ulText">
<li class="menuItem act">PS: BASICS</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
.col {
/*display: block;*/
/*float:left;*/
display: inline-block;
margin: 1% 0 1% 0;
}
.col:first-child {
margin-left: 0;
}
.span_1_of_3 {
width: 32.2%;
}
.setCenter {
text-align: center;
}
#divEachImageExt {
float: left;
width: 30%;
margin: 0 auto;
}
#divEachImage {
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
/* CSS3 Rounded Corners */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:url('../theImages/panel.jpg') repeat-x bottom center #FFFFFF;
/* The width of the divEachImage */
width:175px;
overflow:hidden;
margin: 0 auto;
}
#slides {
/* This is the slide area */
height:155px;
/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:175px;
overflow:hidden;
margin: 0 auto;
}
.inta {
float:left;
width: 175px;
margin: 0 auto;
height: 140px;
padding-top: 8px;
}
#menu {
/* This is the container for the thumbnails */
height:45px;
}
ul.ulText {
margin:0px;
padding:0px;
}
ul.ulText li {
/* Every thumbnail is a li element */
width:125px;
display:inline-block;
list-style:none;
height:45px;
overflow:hidden;
line-height: 45px;
vertical-align: middle;
}
li.inact:hover {
/* The inactive state, highlighted on mouse over */
background:url('../theImages/pic_bg.png') repeat;
}
li.act a {
cursor:default;
}
ul.ulText li a {
display:block;
background:url('../theImages/divider.png') no-repeat right;
height:35px;
padding-top:10px;
}
What happens is, the inner DIV is left aligned instead of being centered.
Here is a F12 Dev Tool screenshot:
Add display: inline-block to an element you want to be centered.
Heres the fiddle for you: http://jsfiddle.net/u26wqssb/
And heres the code:
Sample HTML:
<div class="setCenter">
<div class="centerMe"></div>
</div>
and CSS:
.setCenter {
width:100%;
text-align:center;
background: #eee;
}
.centerMe {
width:100px;
height:100px;
background:red;
display:inline-block;
}
If you add a fiddle for your case we can fix it there.
Hey You can Try using the margin to center it like so
.yourstyle {
margin:0 auto; /* shorthand or margin-left:auto; margin-right:auto; for long way */
}
or you could attempt to use CSS3 2D transforms to center it or just Flex box good luck
Is there any reason for the float in #divEachImageExt? If no the either
/* .setCenter part not needed */
#divEachImageExt {
width: 30%;
margin: 0 auto;
}
or
.setCenter {
text-align: center;
}
#divEachImageExt {
display: inline-block;
width: 30%;
}
will do.
change #divEachImageExt to below code
#divEachImageExt {
width: 30%;
margin: 0 auto;
}
remove float:left
It will solve your problem.