With the following code, I'm trying to get the leftside and rightside to be the same height despite the fact that I have lots of info on the left and a little bit on the right. I want there to be vacant space under the text on the rightside. Have I coded wrong or am I missing something? Thanks.
#sides {
padding-bottom: 40px;
margin-bottom; 40px;
background-color: white;
}
#leftside {
width: 62%;
display: inline-table;
background-color: #000000;
float: left;
padding-right: 20px;
padding-left: 5%;
box-sizing: border-box;
}
#rightside {
width: 38%;
display: flex;
background-color: #808080;
float: left;
padding-left: 20px;
box-sizing: border-box;
flex-direction: column;
}
<div id="sides">
<div id="leftside">
<h1>TONS O' TEXT</h1>
</div>
<div id="rightside">
<h1>TINY AMOUNT OF TEXT</h1>
</div>
</div>
Remove display: inline-table; from #leftside
Related
.topnavigatiebar {
width: 1500px;
height: 100px;
background-color: #fafafa;
position: fixed;
top: 0;
overflow: hidden;
z-index: 9;
white-space: nowrap;
}
.topnavigatiebar img {
float: left;
}
.topnavigatiebar #nav {
width: 80%;
height: 50%;
margin-top: 25px;
margin-left: 20px;
float: left;
display: block;
text-decoration: none;
text-align: center;
}
.topnavigatiebar #nav #sector {
width: auto;
height: 75%;
float: left;
margin: 0 15px 0 15px;
padding: 5px 10px 5px 10px;
border-radius: 6px;
}
.topnavigatiebar #nav #sector:hover {
background-color: lightgrey;
transition: 0.25s;
}
.topnavigatiebar #nav .active {
background-color: #b7a483;
}
.topnavigatiebar #nav:visited {
color: black;
}
.topnavigatiebar #nav #sector a {
font-size: 20px;
vertical-align: center;
line-height: 40px;
text-decoration: none;
color: inherit;
}
#logo {
display: inline-block;
margin-top: auto;
height: 100%;
vertical-align: middle;
}
#logo img {
background: #3A6F9A;
vertical-align: middle;
max-height: 100px;
max-width: 100px;
border-radius: 45px;
}
.right {
float: right;
}
<div class="topnavigatiebar">
<img src="https://imgur.com/trhdmMX">
<div id="nav">
<div id="sector">Home</div>
<div id="sector" class="active">KlantenInformatie</div>
<div id="sector">Artikelen</div>
<div id="sector">Instellingen</div>
<div class="right">
<div id="sector">Afmelden</div>
</div>
</div>
<div id="logo"><img src="../Includes/Pictures/ProfielLogo.png"></div>
</div>
So i couldn't find a specific answer to my question, but something in my html is going wrong.
i try to vertical align a image to the center of a navigation bar. the image is for profile pictures, so you can see who is logged in (the login config isn't there yet, but that is for later).
Can anyone look at my code and tell me what i am doing wrong?
It just might be very simple and me stupid enough to forget, but i just can't figure out?
i already tried these methods, but they didn't solve my problem:
How to vertically align an image inside a div?
facebook photo/ image vertical align?
vertical-align image in div
EDIT: here are 2 links for the pictures:
https://imgur.com/trhdmMX
Try adding margin-top: 20% in the #logo img in CSS.
You can also do the same by adding display: block; margin-top: 25%; in #logo img in CSS as well.
I'm trying to align circles in the center on mobile. Here is what I've used on https://www.wmhi.com.au/elite-edge-leadership-resilience/
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: inline-block;
}
.circle:hover {
background-color:#79c852;
color:white;
}
I need to keep the texts as laid there now (inline-block). The circles are appearing left aligned on mobile phones. Any help would be highly appreciated.
Thanks in advance :)
Kindly change your CSS from
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: inline-block;
}
to this
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: block;
padding-top: 10px;
margin: auto;
}
And it will work perfectly fine. I just made these elements block give them an auto margin and give some top padding to the text.
try following code for good design some change for good design please add one div for all content vertically center when you add one line code or more than large content set vertically center also your circle center in mobile.
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: table;
margin: 0 auto;
}
.vertical-center {
display: table-cell;
vertical-align: middle;
}
.circle h2 {
margin-top: 0;
margin-bottom: 15px;
}
.circle p {
margin: 0;
}
.circle:hover {
background-color:#79c852;
color:white;
}
<div class="wpb_wrapper">
<div class="circle">
<div class="vertical-center">
<h2 class="w-h2">
<span style="color: #ffffff;">Step 3</span>
</h2>
<p>Run the popular Elite Edge training</p>
</div>
</div>
</div>
add the div before the circle class. like this and it will resolve the problem
<style>
.divCenter{margin:0 auto;text-align:center;}
</style>
<div style="margin:0 auto;text-align:center;">
<div class="circle">
<h2><span style="color: #ffffff;">Step 1</span></h2>
<p>Tell us your team’s resilience and leadership goals</p>
</div>
If I didn't make parent container be inline-block style
The inner arrow will be aligned in the center position which is I expected.
However, there will be a line-break for the following text.
If I make the parent container be inline-block style
HTML
<div class="queue-view-entry-line" name="Name">
<div class="mycompany-document" style="/* display: inline-block; */">
<div class="arrow-right">
</div>
</div>
<span class="entry-label">File Name</span><span class="entry-value">Planned Payment Dates 2017
</span>
</div>
CSS rules
div{
.mycompany-document{
background: #F7F7F7;
border: 1px solid #AAAAAA;
left: 64px;
top: 64px;
width: 32px;
height: 32px;
vertical-align: middle;
border-radius: 5px;
letter-spacing: 1px;
text-align: center;
display: table-cell;
.arrow-right{
margin: auto;
vertical-align: middle;
display:inline-block;
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
}
}
}
I recommend you give flexbox a try. It will quickly be your best friend!
I didn't feel like wrestling with your HTML, so I created a new example to show how you could achieve the desired effect.
Check out this fiddle.
https://jsfiddle.net/omucfbzh/
<div class="box">
<h2>Documents</h2>
<div class="others">
<div class="arrow-container">
<div> > </div>
</div>
<p>Planned Payment Dates 2017</p>
</div>
</div>
.box {
background-color: orange;
display: flex;
flex-direction: column;
padding: 7.5px;
}
.others {
display: flex;
}
.arrow-container {
background-color: grey;
border-radius: 5px;
height: 50px;
width: 50px;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}
In my HTML I'm trying to align a Title next to the title's Bullet, so that the first line of the title always is next to the bullet, and the second line (if any) doesn't change the title's position - it just trails to the next line.
JSFiddle:
http://jsfiddle.net/Ebqq8/
HML:
<div class="bullet-container">
<div class="bullet-title-container">
<div class="circle-container">
<div class="circle"></div>
</div>
<p class="bullet-title">Short Title</p>
</div>
<div class="bullet-details-container">
<p>Body Text</p>
</div>
</div>
CSS:
.circle-container {
height: 34px;
display: inline-block;
position: relative;
width: 14px;
border: 1px solid blue;
}
.circle {
border-radius: 50% !important;
width: 12px;
height: 12px;
background-color: red;
display: inline-block;
position: absolute;
top: 0px;
/* width and height can be anything, as long as they're equal */
}
.bullet-title {
display: inline-block;
font-size: 16px;
font-weight: bold;
margin-left: 10px;
min-height: 34px;
width: 200px;
margin: 0px;
}
.bullet-title-container {
color: black;
display: inline-block;
position: relative;
width: 250px;
}
.bullet-details-container {
color: black;
}
.bullet-container {
max-width: 600px;
float: left;
text-align: left;
}
What's happening now is that the first line is always too low, and if there are multiple lines, the whole title gets pushed up too high. I thought that aligning two inline-block elements would do the trick, but it doesn't seem to be working. What am I doing wrong?
You could try adding:
position: absolute;
top: 0;
to .bullet-title { }
http://jsfiddle.net/Ebqq8/2/
Is there a way to present data as follows using css?
An article is divided into paragraphs, and each paragraph has a (usually smaller) box/sub-paragraph to the right of it, horizontally aligned with its respective paragraph.
Yes, it is possible. Here is an example of how you can achieve this http://jsfiddle.net/sptzH/1/
HTML:
<section class="content">
<article class="row">
<p>Paragraph A</p>
<div class="teaser">
Text related to A Text related to A Text related to A Text related to A Text related to A Text related to A
</div>
</article>
<article class="row">
<p>Paragraph B Paragraph B Paragraph B Paragraph B</p>
<div class="teaser">
Text related to B
</div>
</article>
</section>
CSS:
.content {
width: 500px;
}
.row {
clear: both;
padding: 10px;
border-top: solid 1px #000;
}
.row:after {
content: "";
display: table;
clear: both;
}
.row p {
width: 60%;
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0;
margin: 0;
font-size: 50px;
}
.row .teaser {
width: 40%;
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 6px;
border: dotted 1px #999;
}
Using some CSS you could do something like the following. Example
CSS
.wrapper {
width: 500px;
overflow: hidden;
margin-top: auto;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
}
.wrapper .paragraph {
width: 225px;
float: left;
height: 150px;
line-height: 150px;
border: medium solid #000;
text-align: center;
vertical-align: middle;
}
.wrapper .text {
float: right;
width: 225px;
height: 100px;
line-height: 100px;
border: medium solid #000;
text-align: center;
vertical-align: middle;
}
HTML
<div class="wrapper">
<div class="paragraph">Paragraph</div>
<div class="text">Related Text</div>
</div>
<div class="wrapper">
<div class="paragraph">Paragraph</div>
<div class="text">Related Text</div>
</div>