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.
Related
HTML CODE
CSS CODE
I want the 2 "product" div's to be next to eachother.but them both in the middle
i tired float left, and text align center (in all kinds of combinations and under every .class related but noting worked
text align center puts them both in the center but underneath eachother
text align center, followed by float left, does the same, or puts them both left.
.articles{
font-family: Arial, Helvetica, sans-serif;
}
.buy{
padding: 5px 5px 5px 5px;
font-size: 25px;
font-weight: bold;
text-decoration: none;
}
.product{
margin: 60px 0 60px 60px;
float: left;
}
.product img{
width: 200px;
height: 400px;
border: 10px solid tan;
}
I tied the combo:
" text-align: center;
float: left; "
both under .articles and under .product
also tried splitting them
(e.g. text-align under articles, and float under product. and other ways around)
Ok, you can do this with flexbox. Try this code right here:
<style>
.leftside {
background: #000599;
}
.rightside {
background: #006999;
}
.leftside, .rightside {
color: rgba(255,255,255,.4);
padding: 2%;
text-align: left;
}
#media ( min-width : 600px ){
body {
background: linear-gradient(90deg, #000599 50%, #006999 50%);
}
.flexbox {
width: 100%;
margin: 0 auto;
display: -webkit-flex;
display: flex;
}
.leftside,
.rightside {
-webkit-flex: 1;
flex: 1;
background: none;
}
}
</style>
<div class="flexbox">
<div class="leftside">
<p>
left
</p>
</div>
<div class="rightside">
<p>
right
</p>
</div>
</div>
I have a wrapper div, a navigation menu bar (floated to the left) and a button (floated to the right). How do I center the navigation bar (floated to the left) within the wrapper minus the area the button (floated to the right) takes up?
So instead of it being centered directly in the middle of the wrapper, it will be centered to the the left a bit more because the area the button takes up is not within the (center) calculation; if you will. Here's a quick graphic:
<div class="wrapper">
<div class="nav">
Center Me
</div>
<div class="cta">
Book Now
</div>
</div>
.wrapper {
max-width: 1200px;
margin: 0 auto;
background: #000;
color: #fff;
overflow: hidden;
}
div:not(.wrapper) {
display: inline-block;
}
div.cta {
float: right;
width: 100px;
background: #444;
padding: 20px 0;
text-align: center;
}
div.nav {
float: left;
background: #777;
text-align: center;
padding: 20px 0;
margin: 0 auto;
}
Use flexbox. Floats can be difficult and behave inconsistently. Flexbox is a great utility.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
.wrapper {
max-width: 1200px;
margin: 0 auto;
background: #000;
color: #fff;
overflow: hidden;
display:flex;
flex-wrap: nowrap;
}
div:not(.wrapper) {
/* display: inline-block; */
}
div.cta {
/* float: right; */
/* width: 100px; */
background: #444;
padding: 20px 0;
text-align: center;
flex: 0 0 100px;
}
div.nav {
/* float: left; */
background: #777;
text-align: center;
padding: 20px 0;
margin: 0 auto;
flex: 1 0 auto;
}
I removed float from your .nav and added width (totalling 100%) to each container to get this result.
.wrapper {
max-width: 1200px;
margin: 0 auto;
background: #000;
color: #fff;
overflow: hidden;
}
div:not(.wrapper) {
display: inline-block;
}
div.cta {
float: right;
width: 20%;
background: #444;
padding: 20px 0;
text-align: center;
}
div.nav {
width: 80%;
text-align: center;
padding: 20px 0;
margin: 0 auto;
}
<div class="wrapper">
<div class="nav">
Center Me
</div>
<div class="cta">
Book Now
</div>
</div>
I'm trying to center a text inside a div, this div contains an image + another div which contains the text that needs to be centered.
See image the following image:
The problem I'm facing is that the image which is also in the div doesn't allow me to outline the text in the center.
I tried to apply padding and margins(even negatives ones) however with no results
So right now this is the code I have in my HTML & CSS files:
.destinations {
padding: 5px 15px;
}
.destinations img {
max-width: 100%;
max-height: 100%;
border-radius: 10px;
}
.flex-item {
width: 290px;
height: auto;
border-radius: 10px;
margin: auto;
}
.flex-item-title {
text-align: center;
color: white;
background-color: black;
opacity: 0.8;
}
<div class="destinations">
<div class="flex-item">
<img src="assets/img/wassenaar.jpg">
<div class="flex-item-title">Wassenaar</div>
</div>
</div>
I hope you can help me out
Here is one approach to vertically and horizontally center the text over the image:
.destinations {
padding: 5px 15px;
}
.destination {
width: 290px;
height: 290px;
display: flex;
border-radius: 10px;
margin: auto;
background-image: url("https://placekitten.com/500/500");
justify-content: center;
align-items: center;
}
.title {
text-align: center;
color: white;
background-color: black;
opacity: 0.8;
}
<div class="destinations">
<div class="destination">
<div class="title">Wassenaar</div>
</div>
</div>
You can get your porblem solve using following css .
.flex-item{
width:300px;
height:200px;
position: relative;
padding: 0;
margin: 0;
text-align: center;
}
.flex-item-title{
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 300px;
height: 200px;
text-align: center;
color: white;
display: inline-table;
vertical-align:middle;
line-height:100%;
}
Try changing your css to this css , it will work .
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 5 years ago.
Hi I have the below HTML, Inside the Container I have Header, section and div.
With my current CSS below the div with class rightSideDiv does not show to right to the section element.
.container {
height: 500px;
widht: 500px;
background-color: red;
}
.headerTitle {
display: inline-block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
The section and div should be shown side by side. I dont want to modify the current HTML structure. I have tried specifying float:left or right but both doesn't seem to work.
Apply float: left; to both containers, use width: 50%; instead of px and display: block; header
.container {
height: 500px;
width: 500px;
background-color: red;
}
.headerTitle {
display: block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:50%;
height:200px;
background-color: yellow;
float: left;
}
.rightSideDiv {
width:50%;
height:200px;
background-color: pink;
float: left;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
Change the H2 to display: block;, and then add float:left; to both boxes.
When you want divs side-by-side through floating, float them the same direction.
rightSideDiv is 8 pixels taller than the other. That is because the 4px border is added on top of the height. Consider using box-sizing: border-box;, which makes the border get absorbed into the set height, instead of being added on top of it.
.container {
height: 500px;
width: 600px;
background-color: red;
}
.headerTitle {
display: block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
display: inline-block;
float: left;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
display: inline-block;
float: left;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
Try using flexbox and display:flex instead. With very few changes to css you can get something like this: https://jsfiddle.net/vnuz47va/2/
.container {
height: 500px;
width: 520px;
background-color: red;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.headerTitle {
display: inline-block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
width:100%;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
change your css with this :
.container {
height: 500px;
width: 500px;
background-color: red;
}
.headerTitle {
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
float : left;
width: 50%;
height:200px;
background-color: yellow;
}
.rightSideDiv {
float : right;
width:50%;
height:200px;
border: 4px solid green;
}
you can use float right and left to align your div, however your container has a width to 400 and your 2 div are 249+249 = 498 so there is a problem here..
I'm trying to get 3 divs to all be side by side below another div (that contains a h1 and a piece of small text below it). I'm having some trouble doing it.
What I am aiming for is something like this:
I've tried to put a div (that encompasses the 3 other divs) below the main title div.
I've tried this CSS:
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
top: 80%;
left: 50%;
text-align:center;
}
/* this is for the 3 divs to set width, etc*/
.content-info div {
width:300px;
padding:25px;
margin: 25px;
}
Here is a JSFiddle of what I've got so far: http://jsfiddle.net/4zx9gxgL/
Any suggestions/ideas?
You can use display:table-row and display:table-cell to make it work similar to a table.
For example:
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
display: table-row;
}
.content-info div {
width:300px;
padding:25px;
margin: 25px;
display: table-cell;
}
And you can remove the .one{}, .two{}, .three{} in your css
There are several ways to go about this. CSS table, float and position offer three possible solutions. Depending on your overall objectives, here's a solution featuring inline-block (no table, no float, no position). This solution is very simple, stable, responsive, and easy-to-customize.
DEMO: http://jsfiddle.net/nayztL4y/2/
HTML
<div class="container">
<h1>H1 Header</h1>
</div>
<div class="container">
<div class="boxes"><h2>Box 1</h2></div>
<div class="boxes"><h2>Box 2</h2></div>
<div class="boxes"><h2>Box 3</h2></div>
</div>
CSS
.container {
width: 90%;
height: 200px;
border: 1px solid black;
margin-bottom: 10px;
text-align: center;
background-color: #ff0;
}
.boxes {
width: 25%;
height: 180px;
border: 2px dashed red;
margin: 8px 10px;
display: inline-block;
}
UPDATE
I've updated your fiddle demo, as well.
http://jsfiddle.net/4zx9gxgL/33/
so you want to put all thre divs side by side. i think it's that .
.main-content {
text-align: center;
font-family:'Montserrat', sans-serif;
position: relative;
}
.content-info {
position: relative;
width: 100%;
height: 110px;
top: 0px;
}
.yo{
display: inline-block;
width: 33%;
margin-right: -2px;
text-align:center;
}
https://jsfiddle.net/4zx9gxgL/30/
I had a go aswell ...
#import url(http://fonts.googleapis.com/css?family=Montserrat);
body {
background: url("http://pre15.deviantart.net/52ce/th/pre/i/2011/174/b/c/candy_blur_abstract_hd_by_ivereor-d3jsglw.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
}
.yx {
text-align: center;
}
.main-content {
text-align: center;
font-family: 'Montserrat', sans-serif;
display: block;
position: relative;
top: 20%;
left: 50%;
margin-top: 100px;
height: auto;
margin-bottom: -100px;
/* bring your own prefixes*/
transform: translate(-50%, -50%);
}
.main-content h1 {
font-size: 62px;
}
.main-content h2 {
font-size: 32px;
}
.content-info {
text-align: center;
font-family: 'Montserrat', sans-serif;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.content-info div {
width: 300px;
padding: 25px;
margin: 25px;
}
.one {
display: inline-block;
max-width: 33%;
}
.two {
display: inline-block;
max-width: 33%;
}
.three {
display: inline-block;
max-width: 33%;
}
<body>
<div class="main-content yx">
<h1>Name Here</h1>
<h2>Hi, I'm Name.</h2>
</div>
<div class="content-info">
<div class="one">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
<div class="two">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
<div class="three">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
</div>
<footer></footer>
</body>
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
top: 80%;
left: 50%;
float:left;
width:100%;
text-align:center;
}
/* this is for the 3 divs to set width, etc*/
.content-info div {
width:300px;
padding:25px;
margin: 25px;
float:left;
}
If the 3 bottom divs don't align correctly remove the margin settings, or adjust accordingly.