Please look into this jsfiddle code.
Elements in right columns are incrementally shifting to left, even though I've used float-right.
I wanted the right column to be aligned to right border, just as the first value under Jenkins.
Please suggest what am I missing.
Thank You
In this case you may probably want to use text-align: right in the parent div instead of a float on the elements themselves. Float is not typically used for aligning content, but for aligning the containers of that content. It's often used for layouts. Text-align makes more sense here, because you want to align text.
Please remove the float-right from a tags of "metrics-content-t2" div and use text-align right.
.metric-div-row {
width: 100%;
display: flex;
}
.metric-div-row>div {
flex: 1;
margin-top: 5px;
margin-bottom: 2px;
margin-left: 10px;
margin-right: 10px;
/* Adding Border */
border-radius: 12px;
border: 2px solid cadetblue;
padding: 20px;
width: 200px;
height: 150px;
padding-top: 10px;
padding-bottom: 30px;
background-color: white;
}
.all-project-heading {
width: 100%;
height: 25px;
font-size: 18px;
font-weight: 600;
color: darkslategray;
}
.metrics-content {
width: 100%;
height: 120px;
}
.metrics-content-t1 {
float: left;
}
.metrics-content-t2 {
float: right;
text-align:right;
}
.metrics-heading {
margin-bottom: 5px;
font-size: 13px;
font-weight: 500;
}
.metrics-value-small {
color: #119bc9;
font-size: 15px;
font-weight: 500;
text-decoration: none;
border: 0px;
margin-bottom: 5px;
}
.floatRight {
float: right;
}
<div class="metric-div-row">
<div class="metric-divs">
<div class="all-project-heading">
CI Statistics
</div>
<br/>
<div class="metrics-content">
<div class="metrics-content-t1">
<span class="metrics-heading">Deployer</span>
<br/>
<a id="ciDeployerCount" class="metrics-value-small">0</a>
<br/>
<br/>
<span class="metrics-heading">GoCD</span>
<br/>
<a id="ciGocdCount" class="metrics-value-small">0</a>
<br/>
<br/>
<span class="metrics-heading">Other</span>
<br/>
<a id="ciOtherCount" class="metrics-value-small">0</a>
</div>
<div class="metrics-content-t2">
<span class="metrics-heading">Jenkins</span>
<br/>
<a id="ciJenkinsCount" class="metrics-value-small">0</a>
<br/>
<br/>
<span class="metrics-heading">TFS</span>
<br/>
<a id="ciTfsCount" class="metrics-value-small">0</a>
<br/>
<br/>
<span class="metrics-heading">None</span>
<br/>
<a id="ciNoneCount" class="metrics-value-small">0</a>
</div>
</div>
</div>
Related
I would like to display 3 white blocks in a blue container. Each with a 10px margin between.
Currently I have this:
<div class="wbg-create">
<div class="full-create">
<div class="white-create">
<br/>
<br/>
<br/>
<br/>
<br/>
<t class="f30 helv grey">Create Group</t>
<br/>
<br/>
<br/>
<t class="f30 helv-b grey">Group Name</t>
<br/>
<br/>
<input class="gen-input helv-b">
<br/>
<br/>
<br/>
<t class="f30 helv-b grey">Array Type</t>
<br/>
<br/>
<select class="gen-input helv txtind-10">
<option>Option 1</option>
<option>Option 2</option>
</select>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<button class="b_next"><b>Next</b></button>
</div>
<div class="white-create" style="margin: 0 auto;"></div>
</div>
</div>
.wbg-create{
position: absolute;
width: 84%;
background-color: #f3fbff;
border-radius: 50px;
height: 98vh;
margin-top: 0px;
text-align: center;
}
.f30{
font-size: 30px;
}
.helv{
font-family: Helvetica Neue;
}
.helv-b{
font-family: Helvetica Neue;
font-weight: bold;
}
.grey{
color: #545454;
}
.gen-input{
background-color: #e3e8ed;
height: 50px;
width: 300px;
border-radius: 30px;
border-color: transparent;
text-align: center;
font-size: 20px;
}
.txtind-10{
text-indent: 10px;
}
.full-create{
margin: 10px;
}
.white-create{
left: 50%;
width: 33%;
background-color: white;
border-radius: 50px;
height: 96vh;
}
.b_next{
border-radius: 50px;
height: 45px;
text-align: center;
width: 100px;
font-size: 20px;
background-color: #cad2e7;
color: #28284c;
border-color: transparent;
bottom: 30px;
}
.b_next:hover{
border-radius: 50px;
height: 45px;
text-align: center;
width: 100px;
font-size: 20px;
background-color: #dde7ff;
color: #4e4e95;
border-color: transparent;
}
.b_next:active{
border-radius: 50px;
height: 45px;
text-align: center;
width: 100px;
font-size: 20px;
background-color: #ffffff;
color: #30a3f5;
border-color: transparent;
}
I know this is really messy, and I should be using margin and padding instead of <br/> but I find it a very long process. My web-app is only run in full-screen and cannot be resized, so it shouldn't be too much of a problem.
How do I get these containers to appear side-by-side?
Currently, there are side-by-side, but they appear below the previous one.
Like this:
[]-should be here-
[]
[]
How can I fix this?
A dirty hack:
.white-create{display:inline-block;}
Better:
Have a look at Common CSS Flexbox Layout Patterns with Example Code
More infos: MDN flexbox
Using grid.
.wbg-create {
display: grid;
grid-template-columns: repeat(3, 1fr)
grid-gap: 10px;
}
Here's a pen with the working answer.
https://codepen.io/jorgeberen/pen/wvKVBNN
Using flex should do the trick too.
.wbg-create {
display: flex;
}
Because display:flex displays the items within the container by default in a horizontal row, your three white blocks should be displayed side by side. For this case scenario it is simpler than using grid.
I'm trying to do this
As you can see, the icon is not centered. I want the circle to be "pulled up" a bit so it looks nice.
Here is my html (angular):
// Icon component
<div>
<i><ng-content></ng-content></i>
</div>
// Parent Component
<div>
<p>Connect with <app-initials-icon>OT</app-initials-icon> {{ contact }} </p>
</div>
// For Simplicity (ignoring angular, so you can ignore above if you're not familiar)
<div>
<p>Connect with
<div> // the div that the css below applies to
<i>OT</i>
</div>
</p>
</div>
Here is my css
div {
display: inline-block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
}
Any idea how?
Add vertical-align: middle; to your div i css to vertically align the circle.
Full css:
div {
display: inline-block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
vertical-align: middle;
}
div {
display: block;
}
div i {
text-align: center;
border-radius: 50%;
background-color: blue;
color: white;
font-size: 7px;
padding: 3px;
font-style: normal;
}
i {
position: relative
}
i.one {
top:-15px;
}
i.two {
bottom:-15px;
}
<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="one">OT</i>
</div>
</p>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div>
<p>Connect with
<div> // the div that the css below applies to
<i class="two">OT</i>
</div>
</p>
</div>
You can put position directly on the i tag and you can control it's x and y using top, left, right, and bottom
I am trying to center a form inside a div and have another div on the right that is slightly indented but I can not get the elements to line up.
How do I do this with CSS?
Also, is it possible to align the right hand div in the center on a new line if the content doesn't fit on a page?
.lander-form {
margin: auto;
}
.lander-add {
float: right;
margin-right: 50px;
}
.container-lander {
overflow: auto;
width: 100%;
}
#OEPL_Widget_Form {
min-width: 200px;
max-width: 399px;
margin: auto;
font-weight: 300;
background-color: #F9F9F9;
box-shadow: 5px 5px 5px #888888;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
text-align: left;
border: 3px solid #d9d9d9;
}
#OEPL_Widget_Form div {
margin-top: 10px;
text-align: left;
}
#OEPL_Widget_Form input,
button {
width: 100%;
padding: 3px 5px;
}
.OEPL_Widget_Form textarea {
width: 100%;
padding: 3px 5px;
height: 5em;
text-align: left;
}
<div class="container-lander">
<div class="lander-form">
<div class="widget widget_oepl_lead_widget">
<div align='center' class='LeadFormMsg' style='color:red'></div>
<form id='OEPL_Widget_Form' class='OEPL_Widget_Form' method='POST' enctype='multipart/form-data'>
<div style='width: 45%; float:left'>
<p class='small'><label>First Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div style='width: 45%; float:right'>
<p class='small'><label>Last Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div>
</div>
<p class='small'><label>Your Message <span style="color: red">*</span> :</label><br><textarea cols="30" rows="5"></textarea></p>
<p><input type='submit' name='submit' style='' value='Submit' id='WidgetFormSubmit' class=''></p>
</form>
</div>
</div>
<div class="lander-add">
<div class="laura" id="laura-935032319"><img width="200" src='http://www.freevectors.net/files/large/10CarsVectorSet.jpg' /></div>
</div>
</div>
What you need is float:left;. Your two divs that you want side-by-side are .lander-form and .lander-add. What you have is, .lander-add is set to float:right;. This is a common beginner mistake. Both halves of the page should be float:left, you would think it would make more sense to make one of them float:right, but this is not the case.
I made the width for .lander-form 65%, expanded on the margins, and made the width for .lander-add "auto". This should work the way you want it to, with the right half of the page appearing below the left, when the viewing area is small or resized. Notice the difference when you run my code snippet, between the result that appears below, and the full-size result page.
.lander-form {
margin: auto;
float:left;
width:65%;
margin-bottom:20px;
margin-right:15px;
}
.lander-add {
float: left;
min-width:20%;
width:auto;
}
.container-lander {
overflow: auto;
width: 100%;
}
#OEPL_Widget_Form {
min-width: 200px;
max-width: 399px;
margin: auto;
font-weight: 300;
background-color: #F9F9F9;
box-shadow: 5px 5px 5px #888888;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
text-align: left;
border: 3px solid #d9d9d9;
}
#OEPL_Widget_Form div {
margin-top: 10px;
text-align: left;
}
#OEPL_Widget_Form input,
button {
width: 100%;
padding: 3px 5px;
}
.OEPL_Widget_Form textarea {
width: 100%;
padding: 3px 5px;
height: 5em;
text-align: left;
}
<div class="container-lander">
<div class="lander-form">
<div class="widget widget_oepl_lead_widget">
<div align='center' class='LeadFormMsg' style='color:red'></div>
<form id='OEPL_Widget_Form' class='OEPL_Widget_Form' method='POST' enctype='multipart/form-data'>
<div style='width: 45%; float:left'>
<p class='small'><label>First Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div style='width: 45%; float:right'>
<p class='small'><label>Last Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div>
</div>
<p class='small'><label>Your Message <span style="color: red">*</span> :</label><br><textarea cols="30" rows="5"></textarea></p>
<p><input type='submit' name='submit' style='' value='Submit' id='WidgetFormSubmit' class=''></p>
</form>
</div>
</div>
<div class="lander-add">
<div class="laura" id="laura-935032319"><img width="200" src='http://www.freevectors.net/files/large/10CarsVectorSet.jpg' /></div>
</div>
</div>
Using flex is often a great way to deal with layouts. Try this on your .container-lander div to align the items next to each other as well as having them vertically centered (additionally, this will also wrap the items when there's not enough space to place them next to each other):
CSS:
.container-lander {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: center;
}
Here is a live example (JSFiddle).
So here is my box:
BOX
Ok, now I want to add box near the input of the BET box.
<div id="x2"></div> <!-- HTML --->
/* CSS */
#x2{
width: 40px;
height: 40px;
background: cornflowerblue;
}
The box after I add it:
BOX-AFTER
As you can see, it messed up the thin gray line and everything underneath it. I'm really not sure why.
HTML:
<div class="gamebox">
<div id="bet-and-chance-texts">
<p id="bettext">BET</p>
<p id="profittext"><i class="fa fa-btc" aria-hidden="true"></i> PROFIT</p>
</div>
<div id="bet-and-chance-input-boxes">
<input class="default" id="userbet" onkeyup="checkBet()" value="0.00000000" placeholder="BTC" name="bet" autocomplete="off">
<div id="x2">x2</div>
<input readonly class="default" id="profitinput" onkeyup="" value="100" placeholder="BTC" name="bet" autocomplete="off">
</div>
<br>
<div class="line-separator"></div>
<div id="button-texts">
<p id="roll">ROLL UNDER</p>
<p id="payout">PAYOUT</p>
<p id="chance">CHANCE</p>
</div>
<div id="buttons">
<input class="hidden-boxed-input-roll" value = "50.00"/>
<input autocomplete="off" id="newpayout" onkeyup="calculateChance()" class="hidden-boxed-input" value = "2.000"/>
<input autocomplete="off" id="newchance" onkeyup="checkChance()" class="hidden-boxed-input" value = "50"/>
</div>
<br>
<div id="rolldice-section">
<button type="button" id="dicebutton" onclick="prepareRoll(authToken);" style="vertical-align:middle"><i class="fa fa-gamepad"></i> Roll dice</button>
</div>
</div>
CSS:
.gamebox {
height: auto;
padding: 20px;
width: 60%;
font-family: Helvetica Neue;
color: black;
margin-top: 20px;
margin-left: 20px;
background-color: white;
}
.line-separator{
height:.5px;
background: lightgray;
border-bottom:.5px solid lightgray;
}
#x2{
width: 40px;
height: 40px;
background: cornflowerblue;
float: left;
}
input[class="default"]{
padding: 12px 20px;
margin : 0 auto;
box-sizing: border-box;
text-align: center;
background-color: #E4ECF1;
display: inline-block;
}
p[id="roll"]{
display: inline-block;
float: left;
font-size: 13px;
}
p[id="payout"]{
display: inline-block;
margin-right: 25px;
font-size: 13px;
}
p[id="chance"]{
display: inline-block;
float: right;
font-size: 13px;
}
div[id=button-texts]{
text-align: center;
}
Why does everything below the thin gray line get messed up? How can I solve this?
Change this :
<div id="x2">x2</div>
to :
<span id="x2">x2</span>
since div have block display and you need to use span which is inline
then change your style, remove float and add some padding to #x2 :
#x2 {
padding: 13px;
width: 40px;
height: 40px;
background: cornflowerblue;
}
This is my HTML code:
<div id="upmenu">
<div class="info" id="info-uberuns"><div>ubernus</div></div>
<div class="info" id="info-consultant"><div>consultant</div></div>
</div>
And this is CSS class:
.info{
position: absolute;
width: 130px;
height: 47px;
z-index: 0;
background: rgba(255,255,255,0.8);
top: 13px;
color: #3b3b3b;
padding-top: 5px;
line-height: 22px;
font-size: 15px;
cursor: pointer;
}
.info div{
margin-left: 20px;
}
#upmenu{
margin:auto;
width:100%;
}
I want to arrange DIVs with info class in the DIV with upmenu class and show them side by side.
But the problem is that they are shown on top of each other instead of being shown side by side.
Please help me to solve this issue.
Regads
Try adding the following to the .info class.
display: inline-block;
vertical-align: top;
Also remove position: absolute; from .info
http://jsfiddle.net/G3N24/
You can add float:left to the .info class.
Either you can make the div's display property as inline-block like mituw16 showed,
OR
You can make the element itself a span, and no need to change any style.
<div id="upmenu">
<span class="info" id="info-uberuns">ubernus</span>
<span class="info" id="info-consultant">consultant</span>
</div>
JSFIDDLE
A different approach...not any better than other suggestions.
FIDDLE
You can play with the CSS and make it look anyway you want.
HTML
<div id="upmenu">
<div class="info" style="float: left;" id="info-uberuns">
ubernus
</div>
<div class="info" style="float: right;" id="info-consultant">
consultant
</div>
</div>
CSS
#upmenu{
border: 0px solid black;
margin:20px auto;
width:40%;
}
.info{
background-color: blue;
color: white;
padding: 10px;
line-height: 22px;
font-size: 15px;
cursor: pointer;
border-radius: 5px;
}