How to horizontally align items using flexbox? - html

Beginner here. For some reason in the website I'm coding, the to-be buttons don't align horizontally on the nav bar. I'm using flexbox, but even then it doesn't align them like how I want it to. There doesn't seem to be any problems in the code, either.
.topPart {
position: fixed;
overflow: hidden;
top: 0;
margin: 0px 15px 30px 15px;
width: 1790
padding: 30px;
border: 2px solid #3cc851;
background-color: #1f1f1f;
}
.topButtons {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-center;
height: 15px;
width: auto;
padding: 15px;
background-color: #fff;
color: #1f1f1f;
}
.topButtons .rightButtons {
text-align: right;
margin: auto 2px auto 1500px;
}
.topButtons .leftButtons {
text-align: left;
margin: auto 2% auto 2%;
}
<div class="topPart">
<h2> Website name I don't want to share </h2> <p> Website slogan I don't want to share </p>
<!-- later, make it so that the boxes of text are lined up like how it looks in the code using css -->
<div class="topButtons">
<div class="leftButtons">
<a href="index.html" class="home">home<a>
<a href="" class="mssg">mssg board<a>
<a href="database.html" class="data">database<a>
<a href="roleplay.html" class="rp">rp<a>
</div>
<div class="rightButtons">
dms
<a class="out">logout</a>
<a class="acc">acc</a>
</div>
</div>
</div>
The right buttons appear to be ~5px lower than the left ones. I'm at a complete loss here, there doesn't seem to be any errors in my code to cause this. Flexbox tags that should fix it don't do anything either, such as flex-direction: row; and justify-content.
What it looks like.

the div is a block element, so maintaining a width of auto would be essentially 100% of the available space which pushed the second div downwards.
try inline-flex or making the width a set amount rather than auto

This is happening due to the CSS properties of "text-align" and "margin" on ".leftButtons" and ".rightButtons" classes. You don't need to use these properties as you are using "display:flex" on ".topButtons" class. Horizontal and vertical alignment of child classes will manage by "justify-content: space-between;" and "align-items: center;" ".topButtons".
I have removed CSS properties of ".leftButtons" and ".rightButtons" classes. Updated "justify-content: space-between;" on ".topButtons" so that child classes horizontal align by leaving equal spaces between element.
I have also made some corrections in your markup which I have found, mentioned below:
(1) Anchor (/a) closure tags was missing of child ".leftButtons".
(2) In ".topPart" ";" was missing after width property declaration. Also added "px" of width value "1790".
Please check added code.
.topPart {
position: fixed;
overflow: hidden;
top: 0;
margin: 0px 15px 30px 15px;
width: 1790px;
padding: 30px;
border: 2px solid #3cc851;
background-color: #1f1f1f;
}
.topButtons {
display: flex;
flex-flow: row wrap;
/* justify-content: space-around; [old code] */
justify-content: space-between;
align-items: center;
height: 15px;
width: auto;
padding: 15px;
background-color: #fff;
color: #1f1f1f;
}
/*---- [old code]----*/
.topButtons .rightButtons {
/*text-align: right;
margin: auto 2px auto 1500px;*/
}
.topButtons .leftButtons {
/*text-align: left;
margin: auto 2% auto 2%;*/
}
<div class="topPart">
<h2> The Blood Tundra Kingdom </h2>
<p> - never talk about the blood tundra kingdom </p>
<!-- later, make it so that the boxes of text are lined up like how it looks in the code using css -->
<div class="topButtons">
<div class="leftButtons">
home
mssg board
database
rp
</div>
<div class="rightButtons">
dms
<a class="out">logout</a>
<a class="acc">acc</a>
</div>
</div>
</div>

