I have a set of 3 promo-boxes
.promo-boxes .promo-box {
width: 49.5% !important;
margin-right: 0.3% !important;
margin-top: 1% !important;
position: relative !important;
float: none !important;
}
.promo-boxes .promo-box.second,
.promo-boxes .promo-box.last {
margin-right: 0 !important;
}
So as you can see I've tried using position and float as well as other text-left etc to no success.
I want these to be centered anything i'm missing?
you can solve this using flexbox.
.promo-boxes {
width: 100%;
display: flex;
justify-content: space-around;
background-color:white;
margin-top: 20px;
border: solid 1px #ccc;
}
.spacebetween {
justify-content: space-between;
}
.promo-box {
width: 100px;
height: 50px;
border: solid 1px #ccc;
background-color:red;
}
<div class="promo-boxes">
<div class="promo-box">
promo box
</div>
<div class="promo-box">
promo box
</div>
<div class="promo-box">
promo box
</div>
</div>
<div class="promo-boxes spacebetween">
<div class="promo-box">
promo box
</div>
<div class="promo-box">
promo box
</div>
<div class="promo-box">
promo box
</div>
</div>
Try something like this:
div {
width: 100px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
try:
.promo-boxes .promo-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
You may need to define a width, unless you want it to be as big as its content. Also, don't use !important unless you have no other choice, whatsoever!
Related
I've having a hard time aligning titles of each image at the bottom of the box. Please see the attached image. Here's my code:
Btw, I'm using Joomla.
Box code:
margin: auto;
align-self: center;
height:100px;
width:50%;
margin-top:0.5%;
margin-bottom:0.5%;
border: solid;
Image code:
margin-right:45%;
margin-left:45%;
margin-top:1%;
and title code:
display: block;
text-align: center;
position: absolute;
width: 50%;
This is my HTML code:
<ul class="nav menu navVerticalView nav-pills">
<li class="item-146">1</span></li><li class="item-147">2sdfgfsdgesdfg</span></li><li class="item-148">3cvbgfbnfghnf</span></li><li class="item-149">4</span></li><li class="item-150">5fghfghfg hfghrfghfgh </span></li><li class="item-151">6</span></li><li class="item-152">7bhjm hjmk,hj, hj, hj mjmgjjghjfh jfh hf hdgfhhdfghgfh fg hfgh fh</span></li><li class="item-153">8ghujghjtghj tgjtghjtyg tyjtyjtyj</span></li></ul> </div>
I tried to use bottom: 0px; for the title but all titles would gather above each other. I also tried vertical-align:bottom; but it doesn't work. I tried so many different ways but no luck. If someone can give heads up so I can move on towards, I'll be appreciative.
Thank you,
Image titles are not aligned with the bottom of the box
Set the box to position relative, and the text on absolute. After that set the text to bottom 0.
.box {
margin: auto;
align-self: center;
height:100px;
width:50%;
margin-top:0.5%;
margin-bottom:0.5%;
border: solid;
position: relative;
}
.image {
margin-right:45%;
margin-left:45%;
margin-top:1%;
background: red;
width: 30px;
height: 30px;
}
.box p {
display: block;
text-align: center;
position: absolute;
bottom: 0;
margin: 0;
}
<div class="box"><img class="image"><p>This is not how I would do it but okay 🤷🏼♀️</p></div>
You could use display: flex for this:
.example{
display: flex;
background-color: #808080;
flex-flow: column;
justify-content: space-between;
height: 200px; /* for example purpose */
}
.top {
background-color: #cecece;
}
.bottom {
background-color: #cecece;
}
<div class="example">
<div class="top">
<span>This is the title</span>
</div>
<div class="bottom">
<span>This is the title</span>
</div>
</div>
I have a wrapper, and in the wrapper there is the header and the body, which are center horizontal.
To the right I have wrapper-right which is fixed to the browser right.
When the browser window becomes smaller(lower resolution), I want the wrapper-right to get closer to the header until a minimal distance between them.
When the minimal distance is met, I want the header to change size(become smaller), but keep the minimal distance. also I want the header to remain align left to 'body' (being smaller than body now, center is not ok)
At this moment my implementation is using media queries (3-4, just 1 in example), but it is not smooth, so I'm searching for something better.
.wrapper{
background-color:green;
display: inline-block;
height: 4rem;
position: relative;
width: 100%;
}
.header, body{
max-width: 30rem;
margin: 0 auto;
}
.header {
border:3px solid yellow;
max-width: 30rem;
height: 4rem;
border-left: 5px solid purple;
}
#media (max-width: 40rem){
.header{
max-width: 25rem;
}
}
.body{
background-color:red;
height: 500px;
border-left: 5px solid purple;
}
.wrapper-right{
background: #0069aa;
height: 4rem;
width: 5rem;
position: absolute;
right: 0;
top: 0;
}
<div class="wrapper">
<div class="header">
<span> header header </span>
</div>
<div class="body">
<span> body body </span>
</div>
</div>
<div class="wrapper-right">
<span> ipsum ipsum right </span>
</div>
You can set a width equal to width: calc(100vw - 10rem - X); where X is the distance you want to keep (10rem is twice the size of the fixed element) and your element will behave as expected when the fixed element will get close:
.wrapper {
background-color: green;
display: inline-block;
height: 4rem;
position: relative;
width: 100%;
}
.header,
body {
max-width: 30rem;
margin: 0 auto;
}
.header {
border: 3px solid yellow;
max-width: 30rem;
height: 4rem;
width: calc(100vw - 10rem - 2rem);
box-sizing: border-box;
}
.body {
background-color: red;
height: 500px;
}
.wrapper-right {
background: #0069aa;
height: 4rem;
width: 5rem;
position: absolute;
right: 0;
top: 0;
}
<div class="wrapper">
<div class="header">
<span> header header </span>
</div>
<div class="body">
<span> body body </span>
</div>
</div>
<div class="wrapper-right">
<span> ipsum ipsum right </span>
</div>
beginning from a layout to two column where column-left was fixed and column-right was liquid i have need to add a third column of widht fixed. I have this code:
<did id="#container">
<div id="#col1"> left fixed 15em </div>
<div id="#col2"> center liquid </div>
<div id="#col3"> right fixed 15em </div>
</div>
With this css:
#container {
background-color: #ffffff;
height: auto;
overflow: hidden;
}
#col1 {
float: left;
margin: 1em;
padding: 0.5em;
width: 15em;
}
#col2 {
float: none;
width: auto;
overflow: hidden;
margin: 1em;
padding: 0.5em;
}
#col3 {
float: right;
margin: 1em;
padding: 0.5em;
width: 15em;
}
The result is that third column it is located below the second column to right. How i can fix this problem?
The final result should to be a layout to three column where left and right column are fixed and central column is liquid.
Thank very much.
I like to use CSS tables for these layouts:
Note that you shouldn't use # in the id attribute.
#container {
width: 100%;
display: table;
}
#container>div {
display: table-cell;
}
#col1 {
background: lightblue;
padding: 0.5em;
width: 15em;
}
#col2 {
background: lightyellow;
padding: 0.5em;
}
#col3 {
background: lightgreen;
padding: 0.5em;
width: 15em;
}
<div id="container">
<div id="col1"> left fixed 15em </div>
<div id="col2"> center liquid </div>
<div id="col3"> right fixed 15em </div>
</div>
This is what flex boxes were invented for:
#container {
display: flex;
}
#col2 {
flex: 1;
}
#col1,
#col3 {
flex: 0 0 15em;
}
<did id="container">
<div id="col1">left fixed 15em</div>
<div id="col2">center liquid</div>
<div id="col3">right fixed 15em</div>
</div>
Extra Info: This is a very old web layout problem (called the "Holy Grail" of Layouts), see this article for a complete description. Also, see Mozilla's Using Flexible Boxes.
Note: In id properties don't include the # (that's used when selecting by id)
First of all, your html is invalid :
did should be div
id="..." should not contains #
HTML updated:
<div id="container">
<div id="col1"> left fixed 15em </div>
<div id="col2"> center liquid </div>
<div id="col3"> right fixed 15em </div>
</div>
For the CSS, you can change your rule #col2 float: none to float: left
JSFIDDLE: http://jsfiddle.net/ghorg12110/5p175fms/
You could try the following:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Three column layout</title>
<style>
body { margin: 0; overflow: hidden }
#V { position: absolute; top: 1em; left: 1em; width: 15em; border: 1px solid red; padding: .5em }
#W { position: absolute; top: 1em; right: 1em; bottom: 0; left: 1em; margin: 0 17em }
#X { border: 1px solid blue; padding: .5em }
#Y { position: absolute; top: 1em; right: 1em; width: 15em; border: 1px solid green; padding: .5em }
</style>
<div id=V>
Left content
</div>
<div id=W>
<div id=X>
Middle content
</div>
</div>
<div id=Y>
Right content
</div>
Im using a set of layers, with this CSS
.left1 {
float: left;
left: 5px;
width: 72px;
height: 100px;
}
.left2 {
height: 100px;
background-color: red;
margin-left: 186px;
}
.eventCat {
float: right;
width: 5px;
height: 100px;
}
to make inline divs. however, when i add a layer that i wish to be align to the right, it seems to fall below (the green one .eventCat). It should be at the right hand side of the red box! even with float:right; what am i missing?
I made a fiddle.. http://jsfiddle.net/7GBca/ to fiddle with :)
It is not floating correctly because .float2 is not floted, my guess is you want it to expand to fill all available width and that's why you didn't set an explicit width. One solution to align .eventCat correctly would be to use position:absolute; and use right:0;
.wrapper {
position: relative;
}
.eventCat {
position: absolute;
right: 0;
top: 0;
width: 5px;
height: 100%;
}
.left2 {
padding-right: 5px; /*set this to the width of .eventCat so it does not overlap*/
}
Example fiddle
you are missing "width: ...px" and "float: left" of 'left2' and "width: ...px" of 'wrapper'.
The easiest way to fix this is set a negative top margin to your green div:
.eventCat {
margin: -100px 0 0 0;
float: right;
width: 5px;
height: 100px;
}
Example Fiddle
Your issue is fixed, please check the code here:
<style type="text/css">
.eventCat {
float: right;
width: 5px;
height: 100px;
}
.eventIMG {
float: left;
left: 0;
width: 100px;
height: 100px;
}
.left1 {
float: left;
left: 5px;
width: 72px;
height: 100px;
}
.left2 {
height: 100px;
background-color: red;
margin-left: 186px;
}
.set:hover {
background-color: #FFDEAD;
cursor: pointer;
cursor: hand;
}
#event.title {
font-size: 21px;
font-weight: bold;
color: black;
text-decoration: none;
}
#event {
color: black;
}
</style>
and here is your HTML
<div class="wrapper">
<div class="eventIMG" style="background:url('http://hqhq.dk/beta/wp-content/uploads/2013/07/png-5.jpg') no-repeat scroll center center / 100% auto transparent"></div>
<div class="left1">
<div style="text-transform: uppercase;">WED 18.09</div>
<div style="text-transform: uppercase;">kl.22.00</div>
</div>
<div class="eventCat" style="background-color:green;"></div>
<div class="left2" id="event">
<div id="event" class="title"><a class="url" href="http://hqhq.dk/beta/event/fuzz-manta-dron/" title="FUZZ MANTA + DRÖN" rel="bookmark">FUZZ MANTA + DRÖN</a></div>
<div></div>
<div class="">
<p>something here</p>
Find out more » </div>
</div>
</div>
<div class="wrapper">
<div class="eventIMG" style="background:url('http://hqhq.dk/beta/wp-content/uploads/2013/07/png-5.jpg') no-repeat scroll center center / 100% auto transparent"></div>
<div class="left1">
<div style="text-transform: uppercase;">WED 18.09</div>
<div style="text-transform: uppercase;">kl.22.00</div>
</div>
<div class="eventCat" style="background-color:green;"></div>
<div class="left2" id="event">
<div id="event" class="title"><a class="url" href="http://hqhq.dk/beta/event/fuzz-manta-dron/" title="FUZZ MANTA + DRÖN" rel="bookmark">FUZZ MANTA + DRÖN</a></div>
<div></div>
<div class="">
<p>something here</p>
Find out more » </div>
</div>
</div>
What you have to do there is to replace you div.eventCat with div.left2 that's it :-)
Fiddle : http://jsfiddle.net/KRU9U/
Cheers
Put the eventCat (the element you want to float to the right) as the first element under wrapper.
I am looking to create a vertically scrolling website. I'll have a set of 5 divs that I want to have a height of 100% that are stacked on one another, basically making the body 1500% in height. Yeah?
Here is my code so far:
CSS
#contentWrapper {
position: relative;
width: 600px;
height: 1500%;
margin: 0 auto;
border: 1px solid red;
}
.panel {
position: relative;
height: 6.66%;
border: 1px solid blue;
}
.panelGuts {
position: relative;
top: 50%;
width: 100%;
height: 600px;
margin: -300px 0 0 0;
border: 1px solid green;
}
HTML:
<div id="contentWrapper">
<div class="panel">
<div class="panelGuts">
content
</div>
</div>
<div class="panel">
<div class="panelGuts">
content
</div>
</div>
<div class="panel">
<div class="panelGuts">
content
</div>
</div>
</div>
This seems to work in Safari, Firefox, and Chrome but it doesn't work on an iPad or iPhone, and knowing how IE like's to behave, it probably won't work there either.
What I am wanting to know is 1) Why is won't work on an iPad/iPhone, 2) is there a better way to do this, maybe with jQuery?
I need each panel to have a height of 100% and have the content (panelGuts) be vertically centered. I'll be using jQuery ScrollTo (or some scrollTo plugin) to scroll to each div. I'd like to NOT have to set a specific height to each div...
Can anyone help?
I actually figured this out with HTML5. It was pretty simple. For anyone who wants to see my results
CSS
body, html {
margin: 0px;
padding: 0px;
background: #FFF;
height: 100%;
}
#contentWrapper {
position: relative;
width: 600px;
height: 100%;
margin: 0 auto;
}
.panelContainer { display: inline; }
.panel {
position: relative;
display: table;
height: 100%;
width: 100%;
background:green;
}
article.panel:nth-child(2n+2) {
background:blue;
}
.panelGuts {
position: absolute;
top: 50%;
width: 100%;
height: 600px;
margin: -300px 0 0 0;
border: 1px solid black;
}
And my HTML
<div id="contentWrapper">
<section class="panelContainer">
<article class="panel">
<div class="panelGuts">
text 1
</div>
</article>
<article class="panel">
<div class="panelGuts">
text 2
</div>
</article>
</section>
</div>
And a Fiddle for you: http://jsfiddle.net/ryanjay/dwspJ/