Working on a container containing 6 <div>. I can position them in the center of the container, but wont flow to the middle with the text positioned below..
Would appreciate all the help i can get.
.services {
display: flex;
align-items: center;
}
<div class="subSection services">
<div class="box">
<img src="img/icon1.png">
<h3>ICON 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon2.png">
<h3>ICON 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon3.png">
<h3>ICON 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon4.png">
<h3>ICON 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon5.png">
<h3>ICON 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon6.png">
<h3>ICON 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
</div>
Explanation:
The reason why you're solution didnt work is because you were just aligning the items. Whereas you needed to align the content as well as justify the content to the center. furthermore, i have added flex direction in columns as your items are all one under the other - it will help with responsiveness when you want to adjust it later on.
Try the following:
.services{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
<div class="subSection services">
<div class="box">
<img src="img/icon1.png">
<h3>ICON 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon2.png">
<h3>ICON 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon3.png">
<h3>ICON 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon4.png">
<h3>ICON 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon5.png">
<h3>ICON 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon6.png">
<h3>ICON 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
</div>
Related
I have three columns inside a section tag in HTML but they sit on top of each other instead of standing next to eachother.
<section class="sec-top">
<div style="background-color:#f4f5f9">
<div class="column">
<h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
<p style="padding-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
</p>
<ul class="checkmark">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis eu lorem ut risus sollicitudin bibendum.</li>
<li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
</ul>
</div>
<div class="column">
<img class="gify" src="../../assets/apps.gif" />
</div>
<div class="column">
<div class="backgroundBlue">
<h2 class="ptop">Lorem Ipsum</h2>
<h3>Lorem ipsum dolor sit amet.s</h3>
<iframe width="90%" frameborder="0"></iframe>
</div>
</div>
</div>
</section>
I am not sure what I am doing wrong or why this is happening. Any help is appreciated. Thanks!
A div is a block-level element. That means that even if you reduce it's width it will still cause a new line to be created:
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can). https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
See also: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
You need to either change the display value of .column (or its parent) or remove it from the normal flow with a float.
See examples below.
In the first example, I added float:left to the column class. This removes each column from the normal flow and they are stacked to the left of the screen.
In the second example, I changed the container div to the flexbox model and added flex: 1 1 33% to each column. This will cause each column to always take up 33% of the width of the parent. Here is a great resource on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.column {
width: 33%;
float: left;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.gify {
max-width: 100%;
}
.flex-parent {
display: flex;
flex-direction:row;
}
.flex-parent>.column {
flex: 1 1 33%;
float: none;
}
<section class="sec-top">
<strong>Using Float</strong>
<div style="background-color:#f4f5f9;" class="clearfix">
<div class="column">
<h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
<p style="padding-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
</p>
<ul class="checkmark">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis eu lorem ut risus sollicitudin bibendum.</li>
<li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
</ul>
</div>
<div class="column">
<img class="gify" src="https://via.placeholder.com/450" />
</div>
<div class="column">
<div class="backgroundBlue">
<h2 class="ptop">Lorem Ipsum</h2>
<h3>Lorem ipsum dolor sit amet.s</h3>
<iframe width="90%" frameborder="0"></iframe>
</div>
</div>
</div>
</section>
<section class="sec-top" style="margin-top:30px">
<strong>Using FlexBox</strong>
<div style="background-color:#f4f5f9;" class="flex-parent">
<div class="column">
<h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
<p style="padding-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
</p>
<ul class="checkmark">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis eu lorem ut risus sollicitudin bibendum.</li>
<li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
</ul>
</div>
<div class="column">
<img class="gify" src="https://via.placeholder.com/450" />
</div>
<div class="column">
<div class="backgroundBlue">
<h2 class="ptop">Lorem Ipsum</h2>
<h3>Lorem ipsum dolor sit amet.s</h3>
<iframe width="90%" frameborder="0"></iframe>
</div>
</div>
</div>
</section>
I am trying to create a div like the one found on youtube.com on the left side (where one finds all the options like trending, subscribed, etc.) which connects from top to bottom and stays while scrolling.
My Markup -
.navDiv {
/* Need to give the navDiv its dimentions */
/* height: 50px; */
width: 220px;
border-right: 1px solid rgba(41, 41, 41, 1);
height: 500px;
padding-left: 0px;
position: fixed;
top: 0;
bottom: 0;
/* background-color: white; */
}
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="navDiv">
<div class="logo">
<img id="logoImage" src="images/logo.png">
<!-- <img id="logoImage" src="images/logo.png"> -->
</div>
<div class="navBarItems">
<button class="profileItem">My Profile</button>
<button class="exploreItem">Explore</button>
<button class="uploadItem">Upload</button>
<!-- <ul>
<li class="profileItem">My Profile</li>
<li class="exploreItem">Explore</li>
<li class="uploadItem">Upload</li>
</ul> -->
</div>
</div>
</body>
</html>
I think you're looking for something like this:
.navDiv {
position: fixed;
width: 220px;
}
.content {
margin-left: 220px;
}
<div class="navDiv">
<div class="logo">
<img id="logoImage" src="images/logo.png">
</div>
<div class="navBarItems">
<button class="profileItem">My Profile</button>
<button class="exploreItem">Explore</button>
<button class="uploadItem">Upload</button>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
.navDiv {
position: fixed;
width:200px;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color:#ccc;
}
.logo{
width:100%;
float:left;
text-align:center;
padding: 5px 0px
}
.navBarItems{
width:100%;
float:left;
}
.profileItem,.exploreItem,.uploadItem{
width:100%;
float:left;
margin:3px 0px;
cursor:pointer;
}
.content {
margin-left: 220px;
}
<div class="navDiv">
<div class="logo">
<img id="logoImage" src="images/logo.png">
</div>
<div class="navBarItems">
<button class="profileItem">My Profile</button>
<button class="exploreItem">Explore</button>
<button class="uploadItem">Upload</button>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
Is it possible to arrange images in different divs using something similar to display: flex and order?
I want to make a grid 2 rows x 3 columns with an exact order of the images.
Actually, I tried Order with each image but with no results and I don’t know any other method!
Also, I’d want to use only HTML/CSS.
<div class="section-c__container__column2">
<div class="section-c__container__sub-column1">
<div class="block-slack">
<img src="img/logo-slack.png" alt="slack" class="slack">
<div class="sub-block-slack">
<h3 class="section-c__container__sub-heading">Slack</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
<div class="block-gsuite">
<img src="img/logo-gsuite.png" alt="gsuite" class="gsuite">
<div class="sub-block-gsuite">
<h3 class="section-c__container__sub-heading">GSuite</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
</div>
<div class="section-c__container__sub-column2">
<div class="block-trello">
<img src="img/logo-trello.png" alt="trello" class="trello">
<div class="sub-block-trello">
<h3 class="section-c__container__sub-heading">Trello</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
<div class="block-asana">
<img src="img/logo-asana.png" alt="asana" class="asana">
<div class="sub-block-asana">
<h3 class="section-c__container__sub-heading">Asana</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
</div>
<div class="section-c__container__sub-column3">
<div class="block-salesforce">
<img src="img/logo-salesforce.png" alt="salesforce" class="salesforce">
<div class="sub-block-salesforce">
<h3 class="section-c__container__sub-heading">Salesforce</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
<div class="block-typeform">
<img src="img/logo-typeform.png" alt="typeform" class="typeform">
<div class="sub-block-typeform">
<h3 class="section-c__container__sub-heading">Typeform</h3>
<p class="section-c__container__sub-par section-c__container__final-
sub">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
</div>
</div>
</div>
I'd like to have a button which responsively stays beside a paragraph, without the paragraph text wrapping around the button.
For example, here is the current code I am using:
<div class="myclass">
Button
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
This produces the following:
[button] Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In vitae turpis porta, lobortis turpis in, pretium erat. Lorem
ipsum dolor sit amet, consectetur adipiscing elit.
What I want, is the following:
[button] Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In vitae turpis porta, lobortis turpis in, pretium erat. Lorem
ipsum dolor sit amet, consectetur adipiscing elit.
I want it to remain this way no matter what the screen resolution is.
How would I accomplish this?
You can use Bootstraps Media Object to do this.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<div class="media">
<div class="media-left"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<hr>
<div class="media">
<div class="media-left media-middle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<hr>
<div class="media">
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="media-right media-middle"> Button
</div>
</div>
<hr>
<div class="media">
<div class="media-left media-middle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="media-right media-middle"> Button
</div>
</div>
<hr>
<div class="media">
<div class="media-left media-midle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<hr>
Try keeping the button in different div and the paragraph in another one.
You tagged bootstrap so you can put the button and text in separate divs with column width settings. The number after the device width is divided by 12 for the width percentage. You can also add multiple device widths to improve responsiveness.
<div class="row myclass">
<div class="col-xs-4">
Button
</div>
<div class="col-xs-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
http://jsfiddle.net/zsenq6h6/
Ended up just using display: table and display table-cell for this. i.e.:
HTML:
<div class="filters">
<div class="cell">
Button
</div>
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tempus ante sit amet hendrerit. Nunc vel nunc id nibh rhoncus posuere. Nunc tincidunt nisi nec diam lacinia commodo. Quisque erat nisi, vulputate eget lacinia finibus, aliquet quis est. Vivamus at risus egestas, interdum erat ut, condimentum dui.
</div>
</div>
CSS:
.filters {
display: table;
}
.filters .cell {
display: table-cell;
vertical-align: top;
}
bootstrap is the best way to do this effect. if you don't want to use bootstrap then you can use the following code.
html :
<div class="myclass">
Button
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
css :
a {
width:10%;
display:inline-block;
vertical-align:top;
}
p{
width:70%;
display:inline-block;
margin-top:0 !important;
}
#media screen and (max-width:500px){
a {
margin-right:20px;
}
}
}
http://jsfiddle.net/souraj/d0u61xpg/
media query part is required when the resolution will be below 500px . otherwise there is no need to use it.
I have a page with navigation menu on left and body on right. Actually body is consist of sections on all long.
I would like to display only this section which I click on the left navigation menu. I try to make something like that:
https://www.virtualbox.org/wiki/VirtualBox
Actually I have:
<div class="intro-body">
<div style="padding-top: 120px;" class="container">
<p class="intro-text">title</p>
<div id="content" class="row">
<div class="col-md-2">
<ul style="list-style-type: none;">
<li> FirstOne </li>
<li> Second </li>
<li> Second2 </li>
</ul>
</div>
<div class="col-md-10">
<section id="FirstOne">
<h2>title title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, condimentum sed faucibus ac, aliquam vitae enim.
</p>
</section>
<section id="Second" style="padding-top: 60px;">
<h2>title title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, condimentum sed faucibus ac, aliquam vitae enim. Curabitur sit amet velit nibh.
</p>
</section>
<section id="Second2" style="padding-top: 60px;">
<h2>title title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, condimentum sed faucibus ac, aliquam vitae enim.
</p>
</section>
</div>
</div>
</div>
</div>
It's just the same design in all pages. You can use include to do ths or copy the code page to page. sorry on my bad english hope you understand.