Expected output image illustration:
html, body
{
max-width: 100vw;
max-height: 100vh;
}
html *
{
font-family: Arial !important;
}
.cand1
{
width: 50%;
float:left;
}
.cand2
{
width:50%;
float: right;
}
.prof1,.prof2
{
margin:0;
margin-top: 40;
text-align: center;
}
.name
{
font-weight: bold;
}
.post
{
font-weight: bolder;
}
.card
{
background: rgb(230, 230, 230);
}
h4
{
background: rgb(230, 230, 230);
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/style_vote.css">
</head>
<body>
<div id="header"></div>
<div id="wrapper">
<div id="content">
<div class="card">
<h4 class="post">Post 1</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 1</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 2</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 2</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 3</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 4</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 3</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 5</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 6</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 4</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 7</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 8</p>
<p class="add">Class</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Current output image:
I am trying to implement a card like style with html and css.
the h4 tag in the div card produces spaces ,on using margin 0 and padding 0 in css it produces a white line ,I also couldn't find to split each card,tried margin as well as padding attributes for the card div,doesn't seem to work.
also the attributes i apply on the entire card div doesn't seem to apply on the h4 tag, modifying other attributes such as height on the card div makes the dummy image pop out of the card div section
Since your code is pretty messy i created a simple example for you. Hope it helps.
Also try to avoid !important to keep your code clean and maintainable.
section {
background: gray;
padding: 10px 25px;
margin: 0 0 25px 0;
}
section h4 {
margin: 0 0 10px 0;
}
.card-wrapper {
display: flex;
justify-content: space-around;
}
.card--text {
text-align: center;
}
<div class="container">
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
</div>
Related
I try to implement this graphic with HTML, CSS using flexbox:
Now, I have trouble with the left part. I don't know how to implement this -90 degrees rotated element. The right part (all elements that are horizontally aligned) is not the problem.
Here is what I have so far:
.container {
max-width: 1176px;
width: 100%!important;
margin: 0 auto!important;
float: none!important;
z-index: 1;
}
.pt {
padding-top: 3.5rem;
/* 56px */
}
.pb {
padding-bottom: 3rem;
/* 48px */
}
.ptms {
padding-top: 1.5rem;
/* 24px */
}
.full-width {
width: 100%;
padding: 0 1.5rem;
}
.three-col {
width: 33.3333334%;
padding: 0 1.5rem;
}
.platform-container,
.platform-card-container {
display: flex;
}
.platform-card-container .three-col,
.platform-card-container .full-width {
padding: 0 .75rem;
}
.platform-card-container a {
text-decoration: none;
}
.platform-card,
.platform-card-first {
border-radius: .5rem;
box-shadow: 0 .25rem .75rem 0 rgba(27, 27, 27, 0.24);
display: flex;
height: 100%;
}
.platform-card {
align-items: center;
}
.platform-card-first {
}
.platform-card-icon {
padding: .75rem;
border-radius: 50%;
background-color: #f5f5f5;
width: 3.5rem;
height: 3.5rem;
min-width: 3.5rem;
}
.platform-card-text {
margin-left: 1rem;
}
.platform-card-text-title {
margin-bottom: .5rem;
color: #1b1b1b;
}
.platform-card-text-desc {
color: #007095;
}
<div class="container platform-container">
<div>
<div class="pt platform-card-container">
<div class="full-width">
<a href="">
<div class="platform-card-first">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-technology-3d-printing-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Open Architecture</h4>
<div class="platform-card-text-desc">Extend systems as required</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div>
<div class="pt platform-card-container">
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-design-ruler-triangle-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">User Interface</h4>
<div class="platform-card-text-desc">Modern front-end technologies</div>
</div>
</div>
</a>
</div>
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-mobile-phone-location-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Intelligent Mobility</h4>
<div class="platform-card-text-desc">Mobile and offline access</div>
</div>
</div>
</a>
</div>
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-network-monitor-team-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Social Collaboration</h4>
<div class="platform-card-text-desc">Efficient teamwork</div>
</div>
</div>
</a>
</div>
</div>
<div class="ptms platform-card-container">
<div class="full-width">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-toys-lego-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Low-Code Suppport</h4>
<div class="platform-card-text-desc">Processes without programming</div>
</div>
</div>
</a>
</div>
</div>
<div class="ptms platform-card-container">
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-multimedia-shuffle-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Business Rule Engine</h4>
<div class="platform-card-text-desc">Intelligent decision making</div>
</div>
</div>
</a>
</div>
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-programming-module-puzzle-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Integration</h4>
<div class="platform-card-text-desc">Standard connectors and more</div>
</div>
</div>
</a>
</div>
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-transportation-road-sign-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Adaptive Case Management</h4>
<div class="platform-card-text-desc">Making processes flexible</div>
</div>
</div>
</a>
</div>
</div>
<div class="ptms platform-card-container">
<div class="full-width">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-interface-settings-cog-double-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Process Engine</h4>
<div class="platform-card-text-desc">Powerful process automation</div>
</div>
</div>
</a>
</div>
</div>
<div class="ptms platform-card-container">
<div class="full-width">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-work-presentation-projector-screen-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Modern Runtime Platform</h4>
<div class="platform-card-text-desc">Environment with container support</div>
</div>
</div>
</a>
</div>
</div>
</div>
Does anyone have a hint on how I should proceed?
I believe these styles are what you want:
text-align: right;
writing-mode: vertical-rl;
transform: rotate(180deg);
text-orientation: mixed;
https://jsfiddle.net/aycq2v8u/
edit: I noticed that the height still wasn't right. (BTW, display:grid makes this sort of thing easier). here's a revision with that fixed as well. although, this does require either ridiculous looking selectors or changes to the html, which I have done here: https://jsfiddle.net/rxgbo4a9/
changes required:
the card container of the first card (that needs to be full height) needs to be different. since it is on the side and generally different content, I marked it as an aside:
<aside class="pt platform-card-container">
then, with that, using minimal changes to your css we get the desired result:
aside.platform-card-container {
height:100%
}
aside.platform-card-container a {
display: flex;
height: 100%
}
note that specifying height instead of using flexbox is not ideal. however, since all your code makes the same mistake, I think you minimize technical debt to keep all the problems of the same type .. ie, keep using height until you are ready to remove it generally.
I have a layout in which i have header, sidebar and main section.
I have a fixed sidebar. Inside that have 35 section. Scroll bar is not covering all content. My scroll bar is visible till 32 section.
I have tried a lot but unable to do. i think problem is with .sidenav property top
Here is my code
PenCode Link
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Accordion - Collapse content</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
html {
height: 100%;
}
body {
height: 100%;
}
.sidenav {
height: 100%;
width: 300px;
position: fixed;
z-index: 1;
top: 50;
left: 0;
background-color: white;
overflow-x: hidden;
overflow-y: auto;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 32px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 300px;
/* Same as the width of the sidenav */
font-size: 28px;
/* Increased text to enable scrolling */
padding: 0px 10px;
}
</style>
<script>
$(function () {
$("#accordion").accordion({
collapsible: true,
heightStyle: "content",
active: false
});
$( "h3" ).click(function() {
$('.sidenav').scrollTop(document.getElementById(this.id).offsetTop);
});
});
</script>
</head>
<body>
<div class="header" style="min-height:100px; border: 1px solid black;">
<h1>Header</h1>
</div>
<div class="sidenav">
<div id="accordion">
<h3 id="w1">Section 1</h3>
<div>
</div>
<h3 id="w2">Section 2</h3>
<div>
</div>
<h3 id="w3">Section 3</h3>
<div>
</div>
<h3 id="w4">Section 4</h3>
<div>
<p></p>
</div>
<h3 id="w5">Section 5</h3>
<div>
<p></p>
</div>
<h3 id="w6">Section 6</h3>
<div>
<p></p>
</div>
<h3 id="w7">Section 7</h3>
<div>
<p></p>
</div>
<h3 id="w8">Section 8</h3>
<div>
<p></p>
</div>
<h3 id="w9">Section 9</h3>
<div>
<p></p>
</div>
<h3 id="w10">Section 10</h3>
<div>
<p></p>
</div>
<h3 id="w11">Section 11</h3>
<div>
<p></p>
</div>
<h3 id="w12">Section 12</h3>
<div>
<p></p>
</div>
<h3 id="w13">Section 13</h3>
<div>
<p></p>
</div>
<h3 id="w14">Section 14</h3>
<div>
<p></p>
</div>
<h3 id="w15">Section 15</h3>
<div>
<p></p>
</div>
<h3 id="w16">Section 16</h3>
<div>
<p></p>
</div>
<h3 id="w17">Section 17</h3>
<div>
<p>
</p>
</div>
<h3 id="w18">Section 18</h3>
<div>
<p></p>
</div>
<h3 id="w19">Section 19</h3>
<div>
<p></p>
</div>
<h3 id="w20">Section 20</h3>
<div>
<p></p>
</div>
<h3 id="w21">Section 21</h3>
<div>
<p></p>
</div>
<h3 id="w22">Section 22</h3>
<div>
<p></p>
</div>
<h3 id="w23">Section 23</h3>
<div>
<p></p>
</div>
<h3 id="w24">Section 24</h3>
<div>
<p></p>
</div>
<h3 id="w32">Section 32</h3>
<div>
<p></p>
</div>
<h3 id="w26">Section 26</h3>
<div>
<p></p>
</div>
<h3 id="w27">Section 27</h3>
<div>
<p></p>
</div>
<h3 id="w28">Section 28</h3>
<div>
<p></p>
</div>
<h3 id="w29">Section 29</h3>
<div>
<p></p>
</div>
<h3 id="w30">Section 30</h3>
<div>
<p></p>
</div>
<h3 id="w31">Section 31</h3>
<div>
<p></p>
</div>
<h3 id="w32">Section 32</h3>
<div>
<p></p>
</div>
<h3 id="w33">Section 33</h3>
<div>
<p></p>
</div>
<h3 id="w34">Section 34</h3>
<div>
<p></p>
</div>
<h3 id="w35">Section 35</h3>
<div>
<p></p>
</div>
</div>
</div>
<div class="main">
<h2 style="text-align: center;">Main Section</h2>
</div>
</body>
</html>
In your .sidenav class replace this
height: 100%;
with
height: calc(100% - 100px);
Hint: You don't need the top: 50; and left: 0;.
You just need to add height: calc(100% - 100px); in your sidenav class. your sidenav was fixed, but you have a header which height is 100px, but you added style to your HTML and body that you have 100% height, that's why the sidenav was not covering fully because of the header have 100px
$(function () {
$("#accordion").accordion({
collapsible: true,
heightStyle: "content",
active: false
});
});
html {
height: 100%;
}
body {
height: 100%;
}
.sidenav {
height: calc(100% - 100px);
width: 300px;
position: fixed;
z-index: 1;
top: 50;
left: 0;
background-color: white;
overflow-x: hidden;
overflow-y: auto;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 32px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 300px;
/* Same as the width of the sidenav */
font-size: 28px;
/* Increased text to enable scrolling */
padding: 0px 10px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="header" style="min-height:100px; border: 1px solid black;">
<h1>Header</h1>
</div>
<div class="sidenav">
<div id="accordion">
<h3 id="w1">Section 1</h3>
<div>
</div>
<h3 id="w2">Section 2</h3>
<div>
</div>
<h3 id="w3">Section 3</h3>
<div>
</div>
<h3 id="w4">Section 4</h3>
<div>
<p></p>
</div>
<h3 id="w5">Section 5</h3>
<div>
<p></p>
</div>
<h3 id="w6">Section 6</h3>
<div>
<p></p>
</div>
<h3 id="w7">Section 7</h3>
<div>
<p></p>
</div>
<h3 id="w8">Section 8</h3>
<div>
<p></p>
</div>
<h3 id="w9">Section 9</h3>
<div>
<p></p>
</div>
<h3 id="w10">Section 10</h3>
<div>
<p></p>
</div>
<h3 id="w11">Section 11</h3>
<div>
<p></p>
</div>
<h3 id="w12">Section 12</h3>
<div>
<p></p>
</div>
<h3 id="w13">Section 13</h3>
<div>
<p></p>
</div>
<h3 id="w14">Section 14</h3>
<div>
<p></p>
</div>
<h3 id="w15">Section 15</h3>
<div>
<p></p>
</div>
<h3 id="w16">Section 16</h3>
<div>
<p></p>
</div>
<h3 id="w17">Section 17</h3>
<div>
<p>
</p>
</div>
<h3 id="w18">Section 18</h3>
<div>
<p></p>
</div>
<h3 id="w19">Section 19</h3>
<div>
<p></p>
</div>
<h3 id="w20">Section 20</h3>
<div>
<p></p>
</div>
<h3 id="w21">Section 21</h3>
<div>
<p></p>
</div>
<h3 id="w22">Section 22</h3>
<div>
<p></p>
</div>
<h3 id="w23">Section 23</h3>
<div>
<p></p>
</div>
<h3 id="w24">Section 24</h3>
<div>
<p></p>
</div>
<h3 id="w32">Section 32</h3>
<div>
<p></p>
</div>
<h3 id="w26">Section 26</h3>
<div>
<p></p>
</div>
<h3 id="w27">Section 27</h3>
<div>
<p></p>
</div>
<h3 id="w28">Section 28</h3>
<div>
<p></p>
</div>
<h3 id="w29">Section 29</h3>
<div>
<p></p>
</div>
<h3 id="w30">Section 30</h3>
<div>
<p></p>
</div>
<h3 id="w31">Section 31</h3>
<div>
<p></p>
</div>
<h3 id="w32">Section 32</h3>
<div>
<p></p>
</div>
<h3 id="w33">Section 33</h3>
<div>
<p></p>
</div>
<h3 id="w34">Section 34</h3>
<div>
<p></p>
</div>
<h3 id="w35">Section 35</h3>
<div>
<p></p>
</div>
</div>
</div>
<div class="main">
<h2 style="text-align: center;">Main Section</h2>
</div>
I'm trying to create a 'Meet the Team' intranet page, but I just can't seem to figure out the best way to do it. So, firstly, here is my code;
`<html>
<head>
<h1>Meet the Team</h1>
</head>
<body>
<h3>Joe Bloggs</h3>
<div id="joe" style="position:relative;width:300px;height:350px;background-color:#959595;">
<p>Test paragraph</p>
</div>
<h3>John Smith</h3>
<div id="john" style="position:relative;width:300px;height:350px;background-color:#959595;">
<p>Test paragraph</p>
</div>
<h3>Jane Doe</h3>
<div id="jane" style="position:static;top:50%;float:right;width:300px;height:350px;background-color:#959595;">
<p>Test paragraph</p>
</div>
</body>
</html>`
Now, basically the 'divs' when set to relative are all just going down the page, but I want 3 in a row and then going down in columns which will display the persons name and then a description of their role. So..
123
456
789
I've tried using the other position elements such as absolute, but it doesn't seem to work to put the divs side by side. I also want to know the best way on including the <h3> in the div but not having the background color on it. And finally, I know that inline CSS is probably not the best thing to use here, but I wanted slightly different background colors for each div.
Is that what are you looking for?
#team{
background-color: #e7eaea;
width: 100%;
}
#team > div{
background-color: #a0c3ce;
margin: 1%;
width: 31%;
float: left;
}
h1, h3{
width: 100%;
text-align: center;
}
<html>
<head>
<title>Meet the Team</title>
</head>
<body>
<h1>Meet the Team</h1>
<div id="team">
<div id="joe">
<h3>Joe Bloggs</h3>
<p>Test paragraph</p>
</div>
<div id="john">
<h3>John Smith</h3>
<p>Test paragraph</p>
</div>
<div id="jane">
<h3>Jane Doe</h3>
<p>Test paragraph</p>
</div>
</div>
</body>
</html>
You need to do two things :
add in each div's
display:inline-block;
Secondly, its good to make a css class and use that for each div instead of copying css into all.
For example
<style>
.box{width:300px;height:350px;background-color:#959595;display:inline;}
</style>
In HTML,
<div id="joe" class="box">some content here</div>
<div id="john" class="box">some content here</div>
<div id="jane" class="box">some content here</div>
Here is one more solution
.info {
display: inline-block;
width: 32%;
height: 300px;
margin-top: 5px;
text-align: center;
background: orange;
}
.info h3 {
display: block;
background: lightgreen;
margin: 0;
}
.info p{
display: block;
padding-top: 10px;
margin: 0;
}
<h1>Meet the Team</h1>
<div id="joe" class="info">
<h3>Joe Bloggs</h3>
<p>Test paragraph</p>
</div>
<div id="john" class="info">
<h3>John Smith</h3>
<p>Test paragraph</p>
</div>
<div id="jane" class="info">
<h3>Jane Doe</h3>
<p>Test paragraph</p>
</div>
<div id="john" class="info">
<h3>John Smith</h3>
<p>Test paragraph</p>
</div>
<div id="jane" class="info">
<h3>Jane Doe</h3>
<p>Test paragraph</p>
</div>
add display:inline-block; in every <div>'s style
There are many ways to do what you want. One is to create div 'rows' to wrap every line 3 divs:
<div class="row" style="width: 100%">
<div class="col" style="width: 33%; float: left">1</div>
<div class="col" style="width: 33%; float: left">2</div>
<div class="col" style="width: 33%; float: left">3</div>
</div>
<div class="row" style="width: 100%">
<div class="col" style="width: 33%; float: left">4</div>
<div class="col" style="width: 33%; float: left">5</div>
<div class="col" style="width: 33%; float: left">6</div>
</div>
Each 'col' element should be a fraction of the container (33% in this case). Yo can do it better defining a style for rows and cols:
.row {
width: 100%;
}
.col {
width: 33%;
float: left;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="row">
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</div>
This can be solved as shown hereby:
#team {
width: 100%;
}
#team > div {
width: 31%;
margin: 1%;
float: left;
background-color:#959595;
}
<html>
<head>
<h1>Meet the Team</h1>
</head>
<body>
<div id="team">
<div id="joe">
<h3>Joe Bloggs</h3>
<p>Test paragraph</p>
</div>
<div id="john">
<h3>John Smith</h3>
<p>Test paragraph</p>
</div>
<div id="jane">
<h3>Jane Doe</h3>
<p>Test paragraph</p>
</div>
</div>
</body>
</html>
But instead of applying the css you can use the twitter bootstrap which already has this implemented in a much easier way.
You can take help from the code below:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1>Meet the Team</h1>
</head>
<body>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<h3>Joe Bloggs</h3>
<p>Test paragraph</p>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<h3>John Smith</h3>
<p>Test paragraph</p>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<h3>Jane Doe</h3>
<p>Test paragraph</p>
</div>
</div>
</body>
</html>
In this code only one row is created but you can create multiple rows and divide it into columns.
For further help refer, [1]: https://getbootstrap.com/examples/grid/
at the moment I have two content boxes which are placed on seperate lines and they are not connected. If possible, I would like to bring these two boxes to be the same on the same line as one another and then add padding to the sides of these boxes. An example has been shown in the image below of what I have currently and what I would like to have.
My code is as follows:
HTML -
<h1 id="LogInHeader">LOGIN</h1>
<div class="form-group">
<input type="text" id="txtGRC" placeholder="Email Address">
<input type="text" id="txtGRC" placeholder="Password">
</div>
<button type="submit" id="GenerateReportButton" class="btn btn-default">SECURE LOGIN</button>
<p id="LogInForgottenPassword" style="color:white">Forgotten Password</p>
</form>
</content>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Microscope.png" />
<h2 id="CarouselHeader">REAL-TIME REPORTING ON YOUR RECOVERY AUDIT</h2>
<p id="CarouselText">Our secure client area lets you view and generate reports of the auditing process in progress </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Headache%20pill.png" />
<h2 id="CarouselHeader">FAST, QUICK ACTION</h2>
<p id="CarouselText">Sick of losing proft? Auditing given you a headache? Let us take care of that for you </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Trolleys.png" />
<h2 id="CarouselHeader">PRIVATE, PUBLIC, WE DO IT ALL</h2>
<p id="CarouselText">Worried that we don't cover your business? We cover a wide ranges from private to public </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls --> <a href="#carousel-example" data-slide="prev">
</a>
<a href="#carousel-example" data-slide="next">
</a>
</div>
CSS -
.carousel-content {
color:black;
display:flex;
align-items:center;
text-align: center;
}
#carousel-example{
width: 500px;
height: 200px;
}
#CarouselHeader{
font-weight: bold;
font-size: 18px;
}
#CarouselText{
font-size: 11px;
color: #6d6e70;
}
#CarouselLink{
font-size: 12px;
text-decoration: underline;
}
#CarouselLink a:link{
color: #4f7f64;
}
#LogInForgottenPassword{
color: white;
font-size: 11px;
text-decoration: underline;
padding-bottom: 25px;
}
#LogInHeader{
color: white;
font-weight: bold;
font-size: 22px;
padding-top: 40px;
}
#LogInMain {
border-color: red;
border-radius: 25px;
color: white;
}
Use display and give it the setting inline-block:
http://www.w3schools.com/cssref/pr_class_display.asp
It is also possible with the float property:
http://www.w3schools.com/cssref/pr_class_float.asp
As you are already using the display: flex option in your code, let's take that and use it.
.container {
display: flex;
}
.item {
height: 100px;
border: 1px solid #333;
flex: 1;
flex-direction: row;
/* flex-direction: row is the initial value */
}
<div class="container">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
</div>
Use following
.inl{ border-width:thick;
border-style:dashed;
border-color:Black;
display:inline-block;
width:100px;
}
<div class="inl">abc
</div>
<div class="inl">abc
</div>
}
.carousel-inner { display: flex; justify-content: space-between; }
.carousel-inner .item { width: 25%; }
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Microscope.png" />
<h2 id="CarouselHeader">REAL-TIME<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Microscope.png" />
<h2 id="CarouselHeader">REAL-TIME REPORTING ON YOUR RECOVERY AUDIT</h2>
<p id="CarouselText">Our secure client area lets you view and generate reports of the auditing process in progress </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Headache%20pill.png" />
<h2 id="CarouselHeader">FAST, QUICK ACTION</h2>
<p id="CarouselText">Sick of losing proft? Auditing given you a headache? Let us take care of that for you </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<img src="Content/Images/Carousel/Trolleys.png" />
<h2 id="CarouselHeader">PRIVATE, PUBLIC, WE DO IT ALL</h2>
<p id="CarouselText">Worried that we don't cover your business? We cover a wide ranges from private to public </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
</div>
</div>
</div>
</div> REPORTING ON YOUR RECOVERY AUDIT</h2>
<p id="CarouselText">Our secure client area lets you view and generate reports of the auditing process in progress </p>
<p id="CarouselLink">Find out more ></p>
</div>
</div>
I have this setup of my elements http://codepen.io/Py89/pen/QbKgWv?editors=110
HTML:
<div class="container">
<div class="item-container" id="right-block">
<div class="row">
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
</div>
<!-- #Row -->
<div class="row">
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
</div>
<!-- #Row -->
</div>
<!-- #Item container -->
<div class="item-container" id="left-block">
<div class="row">
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
<h3>More text</h3>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
<h3>More text</h3>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
<h3>More text</h3>
</div>
</div>
<!-- #Item -->
</div>
<!-- #Row -->
<div class="row">
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
<div class="media">
<div class="media__item">
<img src="http://placekitten.com/g/200/300" alt="" />
</div>
<div class="media__body">
<h2>Some text</h2>
</div>
</div>
<!-- #Item -->
</div>
<!-- #Row -->
</div>
<!-- #Item container -->
</div>
CSS:
.container {
*zoom: 1;
}
.container:before, .container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
width: 80%;
margin: 20px auto;
background: rgba(100, 100, 100, 0.4);
}
.item-container {
float: right;
width: 50%;
}
.media {
background: rgba(30, 40, 50, 0.4);
float: right;
overflow: hidden;
margin: 0 10px 50px;
padding: 10px;
}
.media .media__item {
width: 100%;
}
.media .media__item img {
margin: 0 auto;
}
.media .media__body {
width: 100%;
padding-top: 10px;
overflow: hidden;
}
h2 {
margin: 0 0 10px;
text-align: center;
}
h3 {
margin: 0;
text-align: center;
}
#left-block {
background: rgba(200, 10, 50, 0.3);
}
#right-block {
background: rgba(50, 200, 100, 0.3);
}
Is it at all possible for the divs in the second row of the right to get pushed down the same amount as the divs on the left ?
I know it can be done with jQUery / JavaScript, but i'm interested if it can be done, purely by CSS.
Keep in mind that I cannot change the base HTML markup.
In this case , the easiest way is to give a height to container.
.media {
background: rgba(30, 40, 50, 0.4);
float: right;
overflow: hidden;
margin: 0 10px 50px;
padding: 10px;
height:420px;//add this
}
//could also place it on '.media .media__body'
http://codepen.io/maio/pen/PqGjam
There are two angles here, regarding the type of content on the page:
Dynamic content:
With the provided html layout, you can't obtain
the desired result. That's because u have two different container
nodes with (presumably) dynamic content, and no way to link them in
css.
Static content:
As maioman said, you can easily set a height to the
container, but i recommend setting to the row class.
Or, you can add:
<h3><br></h3>
to the divs where there is only one line of text. Additional break would be rendered as two lines of text below the pics so the heights would match each other exactly. Like this:
THIS IS YOUR DIVS WITH TWO LINES OF TEXT:
<h2>Some text</h2>
<h3>More text</h3>
AND FOR THE DIVS WITH ONE LINE OF TEXT ADD THIS:
<h2>Some text</h2>
<h3><br></h3>
I hope it helps....