I'm looking for a more elegant way to align the right icons with the left text vertically, as the negative margin might be a little bit of a hack.
div.main {
border: 1px solid black;
padding: 14px;
}
div.icons {
margin-top: -1.65em;
}
div.icon {
font-size: 2rem;
color: blue;
border: 0.1px solid blue;
border-radius: 3px;
margin-left: -1px;
padding: 3px;
float: right;
}
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="main">
<div class="summary">Some text</div>
<div class="icons pull-right">
<div class="icon fa fa-line-chart">
</div>
<div class="icon fa fa-bar-chart">
</div>
</div>
</div>
You can use CSS Flexbox. And use flex's align properties. Have a look at the snippet below:
div.main {
border: 1px solid black;
padding: 14px;
display: flex;
align-items: center;
}
div.summary {
flex: 1;
}
div.icon {
font-size: 2rem;
color: blue;
border: 0.1px solid blue;
border-radius: 3px;
margin-left: -1px;
padding: 3px;
float: right;
}
<html>
<head>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div class="main">
<div class="summary">Some text</div>
<div class="icons">
<div class="icon fa fa-line-chart">
</div>
<div class="icon fa fa-bar-chart">
</div>
</div>
</div>
</body>
</html>
Hope this helps!
You still can use a custom styles when you need:
using your code:
Using Flexbox
support ie10+
div.main {
border: 1px solid black;
padding: 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
div.icon {
font-size: 2rem;
color: blue;
border: 0.1px solid blue;
border-radius: 3px;
margin-left: -1px;
padding: 3px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div class="main">
<div class="summary">Some text</div>
<div class="icons">
<div class="icon fa fa-line-chart">
</div>
<div class="icon fa fa-bar-chart">
</div>
</div>
</div>
</body>
</html>
Using Table styles
support ie8+
div.main {
border: 1px solid black;
padding: 14px;
display: table;
width: 100%;
}
div.summary {
display: table-cell;
vertical-align: middle;
}
div.icon {
font-size: 2rem;
color: blue;
border: 0.1px solid blue;
border-radius: 3px;
margin-left: -1px;
padding: 3px;
float: right;
}
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="main">
<div class="summary">Some text</div>
<div class="icons">
<div class="icon fa fa-line-chart">
</div>
<div class="icon fa fa-bar-chart">
</div>
</div>
</div>
have a look at this flexbox guide or this guide on flexbox without flexbox.
Also consider using more explicit class names that are not dependant to tags i.e. have a look at BEM
A good way is to set both, the icon and the text, in seperate element and then give them the following css property:
.mySelectors{
display: inline-block;
vertical-align: middle;
}
If flexbox is an option, just add display: flex for main and for the icons this for horizontal positioning:
div.icons {
margin-left:auto;
}
and align-items: center for vertical alignment.
See demo below:
div.main {
border: 1px solid black;
padding: 14px;
display: flex;
align-items: center;
}
div.icons {
margin-left:auto;
}
div.icon {
font-size: 2rem;
color: blue;
border: 0.1px solid blue;
border-radius: 3px;
margin-left: -1px;
padding: 3px;
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div class="main">
<div class="summary">Some text</div>
<div class="icons pull-right">
<div class="icon fa fa-line-chart">
</div>
<div class="icon fa fa-bar-chart">
</div>
</div>
</div>
</body>
</html>
You can simply use flexbox for doing this.
Apply display: flex to parent which is div.main in your case
and apply margin-left: auto to child which you want to align right side of window.
Something like below.
div.main {
border: 1px solid black;
padding: 14px;
display: flex;
}
div.icons {
margin-left: auto;
/*margin-top: -1.65em;*/
}
div.icon {
font-size: 2rem;
color: blue;
border: 0.1px solid blue;
border-radius: 3px;
margin-left: -1px;
padding: 3px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
<div class="main">
<div class="summary">Some text</div>
<div class="icons pull-right">
<div class="icon fa fa-line-chart">
</div>
<div class="icon fa fa-bar-chart">
</div>
</div>
</div>
</body>
</html>
Hope this will help you in some way (y).
Flex box reference - complete flexbox reference
Related
i tried to css this page original page. im having a problem with position. i set part 2 (each part is number in the image) position relative, part 3 position absolute and negative margin so it can be place on top of part 2. however, it affect part 4 and i dont know how to set the text below part 3 so it appear as the design
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "gt-ultra";
}
a {
text-decoration: none;
color: #000;
}
:root {
--blue: #2c2e53;
--orange: #bd945f;
--grey: #f3f3f3;
--grey_des: #acacac;
}
body {
background: var(--grey);
}
header {
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
font-family: "gt-md";
background: white;
font-weight: normal;
}
.list {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
margin-left: 424px;
text-transform: uppercase;
}
.list a:hover {
padding-bottom: 10px;
border-bottom: 5px solid var(--orange);
}
#banner {
position: relative;
}
#banner img {
width: 100%;
}
.content {
position: absolute;
top: 124px;
left: 370px;
}
.content .title {
color: var(--blue);
font-size: 46px;
text-transform: uppercase;
border: 1px solid #000;
margin-bottom: 0;
}
.content .name {
color: var(--orange);
font-size: 46px;
text-transform: uppercase;
border: 1px solid #000;
margin-bottom: 0;
padding-bottom: 0;
}
.content p {
border: 1px solid #000;
font-family: "gt-md";
margin-top: 24px;
margin-bottom: 0;
width: 562px;
}
.content button {
background: var(--orange);
color: white;
padding: 24px 34px;
border: none;
text-transform: uppercase;
margin-top: 24px;
}
.content button:hover {
cursor: pointer;
}
#catelog {
display: flex;
justify-content: center;
}
.box {
position: absolute;
margin-top: -64px;
/* width: 1286px; */
border: 1px solid #000;
background: white;
padding: 60px 120px;
display: flex;
flex-direction: column;
gap: 92px;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 148px;
border: 1px solid black;
justify-content: center;
}
.item {
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.item a {
margin-top: 10px;
}
.item img {
border: 1px solid #000;
}
.row:last-child {
}
.col {
display: flex;
flex-direction: column;
gap: 94px;
border: 1px solid #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Xưởng mộc giá tốt</title>
<!-- bootstrap -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous"
/>
<!-- fontawesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- font -->
<link rel="stylesheet" href="/cat_gd/page2/css/style.css" />
<!-- style css -->
<link rel="stylesheet" href="/cat_gd/page2/css/font.css" />
</head>
<body>
<header>
<img src="/cat_gd/page2/images/logo.png" alt="" />
<div class="list">
trang chủ
giới thiệu
sản phẩm
tin tức
đối tác
liên hệ
</div>
</header>
<!-- ./header -->
<section id="banner">
<img src="/cat_gd/page2/images/banner.png" alt="" />
<div class="content">
<h2 class="title">thế giới nội thất số 1 việt nam</h2>
<h2 class="name">hoàng hoan</h2>
<p>
Sứ mệnh của chúng tôi là kết hợp hài hòa giữa ý tưởng và mong muốn của
khách hàng, đem lại những phút giây thư giãn tuyệt vời bên gia đình và
những người thân yêu
</p>
<button>liên hệ ngay</button>
</div>
</section>
<!-- ./banner -->
<section id="catelog">
<div class="box">
<div class="row">
<div class="item">
<img
src="/cat_gd/page2/images/loai-sp/icon-phong-khach.png"
alt=""
/>
Phòng khách
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-phong-ngu.png" alt="" />
Phòng ngủ
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-phong-bep.png" alt="" />
Phòng bếp
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-phong-tam.png" alt="" />
Phòng tắm
</div>
</div>
<div class="row">
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-tre-em.png" alt="" />
Trẻ em
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-van-phong.png" alt="" />
Văn phòng
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-cau-thang.png" alt="" />
Cầu thang
</div>
<div class="item">
<img
src="/cat_gd/page2/images/loai-sp/icon-do-trang-tri.png"
alt=""
/>
Đồ trang trí
</div>
</div>
</div>
</section>
<!-- ./catalog -->
<section id="about-us">
<div class="title">
<h2>sản phẩm nổi bật</h2>
<div class="line"></div>
</div>
<div class="products">
<div class="product">
<img src="" alt="" />
<h3></h3>
<div>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
</div>
</div>
</div>
</section>
<!-- Thư viện js -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js"
integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2"
crossorigin="anonymous"
></script>
<!-- Code js -->
</body>
</html>
Don't need to set position absolute for this. Just try margin top in negative value
use position:relative and z-index to take section
Currently, my divs/elements overlap each other. How can I fix it? If you found more issues in my code let me know. I try with position and other things (eg. margin) but don't work for me or I don't know how to do it. Maybe someone also can help me how to make this menu sticky while scrolling down.
Thanks for your help!
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #282A2E;
font-family: 'Fira Code', monospace;
}
menu {
display: grid;
grid-template-columns: repeat(4, 200px);
grid-gap: 10px;
padding-bottom: 100px;
}
.menu__item {
border: 3px dotted white;
width: 150px;
padding: 10px;
text-align: center;
}
.menu__item a {
text-decoration: none !important;
color: white;
font-size: 20px;
}
#whoami #skills #projects {
padding-bottom: 50px;
}
.description__text {
border: 3px dotted#282A2E;
width: 500px;
float: left;
margin-left: 200px;
height: 399px;
text-align: center;
background-color: white;
}
.description__text h1 {
color: #282A2E;
font-size: 50px;
}
.description__text p {
color: #282A2E;
}
.section__header h1 {
width: auto;
height: 50px;
border: 3px dotted#282A2E;
background-color: white;
display: block;
margin-top: auto;
text-align: center;
padding-top: 10px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght#500&display=swap" rel="stylesheet">
<script src="hereFontAwesome" crossorigin="anonymous"></script>
</head>
<body>
<div id="container">
<menu>
<div class="menu__item">
whoami
</div>
<div class="menu__item">
skills
</div>
<div class="menu__item">
projects
</div>
<div class="menu__item">
contact
</div>
</menu>
<section id="whoami">
<img src="./images/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg"
style="border: 2px solid white; float: right; margin-right: 200px; ">
<article class="description__text">
<h1>Who am I?</h1>
<p>TEST!</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
</article>
</section>
<section id="skills">
<div class="section__header">
<h1>
My skills
</h1>
</div>
<article style="margin-top: 100px;">
<div style="color: white;display: grid;
grid-template-columns: repeat(3, 500px); gap:50px;
text-align: center; justify-content:center">
<i class="fab fa-html5 fa-5x"></i>
<i class="fab fa-css3-alt fa-5x"></i>
<i class="fab fa-sass fa-5x"></i>
<i class="fab fa-js-square fa-5x"></i>
<i class="fas fa-database fa-5x"></i>
<i class="fab fa-git fa-5x"></i>
</div>
<p style="color: white; text-align: center; margin-top: 100px;">TEXT </p>
</article>
</section id="projects">
<div class="section__header">
<h1>My projects</h1>
</div>
</section>
</div>
<script src="./scripts/script.js" async defer></script>
</body>
</html>
The main reason for the overlapping elements is because you're floating an element (article.description__text) inside an element (section#whoami) which is not floated.
If you're using floats to layout your page, you need to use float on all your elements. A more modern way to layout your page would be to use flexbox.
Add a , between these section id
#whoami,
#skills,
#projects {
padding-bottom: 50px;
}
and remove float: left; from .description__text class.It will fix the overlapping issue .
https://codesandbox.io/s/hopeful-river-kkkps?file=/style.css
I'm wanting to add some 10px spacing between two columns and anything I have tried has made the columns start a new row.
Here is what I need:
I would like for it to be 10px between the two columns but anything I have tried so far has not helped me much and it just kept pushing one col-xs-6 onto the other row.
Here is my code:
.row {
margin-left: auto!important;
margin-right: auto!important;
}
.col-xs-6,
#Office365XS,
#StreamXS,
#PowerBIXS img {
margin-bottom: 5px!important;
}
#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
margin-top: 15px!important;
margin-bottom: 5px!important;
}
.visible-xs {
padding: 0px!important;
}
hr {
margin-top: 10px!important;
margin-bottom: 0px!important;
margin-right: 15px!important;
margin-left: 15px!important;
}
#Q3,
#Q4 {
margin-top: 20px!important;
}
#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
background-color: #F2F2F2;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bolder;
padding: 5px;
}
#Office365XS,
#OneDriveXS,
#TeamsXS,
#WordXS,
#StreamXS,
#DelveXS,
#FormsXS,
#ExcelXS,
#Outlook_OnlineXS,
#PlannerXS,
#PowerPointXS,
#SharePointXS,
#YammerXS,
#PowerBIXS {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: #F2F2F2;
padding-top: 20px;
font-weight: bold;
}
#appSpacing {
margin-top: 10px!important;
margin-bottom: 10px!important
}
.num {
position: absolute;
top: 5px;
left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12" id="CollabXS">
<div>COLLABORATION</div>
</div>
</div>
<div class="col-xs-6" id="YammerXS">
<div id="appSpacing">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/ftHCqeb.png" height="50px" width="50px" />
<p>Yammer</p>
<span class="num">5</span>
</div>
</div>
<div class="col-xs-6" id="TeamsXS">
<div id="appSpacing">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/teams-tile.png" height="50px" width="50px" />
<p>Teams</p>
<span class="num">6</span>
</div>
</div>
</div>
</div>
</body>
</html>
see if this helps you, i have added a parent div for your columns and added a margin right for the first item.
.row {
margin-left: auto!important;
margin-right: auto!important;
}
.col-xs-6,
#Office365XS,
#StreamXS,
#PowerBIXS img {
margin-bottom: 5px!important;
}
#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
margin-top: 15px!important;
margin-bottom: 5px!important;
}
.visible-xs {
padding: 0px!important;
}
hr {
margin-top: 10px!important;
margin-bottom: 0px!important;
margin-right: 15px!important;
margin-left: 15px!important;
}
#Q3,
#Q4 {
margin-top: 20px!important;
}
#IntroXS,
#InfoXS,
#CollabXS,
#OfficeSuiteXS,
#VideoXS,
#AnalyticsXS {
background-color: #F2F2F2;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bolder;
padding: 5px;
}
#Office365XS,
#OneDriveXS,
#TeamsXS,
#WordXS,
#StreamXS,
#DelveXS,
#FormsXS,
#ExcelXS,
#Outlook_OnlineXS,
#PlannerXS,
#PowerPointXS,
#SharePointXS,
#YammerXS,
#PowerBIXS {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: #F2F2F2;
padding-top: 20px;
font-weight: bold;
}
#appSpacing {
margin-top: 10px!important;
margin-bottom: 10px!important
}
.num {
position: absolute;
top: 5px;
left: 10px;
}
.parent {
display: flex;
justify-content: space-between;
}
.child {
background: #148342;
}
.child:first-child {
margin-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12" id="CollabXS">
<div>COLLABORATION</div>
</div>
</div>
<div class="parent">
<div class="col-xs-6 child" id="YammerXS">
<div id="appSpacing">
<p>Yammer</p>
<span class="num">5</span>
</div>
</div>
<div class="col-xs-6 child" id="TeamsXS">
<div id="appSpacing">
<p>Teams</p>
<span class="num">6</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I simplified HTML and CSS to just show the two columns. Use border.
.col-xs-6 {
}
#YammerXS {
border-right: 5px solid #ffffff;
background-color: yellow;
}
#TeamsXS {
border-left: 5px solid #ffffff;
background-color: pink;
}
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="row container">
<div class="col-xs-6" id="YammerXS">
<p>Yammer</p>
</div>
<div class="col-xs-6" id="TeamsXS">
<p>Teams</p>
</div>
</div>
</body>
</html>
Try using class col-md-offset-2.
You can find suggested answers to your question here
Try the following:
<div class="col-xs-6" style=padding-left:5px >
<div class="col-xs-12" id="YammerXS">
<div id="appSpacing">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/ftHCqeb.png" height="50px" width="50px" />
<p>Yammer</p>
<span class="num">5</span>
</div>
</div>
</div>
<div class="col-xs-6" style=padding-right:5px>
<div class="col-xs-12" id="TeamsXS">
<div id="appSpacing">
<img src="/TrainingResourceCenter/O365Training/PublishingImages/teams-tile.png" height="50px" width="50px" />
<p>Teams</p>
<span class="num">6</span>
</div>
</div>
</div>
If all you want is a space between your columns why don't you try the bootstrap class justify-content-between?
I am editing a simple search bar. My plan is to have two buttons above the search bar, that are responsive. With one button floating to the right and one button floating to the left.
However, I cannot seem to get the buttons to stop coming out they are not inline with the search bar, almost "Out of its container".
Code:
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { clear: left; display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>
Image:
Option 1:
.Wrap your inner elements of container in another wrap, and set the margin on that element.
Option 2:
Is in snippet, apply margin to icons, and input itself. I added 3 lines of code to your snippet.
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
margin-left: 35px; /* 1) MOVING FIRST IMAGE FROM SIDE */
}
#faupload {
float: right;
margin-right: 35px; /* 2) MOVING 2ND IMAGE FROM RIGHT SIDE */
}
input {
border: 1px solid #F1F;
width: calc(100% - 70px); /* 3) 100% - HOW MUCH MARGIN DO YOU WANT AROUND INPUT? */
border-radius: 3px;
height: 35px;
margin: 0 35px; /* 4) APPLY MARGIN TO INPUT */
}
span.clear { clear: left; display: block; }
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
Here is a way to do it using flexbox, with much more less code in CSS and in HTML
.container,
.icons {
display: flex;
flex-wrap: wrap;
width: 100%
}
.icons {
justify-content: space-between
}
.searchbar {
flex: 1
}
#searchbox {
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="icons">
<div id="falist">
<i class="fa fa-list" aria-hidden="true"></i>
</div>
<div id="faupload">
<i class="fa fa-upload" aria-hidden="true"></i>
</div>
</div>
<div class="searchbar">
<input id="searchbox" type="search" />
</div>
</div>
take out that clear:left from span.clear
Snippet below
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
vertical-align:top;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</div>
</body>
</html>
.icons{
margin-left: 37px;
margin-right: 37px;
}
This works to get them on top where the red boxes are. If not exactly, just tweak them.
I managed to fix this issue by adding the following code to the element .icons hope it helps!
.icons{
margin: 0 31px;
}
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { clear: left; display: block; }
.icons{
margin: 0 31px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>