You can define display: flex;,justify-content: space-between, align-items: center; in topPart class and equally divided width of inside div by this flex: 1 1 auto; css property. I hope below snippet will help you lot.
*,*:before,*:after{box-sizing: border-box;}
body{margin: 0; padding: 0}
.topPart {
position: fixed;
overflow: hidden;
top: 0;
padding: 30px 20px;
border-bottom: 2px solid #3cc851;
background-color: #fff;
width: 100%;
z-index: 100;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.leftButtons {
flex: 1 1 auto;
text-align: left;
}
.centerButtons {
text-align: center;
flex: 1 1 auto;
}
.rightButtons {
text-align: right;
flex: 1 1 auto;
}
.centerButtons a, .rightButtons a{
display: inline-flex;
background-color: #ccc;
padding: 4px 5px;
text-decoration: none;
color: #444;
text-transform: capitalize;
}
<div class="topPart">
<div class="leftButtons">
<div>Website Name<br>Website slogan</div>
</div>
<div class="centerButtons">
home
mssg board
database
rp
</div>
<div class="rightButtons">
dms
<a class="out">logout</a>
<a class="acc">acc</a>
</div>
</div>

Related

Aligning 3 divs side by side in a navigation bar

I am trying to align 3 divs side by side in a navigation bar. I've spent the past 5 hours trying to figure this out and I know it's something super simple that I can't just wrap my head around.
This is where I am at right now.
If I float the align-right div the tags Join & Support stack ontop of each other.
<div id="sticky-nav">
<div class="container">
<div class="box">
<div class="align-left">
Home Listings
</div>
<div class="align-center">
<form action="/action_page.php">
<input type="text" placeholder="Search..">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</div>
<div class="align-right">
Join Support
</div>
</div>
</div>
</div>
#sticky-nav {
overflow: hidden;
background-color: #7889D6;
position: fixed;
top: 0;
width: 100%;
}
#sticky-nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
#sticky-nav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
max-width: 300px;
width: 100%;
}
#sticky-nav button {
padding: 6px 10px;
padding-top: 1px; margin-top : 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
margin-top: 8px;
}
#sticky-nav a:hover {
background-color: #ddd;
color: black;
}
#sticky-nav a.active {
background-color: #4CAF50;
color: white;
}
.container {
display: table;
width: 100%;
}
.box {
display: table-row;
}
.align-left {
width: 33%;
text-align: justify;
display: table-cell;
padding: 10px;
}
.align-center {
width: 33%;
text-align: justify;
display: table-cell;
padding: 10px;
}
.align-right {
width: 33%;
display: table-cell;
padding: 10px;
text-align: right;
}
EDIT: This is the layout I am trying to achieve,
I see that you're using display: table to achieve this effect. I highly recommend reading up more first before continuing with your work or project. Some layout concepts you have to know are grid and flex. In your case, we can use the flexbox concept to solve your problem.
flex basically is a method that can distribute space between items more easily. In your case, you can get what you're trying to achieve by using flex-grow and flex-basis. flex-basis defines how, initially, long/tall an item inside a flex container should be. flex-grow defines how an item inside a flex container can expand (grow) in width/height depending on the remaining space of the container.
In your case, we can simply set the flex container's width (your wrapping div) to 100%. To distribute space evenly between the items, we can set all the items' initial widths to 0. Then, distribute the remaining space of the container (which is still 100%) evenly using flex-grow to 1 for each flexbox item. However, this will make all the items similar in width. To make the center div wider, you can set the flex-grow to 2. This will make it so that the left div, center div, and right div have 25%, 50%, and 25% of the container's remaining space in width respectively. I really recommend reading further about flex to understand what I mean. After reading about flex in the above link, try visiting this and this to learn more about flex-basis and flex-grow.
Here's a working solution using flex. Again, I recommend reading more about flex so that you can use flex better.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Helvetica;
}
body,
html {
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
width: 100%;
}
#wrapper * {
padding: 30px;
text-align: center;
color: white;
}
.left-align,
.right-align {
flex-basis: 0;
flex-grow: 1;
}
.center-align {
flex-basis: 0;
flex-grow: 2;
}
.left-align {
background: #121212;
}
.center-align {
background: #232323;
}
.right-align {
background: #454545;
}
<div id="wrapper">
<div class="left-align">Some content</div>
<div class="center-align">Some content</div>
<div class="right-align">Some content</div>
</div>
I have created a simple example for your layout.
You can achieve it using flex box i.e
.box{
display: flex;
width:100%;
justify-content:space-between;
}
Here is the link: https://codesandbox.io/s/optimistic-euclid-xmv6h
Hope it answer your question.

vetical-align a line of text in container

