This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 6 months ago.
I can't manage to get my text to vertical align to the center of a div. I tried so simplify the problem as much as I could but it still doesn't work.
I tried with display:table but I need flexbox so that my columns are the right width and it didn't work either anyway. Removing elements one by one didn't bring me to the answer...
Edit: there is no span so it's not a problem of the last element being inline.
.row {
display: flex;
align-items: center;
margin-left: 44px;
margin-right: 44px;
margin-top: 10px;
}
.column_left {
flex: 28%;
}
.column_right {
flex: 72%;
}
.group_title {
color: #000000;
font-family: "Noto Serif";
font-size: 18px;
font-weight: bold;
letter-spacing: 0;
}
.group_description {
width: 408px;
color: #000000;
font-family: "Noto Serif";
font-size: 15px;
letter-spacing: 0;
}
.exercise_list {
height: 70px;
background: #FFEFD5;
}
<div class="exercise_list">
<div class="row">
<div class="column_left group_title">Les présentations</div>
<div class="column_right group_description">Le Féminin & le masculin - Les verbes « être » et « avoir »<br />Les Pays & les nationnalités - La famille. Les métiers</div>
</div>
</div>
<div class="exercise_list">
<div class="row">
<div class="column_left group_title">Poser des questions pour faire connaissance</div>
<div class="column_right group_description">La structure des questions ouvertes et fermées<br />Les activités quotidiennes</div>
</div>
</div>
Edit:
Removing the parent div to give both classes row and exercise_list to the child almost work, but I lose the margin to the left and the text is too close to the edge of the rectangle.
Take a look in the code:
.row {
display: flex;
align-items: space-arround;
width:100%;
}
.column_left {
padding-left:44px;
flex:1;
}
.column_right {
flex:2;
}
.group_title {
color: #000000;
font-family: "Noto Serif";
font-size: 18px;
font-weight: bold;
letter-spacing: 0;
}
.group_description {
width: 408px;
color: #000000;
font-family: "Noto Serif";
font-size: 15px;
letter-spacing: 0;
}
.exercise_list {
height: 70px;
background: #FFEFD5;
width:100%;
display:flex;
align-items:center;
}
<div class="exercise_list">
<div class="row">
<div class="column_left group_title">Les présentations</div>
<div class="column_right group_description">Le Féminin & le masculin - Les verbes « être » et « avoir »<br />Les Pays & les nationnalités - La famille. Les métiers</div>
</div>
</div>
<div class="exercise_list">
<div class="row">
<div class="column_left group_title">Poser des questions pour faire connaissance</div>
<div class="column_right group_description">La structure des questions ouvertes et fermées<br />Les activités quotidiennes</div>
</div>
</div>
add display:flex; to your .exercise_list elements
Try adding display: flex to .exercise_list. It should be the containing element that dictates child element alignment.
The margin on .row is confusing the spacing too so I would remove margin-top: 10px from .row and add that to .exercise_list.
Related
I am pretty new to everything and is trying to achieve header, 2 boxes with different width and a footer. Everything all together but I need to make so when content in the box is changed the height always stay the same.
I have tried implementing flexbox but cant make it work. I am not allowed to use overflow on this project.
I should be using floats as much as I can!
I want to achive the look like this photo i attach here:
enter image description here
What it looks like now:
enter image description here
`
<body>
<div class="wrapper">
<header><h1>Hej Header</h1></header>
<nav>
<div class="box">
<div class="box-row">
<section id="s1"><h1>Här är sektion nummer ett</h1></section>
<h1 class="rubrik1">Högskolan Nivå 1</h1>
<p id="p1"> Zombie zombies ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. </p>
<h2 class="rubrik2">Rubrik 2</h2>
<p id="p2"> Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. </p>
<h3 class="rubrik3">Rubrik 3</h3>
<p id="p3"> Zonbi asdasdasdadasdasdas asd asdasdasd a das dasd as dasd as das dtattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. </p></nav>
<section id="s2"><h2>Här är sektion nummer två</h2></section>
</div>
<footer><h1>Hej Footer</h1></footer>
</nav>
</div>
</body>
`
My CSS:
`
#font-face {
font-family: MuseoSans; src: url('fonts/MuseoSans_500.otf');
font-family: MuseoSans; src: url('fonts/MuseoSans_500.ttf');
font-family: RobotoCondensed; src: url('fonts/RobotoCondensed-Italic.ttf');
}
* {
background-color:#eee;
}
p {
font-family:Helvetica, Arial, Sans-serif;
color:#222;
font-size:14px;
}
.rubrik1 {
font-family: MuseoSans, helvetica, sans-serif;
color:#009;
font-size:28px;
}
.rubrik2{
font-family: RobotoCondensed, helvetica, sans-serif;
color:#009;
font-size:16px;
}
.wrapper {
float: left;
max-width:960px;
width:960px;
background-color: white;
border-width:1;
border-style: solid;
border-color:#ccc;
}
header {
border-style:double;
height: 140px;
}
footer {
border-style:double;
height:200px;
float: left;
width: 954px;
}
nav{
float:left;
padding:12px;
border-style: double;
width: 600px;
}
#s2{
float: left;
border-style:double;
}
`
I have tried implementing flexbox but cant make it work. I am not allowed to use overflow on this project.
I should be using floats as much as I can!
Perhaps this simple Flexbox layout might help as a starting point? According to the desired layout image it seems to replicate that quite closely. The nav element seemed to contain content that did not really constitute navigation so that was removed but could easily be slotted into the LHS section or header?
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
#wrapper {
display: flex;
flex-direction: column;
width: 80%;
height: 100vh;
margin: 0 auto;
}
header,main,footer,main>section {
display: flex;
margin: 0;
border: 1px solid rgba(133, 133, 133, 0.5);
}
header {
flex: 2;
order: 1;
align-items: center;
justify-content: center;
}
main {
flex: 10;
order: 2;
}
footer {
flex: 1;
order: 3;
align-items: center;
justify-content: center;
}
main>section:nth-of-type(1) {
flex: 10;
order: 1;
}
main>section:nth-of-type(2) {
flex: 4;
order: 2;
}
/* ONLY for visually identifying elements */
header {
background: azure
}
main {
background: yellow
}
footer {
background: pink
}
main>section:nth-of-type(1) {
background: rgba(0, 255, 0, 0.25);
}
main>section:nth-of-type(2) {
background: rgba(255, 0, 0, 0.25);
}
<div id='wrapper'>
<header>#header#</header>
<main>
<section>#LHS-Large#</section>
<section>#RHS-Small#</section>
</main>
<footer>#footer#</footer>
</div>
I need to align those two columns horizontally but it seems that all the solutions I've find are not working for me. The column on the right side will always be below the column in the left side. How can I solve it?
article {
margin: 0 auto;
padding-top: 80px!important;
padding-bottom: 10%!important;
width: 80%;
}
article:after {
content: '';
display: block;
clear: left;
margin: 0;
}
h2,
p {
float: left!important;
font-size: 1em;
font-weight: normal;
}
h2 {
text-align: start!important;
clear: left;
/*Move to new line*/
width: auto;
margin: auto;
}
p {
margin: 0 0 0 300px;
white-space: normal;
}
p+p {
margin-left: 300px;
clear: left;
}
h2+p {
text-align: start!important;
}
<article id="lyrics">
<h2>NEWS<br>
<br><br>31.08.2022</h2>
<p>In questa sezione andremo a collocare le notizie in un layout a due colonne: nella colonna di sx avremo la data di aggiunta della “news”, in modo da avere anche un’indicizzazione dell’informazione. Nella colonna di dx invece andremo a collocare la news
in se per se. In questa sezione andremo ad utilizzare un contenuto solamente testuale.</p>
</article>
just use flex on the <article> tag
article {
margin: 0 auto;
padding-top: 80px!important;
padding-bottom: 10%!important;
width: 80%;
display:flex;
justify-content:space-around;
align-items:start;
}
#news, #date{
display:block;
text-align:center;
margin:0;
}
h2,
p {
font-size: 1em;
font-weight: normal;
}
p {
margin: 0 0 0 300px;
white-space: normal;
}
<h2 id='news'>NEWS</h2>
<article id="lyrics">
<h2 id='date'>31.08.2022</h2>
<p>In questa sezione andremo a collocare le notizie in un layout a due colonne: nella colonna di sx avremo la data di aggiunta della “news”, in modo da avere anche un’indicizzazione dell’informazione. Nella colonna di dx invece andremo a collocare la news
in se per se. In questa sezione andremo ad utilizzare un contenuto solamente testuale.</p>
</article>
EDITED: Complete rehash.
The best way to display this imho is using display:table and table-cell as it aligns the columns. I've wrapped each element in a div with the class of 'container' which acts as a table row so we can put the title on the left and the lyrics on the right. The div with the class of title is the left hand column and the article section is the right hand column. This means you can have multiple paragraphs in the article.
Finally I've remmoved the white-space:pre as when writing this in an editor, the indenting is rendered on the browser. I've added br tags to provide new lines.
#lyrics {
display: table;
width: 600px;
background: #FFF;
font-size: 1em;
font-weight: normal;
}
.container {
display: table-row;
}
article,
.title {
display: table-cell;
padding: 0.5rem 0;
}
p {
margin: 0;
margin-bottom: 0.5rem;
}
<div id="lyrics">
<div class="container">
<div class="title">Frank:</div>
<article>
<p>My my my<br> My my my my my<br> My my my my<br> My my<br> I'm a wild and an untamed thing<br> I'm a bee with a deadly sting<br> You get a hit and your mind goes ping<br> Your heart'll pump and your blood will sing<br> So let the party and the sounds
rock on<br> We're gonna shake it 'till the life has gone<br> Rose tint my world<br> Keep me safe from my trouble and pain</p>
</article>
</div>
<div class="container">
<div class="title">Chorus:</div>
<article>
<p>We're a wild and an untamed thing<br> We're a bee with a deadly sting<br> You get a hit and your mind goes ping<br> Your heart'll pump and your blood will sing<br> So let the party and the sounds rock on<br> We're gonna shake it 'till the life has
gone<br> Rose tint my world<br> Keep me safe from my trouble and pain</p>
<p>We're a wild and an untamed thing<br> We're a bee with a deadly sting<br> You get a hit and your mind goes ping<br> Your heart'll pump and your blood will sing<br> So let the party and the sounds rock on<br> We're gonna shake it 'till the life has
gone, gone, gone<br> Rose tint my world<br> Keep me safe from my trouble and pain</p>
</article>
</div>
<div class="container">
<div class="title">Riff Raff:</div>
<article>
<p>Frank-N-Furter, it's all over<br> Your mission is a failure<br> Your lifestyle's too extreme<br> I'm your new commander<br> You now are my prisoner<br> We return to Transylvania<br> Prepare the transit beam</p>
</article>
</div>
</div>
I can't seem to get my text next to a square div/span.
I've tried a div, then float with the text; I also tried a span with display: inline-block and display:block. I can't seem to find out what I'm doing wrong. Already searched on Stack Overflow, but those solutions don't seem to work for me.
Here is the code I use:
.event-date{
background-color: #2C3846;
color: white;
width: 50px;
height: 50px;
margin: 20px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
.event-text{
float: left;
}
<body>
<div class="main-container">
<section class="col-content">
<main>
<h1>Onze evenementen</h1>
<section>
<div class="event-date">9<br>apr</div>
<h2 class="event-text">Discussiebijeenkomst Europa</h2>
<p class="event-text"><q>Wat betekent Europa nu concreet voor mij, in mijn dagelijks leven als
...</q></p>
</main>
</section>
</div>
</body>
I want the 'h2' and the 'p' stuff next to the blue square. it's going to be like an event list, and the blue box is the date.
Well, it's pretty simple, you have the main div, which will include both, the date and the text. You put the float on the wrong class, as the element that'll go after the div will be the text, so you have to add float: left; to the date div. Nevertheless, you'll have something like this :
.event-date {
background-color: #2C3846;
color: white;
width: 50px;
height: 50px;
margin: 20px;
float: left;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
.event-text {
margin: 0;
padding: 0;
}
<body>
<div class="main-container">
<section class="col-content">
<main>
<h1>Onze evenementen</h1>
<section>
<div class="event-date">9<br>apr</div>
<br><h2 class="event-text">Discussiebijeenkomst Europa</h2>
<p class="event-text"><q>Wat betekent Europa nu concreet voor mij, in mijn dagelijks leven als
...</q></p>
</section>
</main>
</section>
</div>
</body>
I addded simply float: left; to the date div, got rid of the padding and margin of the text (to fit better the date space) and added a <br> to break the upper empty space that would put the text too much on top (see it before the <h2> mark). Hope it helped. If you wish also, here's the a Fiddle too :
JSFiddle DEMO
You can amend this simply by displaying the date and text inline-block
.event-date, .event-text{
display:inline-block;
}
If you want the date to float to the left of the text, add float:left to the date CSS.
JSFiddle Demo
Please help me. I need 3 li element like in image those I downloaded (icon+text), but they have wrong behavior.
I need like this
.icon-equipment {
background-image: url('http://infocem.info/wp-content/uploads/2017/05/1.png');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}
ul {
list-style: none;
}
.advantages {
display: flex;
flex-flow: row wrap;
border: 1px solid purple;
height: 123px;
margin: 0;
padding: 0;
}
.advantages > * {
margin-left: 92px;
}
<ul class="advantages">
<li class="icon-equipment">Поставка оборудования<br> и запчастей<br><span>От 11 ведущих производителей</span><li>
<li class="icon-payment">Рассрочка платежа<br><span>До 45 дней с оформления заказа</span></li>
<li class="icon-delivery">Доставка товаров<br><span>Международная и междугородняя<br>в срок до 10 дней</span></li>
</ul>
The main thing to understand here is how to set-up a good hierarchy, so that you may have control over it. What I mean is, you have to separate your item into sections, which can be arranged easily using your model of choice (flexbox in this case).
Just take a look at the html that I have provided, see how it is structured. You have a container, within that container you have two elements, a left-side element (icon) and a right-side element (texts).
Styles are also a thing to notice, you will need some prefixing as well.
Since this is your first time on stackoverflow, I will give you this code ready for use. Usually you have to provide some code that you have been working on, and then seek assisstance for it. Whatever you do, please DO NOT expect this for future problems that you post here on Stack. Read the rules, follow the rules.
html {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.icon-equipment {
background-image: url('http://infocem.info/wp-content/uploads/2017/05/1.png');
background-position: left center;
background-repeat: no-repeat;
/* Adjust according to image size to push text across. */
}
ul {
list-style: none;
}
.advantages {
display: flex;
flex-flow: row wrap;
margin: 0;
padding: 0;
}
.advantages .advantages-item {
display: flex;
align-items: flex-start;
background: #000;
color: #fff;
padding: 1rem;
max-width: 300px;
margin-right: 1rem;
margin-bottom: 1rem;
}
.advantages .advantages-item:last-of-type {
margin-right: 0;
}
.advantages .advantages-item .item-right {
display: flex;
flex-direction: column;
padding-left: 1rem;
}
.advantages .advantages-item .item-right .right-text {
font-weight: bold;
text-transform: uppercase;
margin: 0;
margin-bottom: 1rem;
}
<ul class="advantages">
<li class="advantages-item">
<div class="item-left">
<div class="top-icon">
<img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon">
</div>
</div>
<div class="item-right">
<p class="right-text">Поставка оборудования и запчастей</p>
<span>От 11 ведущих производителей</span>
</div>
<li>
<li class="advantages-item">
<div class="item-left">
<div class="top-icon">
<img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon">
</div>
</div>
<div class="item-right">
<p class="right-text">Поставка оборудования и запчастей</p>
<span>От 11 ведущих производителей</span>
</div>
<li>
<li class="advantages-item">
<div class="item-left">
<div class="top-icon">
<img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon">
</div>
</div>
<div class="item-right">
<p class="right-text">Поставка оборудования и запчастей</p>
<span>От 11 ведущих производителей</span>
</div>
<li>
</ul>
Here is a basic question. I'd like to understand why the HTML element in my basic page are behaving the way they are, if someone could help me out.
Here's my code
<body>
<div id="wrapper">
<header>
<a id="logo" href="#">Evolvefitnesscoaching</a>
<nav>
<ul class="nav">
<li>Blogue</li>
<li>Une Question?</li>
</ul>
</nav>
</header>
<section id="slider">
<div id="cta">
<h2>Perdre du poids, une habitude à la fois!</h2>
<h3>Changez votre corps et votre vie, avec un coaching personnalisé par des
professionnels de la perte de poids et de l’activité physique.</h3>
</div>
</section>
<section id="apropos">
<h1>Avec evolvefitness, blah blah blah</h1>
</section>
</div>
Here's my css
body {
margin: 0px;
}
header {
width: 100%;
height: 80px;
position:absolute;
background-color: darkgrey;
}
nav {
width: 250px;
height: 100%;
position: relative;
background-color: cyan;
float: right;
}
.nav {
list-style: none;
}
.nav li {
display: inline;
margin-right: 10px;
}
.nav li a {
text-decoration: none;
color: white;
font-size:1.1em;
}
.nav li a:hover {
color:black;
}
#logo {
}
#slider {
display: block;
background-color: yellow;
width:100%;
height:700px;
}
#cta {
margin-top:px;
width: 500px;
height: 300px;
background-color: aquamarine;
}
#apropos {
width:100%;
height:300px;
text-align:center;
}
Now, what I don't understand is that the section #slider is not under, as per block, the header section but actually underneath (what I mean is that the header is comprised inside the section #slider), when, as far as I know, it should be over it, as if 2 blocks are stacking one over the other.
How is that so? The one called apropos is behaving as i'm expecting it to behave, ie, it's under the #slider section (blocks stacking). But the #slider section is not behaving like what i'm expecting, either because I don't understand well or something is off. Because of that, when I add another div inside of the slider section (#cta), it adds a margin between the body and the top part of my document.
Very basic question but i'm just starting out, if someone could help me :\
Thanks!
Your header is absolutely positioned and thus removes itself from the rest of the rendered layers.
Change its position into 'relative' (position: relative) and everything will work as expected.
The end tag of #wrapper should be placed above the closing body tag. Hmm it was just there, you changed something?