After reading something on vertical-align here, i'm decide to do some practice on this feature, but stuck into a problem that really hard to understand. could you please figure out why "the line of text" does not get vertical-aligned in wrapper div.
.wrapper {
height: 200px;
background-color: aquamarine;
margin: 0;
padding: 0;
}
.ctxt {
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
}
.ctxt-before {
display: inline-block;
width: 10px;
height: 200px;
background-color: #f66;
margin: 0;
padding: 0;
}
<div class="wrapper">
<!-- i think the line-box is 200px and div.ctxt should vertical-aligned in div.wrapper -->
<div class="ctxt-before"></div>
<p class="ctxt">this line of text</p>
</div>
I think the line-box is 200px and div.ctxt should vertical-aligned in div.wrapper.
You've almost got the idea, but you're aligning the middle of the ctxt div with the baseline of the ctxt-before div. Because that has no content, its baseline is its bottom edge.
You need to align it with the middle of the ctxt-before div instead:
.wrapper {
height: 200px;
background-color: aquamarine;
margin: 0;
padding: 0;
}
.ctxt {
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
}
.ctxt-before {
display: inline-block;
width: 10px;
height: 200px;
background-color: #f66;
margin: 0;
padding: 0;
vertical-align: middle; /* add this */
}
<div class="wrapper">
<!-- i think the line-box is 200px and div.ctxt should vertical-aligned in div.wrapper -->
<div class="ctxt-before"></div>
<p class="ctxt">this line of text</p>
</div>
The reasons why you got that result is:
div.ctxt-before is not vertical-aligned in middle. By default, inline or inline-block element is aligned on baseline.
div.ctxt-before does not contain text or image, so the baseline is the bottom of its bounding box. If you try adding text inside div.ctxt-before, the text in p.ctxt will display at top, because the baseline belongs to text/image, not the bounding box anymore.
If you just want div.ctxt-before element and p.ctxt element to be vertical-aligned in middle, you miss:
.ctxt-before{vertical-align: middle;}
Using flex box you can do this easily.
.wrapper {
height: 200px;
background-color: aquamarine;
align-items: center;
text-align: center;
display: flex;
justify-content: center;
}
https://codepen.io/ssniranga/pen/dqKaNe
Yours doesn't work because vertical-align is for tables. When display modes, box-model, and positions are considered, it's easy to see that css layout has many aspects. You'll have to read about them to truly understand what's going on.
Try using flexbox, they make this stuff easy:
.wrapper {
height: 200px;
background-color: aquamarine;
display: flex;
justify-content: center;
align-items: center;
}
.ctxt-before {
display: inline-block;
width: 10px;
height: 200px;
background-color: #f66;
margin: 0;
padding: 0;
}
<div class="wrapper">
<!-- i think the line-box is 200px and div.ctxt should vertical-aligned in div.wrapper -->
<div class="ctxt-before"></div>
<p class="ctxt">this line of text</p>
</div>

How do I style a chat box in CSS?

I have a chat box that looks like this:
My main issue is that all messages are a fixed width, when I want the width to auto-resize by the amount of text. The elements are all spans within the chat div, with a display of block (inline or inline-block will render side-by-side) and changed side margins to make messages 'stick' to one side. Here is my css
.psentMessage {
text-align: right !important;
background-color: #F0F0F0;
margin-right: 0 !important;
border-top-right-radius: 0 !important;
}
.pmessage {
text-align: left !important;
background-color: white;
margin-left: 0 !important;
border-top-left-radius: 0 !important;
}
.pmessage, .psentMessage {
display: block !important;
padding: 2vh 1vw;
max-width: 85%;
margin-top: 1vh;
margin-bottom: 1vh;
border-style: hidden;
border-radius: 10px;
}
How can I make the divs auto-resize but still have them in this layout?
This can be solved by a flexbox layout with flex-direction: column;.
When you add align-items: flex-start;, the width of each message is adapted to the content. Add align-self: flex-end; to the messages you want to align to the right side.
Simplified example: https://codepen.io/anon/pen/bMobqM
HTML:
<div>
<p class="other">Hello</p>
<p class="other">This is the project managment app</p>
<p>gwkki</p>
<p class="other">hello</p>
<p class="other">hi</p>
<p>Hello</p>
<p class="other">online</p>
</div>
CSS:
div {
background: #ccc;
padding: 20px;
width: 150px;
display: flex;
flex-direction:column;
align-items: flex-start;
}
p {
background: #fff;
padding: 10px;
}
.other {
align-self: flex-end;
background: #ddd;
}
More information about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS3 flexbox: vertically center two different sized items, but make their top align at the same height

inspired by:
Flexbox - Vertically Center and Match Size
fiddle with the problem:
http://jsfiddle.net/Nbknc/22/
what i try to achieve:
I want to get the text of the second button to start at the same height as the text on the first button.
HTML
<section class="buttonsSection">
<a class="button" href="#">Very Long Word aaaa xx ccc ddd ee</a>
<a class="button" href="#">Short Phrase</a>
</section>
CSS
.button {
padding: 10px 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: top;
display: flex;
flex-direction: column;
justify-content: center;
}
.buttonsSection {
margin: 30px 0;
display: flex;
justify-content: center;
height: 500px;
}
body
{
width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
margin: 0 auto;
}
a photo of how i want it to look
EDIT the reason I use flexbox and justify-content is to make it work with different screen sizes. Space is perfectly distributed with flexbox. Adding a padding is suboptimal as it will stay the same, even if the screen has a height of say 200px.
Here is one way, one where I added an extra wrapper that centers
.buttonsSection {
display: flex;
flex-direction:column;
justify-content: center;
height: 400px;
border: 1px solid;
width: 200px;
margin: 0 auto;
}
.buttonsWrap {
margin: 30px 0;
display: flex;
}
.button {
padding: 50px 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: top;
}
<section class="buttonsSection">
<div class="buttonsWrap">
<a class="button" href="#">Very Long Word aaaa xx ccc ddd ee</a>
<a class="button" href="#">Short Phrase</a>
</div>
</section>
You can accomplish this by removing the flexbox properties from the button and adding a span around your button text with the following CSS:
position: relative;
top: 50%;
transform: translateY(-50%);
You may need to play with those percentages to get things to line up ideally, but this gets you in the ballpark.
http://codepen.io/angeliquejw/pen/QNdrOZ?editors=0100
I updated the fiddle
Suggest if its not that you require.
http://jsfiddle.net/Nbknc/30/
.button {
padding: 50% 15px 0 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
}
.buttonsSection {
margin: 30px 0;
display: flex;
flex-direction:row;
height: 500px;
}
Now its much simpler , now you can add the required padding to your button
so that the text in both button will align with equal top padding .
UPDATE
included some changes to your html and css
http://jsfiddle.net/Nbknc/32/
Edit: http://jsfiddle.net/Dneilsen22/36yL3y5m/5/
Removing the justify-content for .button and increasing the top padding would accomplish this.
.button {
padding: 100px 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: top;
display: flex;
flex-direction: column;
}

Flexbox - Vertically Center and Match Size

I have two buttons next to each other using flex and I have their contents vertically centered, which work great so far. However, when my site is viewed on mobile pages (using responsive design to scale the page), the second button, which has less text in it becomes a different size than it's companion.
So, the goal is to vertically align the text on my buttons as well as to have the two buttons always match each others size.
<section class="buttonsSection">
<a class="button" href="#">Very Long Word</a>
<a class="button" href="#">Short Phrase</a>
</section>
.button {
padding: 20px 10px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: center;
}
.buttonsSection {
margin: 30px 0;
display: flex;
align-items: center;
justify-content: center;
}
body
{
width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
margin: 0 auto;
}
JSFiddle: http://jsfiddle.net/Dragonseer/WmZPg/
If the problem isn't obvious right away, try reducing the width of the Result window.
Solution inspired by this question, was to set the buttonsSection to flex and center, and setting the button to flex, column and center.
See Fiddle here: http://jsfiddle.net/Dragonseer/Nbknc/
.button {
...
display: flex;
flex-direction: column;
justify-content: center;
}
.buttonsSection {
margin: 30px 0;
display: flex;
justify-content: center;
}
Just add align-items: stretch; to .buttonsSection
see that Working Fiddle
.buttonsSection {
margin: 30px 0;
display: flex;
justify-content: center;
align-items: stretch;
}
also: when using flex you'll have to pay attention to the vendors specific prefix's.
read more about it here
Update:
If you're using my original proposal, you can also control the vertical-alignment.
check out this Working Fiddle
HTML: (same)
Very Long Word
Short Phrase
CSS:
body
{
width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
margin: 0 auto;
}
.buttonsSection
{
margin: 30px auto;
display: table;
border-spacing: 3px 0;
}
.button
{
display: table-cell;
vertical-align: middle;
padding: 10px 15px;
background-color: deepskyblue;
color: white;
text-align: center;
max-width: 100px; /*Or any other width you want*/
}