Side by side with css - html
I aligned my div to left but there is something wrong with my aligned div that I don't understand.When I aligned my div I'm seeing they are not aligned correctly..what's wrong with my code ?
please click to see online demo
body {
background: #ccc;
}
#box {
width: 960px;
margin: 20px auto;
}
.otel-list-box {
position: relative;
background: #FFF;
border-radius: 5px;
width: 47%;
float: left;
margin-bottom: 30px;
}
figure {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.hotel-links {
padding: 15px 15px 18px 25px;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.hotel-links ul li {
padding: 7px 0;
border-bottom: 1px solid #d6d6d6;
}
.hotel-links ul li a {
display: block;
font-size: 13px;
color: #000;
-webkit-transition: color linear 0.4s;
-moz-transition: color linear 0.4s;
transition: color linear 0.4s;
}
.otel-list-box .otel-list-content figure img {
border-radius: 5px 5px 0 0;
width: 100%;
border-bottom: 1px solid #faa82b;
height: 172px;
}
.otel-list-box:nth-child(2n) {
float: right;
}
<div id="box">
<div class="otel-list-box">
</div>
<!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div>
<!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
</div>
</div>
<!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div>
<!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
</div>
</div>
<!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div>
<!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div>
<!-- each item-->
</div>
there are a few solutions to this problem.
use FlexBox
add display:flex to #box ( the container of the boxes ) , and then add width:calc(50% - 30px) to the otel-list-box . 30px because you will set margin left and right of 15px to each box
see snippet below or jsFiddle
body{
background:#ccc;
}
#box{
width:960px;
margin:20px auto;
display:flex;
flex-wrap:wrap;
}
.otel-list-box{
position: relative;
background: #FFF;
border-radius: 5px;
width: calc(50% - 30px);
margin:0 15px 30px;
}
figure{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.hotel-links {
padding: 15px 15px 18px 25px;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.hotel-links ul li {
padding: 7px 0;
border-bottom: 1px solid #d6d6d6;
}
.hotel-links ul li a {
display: block;
font-size: 13px;
color: #000;
-webkit-transition: color linear 0.4s;
-moz-transition: color linear 0.4s;
transition: color linear 0.4s;
}
.otel-list-box .otel-list-content figure img {
border-radius: 5px 5px 0 0;
width: 100%;
border-bottom: 1px solid #faa82b;
height: 172px;
}
.otel-list-box:nth-child(2n){
}
<div id="box">
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div><!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
</div>
</div><!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div><!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
</div>
</div><!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
</div>
</div><!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</div><!-- each item-->
</div>
Using bootstrap , it uses FlexBox but it's better to build your whole HTML structure with bootstrap, it's more responsive and easy to use
body{
background:#ccc;
}
#box{
width:960px;
margin:20px auto;
}
.otel-list-box{
position: relative;
background: #FFF;
border-radius: 5px;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap:wrap;
}
figure{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.hotel-links {
padding: 15px 15px 18px 25px;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.hotel-links ul li {
padding: 7px 0;
border-bottom: 1px solid #d6d6d6;
}
.hotel-links ul li a {
display: block;
font-size: 13px;
color: #000;
-webkit-transition: color linear 0.4s;
-moz-transition: color linear 0.4s;
transition: color linear 0.4s;
}
.otel-list-box .otel-list-content figure img {
border-radius: 5px 5px 0 0;
width: 100%;
border-bottom: 1px solid #faa82b;
height: 172px;
}
.otel-list-box:nth-child(2n){
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="box" class=" row row-eq-height">
<div class="otel-list-box col-sm-6">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div><!-- each item-->
<div class="otel-list-box col-sm-6">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
</div>
</div><!-- each item-->
<div class="otel-list-box col-sm-6">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div><!-- each item-->
<div class="otel-list-box col-sm-6">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
</div>
</div><!-- each item-->
<div class="otel-list-box col-sm-6">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
</div>
</div><!-- each item-->
<div class="otel-list-box col-sm-6">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</div><!-- each item-->
</div>
using display:table . this is more tricky as you need to insert another div, that wraps 2 otel-list-boxes
display:table on #box ; display:table-row on boxRow and display:table-cell on .otel-list-box
body{
background:#ccc;
}
#box{
width:960px;
margin:20px auto;
table-layout: fixed;
display:table;
}
.otel-list-box{
position: relative;
background: #FFF;
border-radius: 5px;
width: calc(50% - 30px);
margin:0 15px 30px;
display:table-cell;
}
.boxRow {
display:table-row
}
figure{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.hotel-links {
padding: 15px 15px 18px 25px;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.hotel-links ul li {
padding: 7px 0;
border-bottom: 1px solid #d6d6d6;
}
.hotel-links ul li a {
display: block;
font-size: 13px;
color: #000;
-webkit-transition: color linear 0.4s;
-moz-transition: color linear 0.4s;
transition: color linear 0.4s;
}
.otel-list-box .otel-list-content figure img {
border-radius: 5px 5px 0 0;
width: 100%;
border-bottom: 1px solid #faa82b;
height: 172px;
}
.otel-list-box:nth-child(2n){
}
<div id="box">
<div class="boxRow">
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div><!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
</div>
</div><!-- each item-->
</div>
<div class="boxRow">
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div><!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
</div>
</div><!-- each item-->
</div>
<div class="boxRow">
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
</div>
</div><!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</div><!-- each item-->
</div>
</div>
using JQ to make cols equal in height + float:left
var otel = $(".otel-list-box"),
highest = 0;
$(otel).each(function(){
if($(this).height() > highest){
highest = $(this).height();
}
});
$(otel).height(highest);
body{
background:#ccc;
}
#box{
width:960px;
margin:20px auto;
}
.otel-list-box{
position: relative;
background: #FFF;
border-radius: 5px;
width: calc(50% - 30px);
margin:0 15px 30px;
float:left;
}
figure{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.hotel-links {
padding: 15px 15px 18px 25px;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.hotel-links ul li {
padding: 7px 0;
border-bottom: 1px solid #d6d6d6;
}
.hotel-links ul li a {
display: block;
font-size: 13px;
color: #000;
-webkit-transition: color linear 0.4s;
-moz-transition: color linear 0.4s;
transition: color linear 0.4s;
}
.otel-list-box .otel-list-content figure img {
border-radius: 5px 5px 0 0;
width: 100%;
border-bottom: 1px solid #faa82b;
height: 172px;
}
.otel-list-box:nth-child(2n){
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<div class="boxRow">
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div><!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
</div>
</div><!-- each item-->
</div>
<div class="boxRow">
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div><!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
</div>
</div><!-- each item-->
</div>
<div class="boxRow">
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
</div>
</div><!-- each item-->
<div class="otel-list-box">
<div class="hotel-list-content">
<figure>
<img src="http://betacontent.anitur.com.tr/web/images/300x172/2017-04/otel_anasayfa_YBlzcqup5KUoDQG7CE8o2-cocuk-ucretsiz.png" />
</figure>
<div class="hotel-links">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</div><!-- each item-->
</div>
</div>
Related
Overflow-y changes the color of the text
I am learning HTML and CSS and I have the following issue, I have a long list of items and I am applying overflow-y with external CSS. The problem is that it changes the font color of the list. I would also be grateful for any info on how to style the scrollbar and only be visible when scrolling.
#main-div {
position: relative;
}
#container-div {
position: absolute;
right: 0;
margin-top: 15%;
margin-right: 10%;
overflow-y: auto;
width: 600px;
height: 350px;
}
.main-text {
color: aliceblue;
mix-blend-mode: difference;
}
<div id="main-div">
<div id="container-div">
<div id="list" class="main-text">
<h4>title 1</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 2</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 3</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 4</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 5</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 6</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>
</div>
I didn't see the font-color changing. But to style the scrollbar, check the css snippet below.
#main-div {
position: relative;
}
#container-div {
position: absolute;
right: 0;
margin: 10%;
overflow-y: auto;
width: 600px;
height: 300px;
background: lightblue;
}
/* Styling Scroll Bar */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #c1c1c1;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<div id="main-div">
<div id="container-div">
<div id="list">
<h4>title 1</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 2</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 3</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 4</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 5</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 6</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>
</div>
I think you just made it with the wrong class.
since you set the height on the container-div, you should use your mix-blend-mode on the same one.
Try this:
#main-div {
position: relative;
}
#container-div {
position: absolute;
right: 0;
margin-top: 15%;
margin-right: 10%;
overflow-y: auto;
width: 300px;
height: 150px;
background-color: #e2e2e2;
color: aliceblue;
mix-blend-mode: difference;
}
<div id="main-div">
<div id="container-div">
<div id="list">
<h4>title 1</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 2</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 3</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 4</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 5</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
<h4>title 6</h4>
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>
</div>
I've added a background to see the aliceblue color
Svg display probems with column-count property
I have a list of blocks I want to display in multiple columns (at least 2 columns).
In my blocks I have a header with a title and a svg icon.
If I use the css property "column-count" to split content in columns, some svg disapear on Google Chrome. (no problem with Firefox)
Here is a demo :
section {
width: 500px;
margin-right: 100px;
float: left;
}
.container {
border: 1px solid black;
margin: 0 auto;
padding: 0.25em;
margin-top: 1.25em;
}
.container.withcolumns {
column-count: 2;
column-gap: 2em;
}
.block {
break-inside: avoid-column;
}
.block header {
font-weight: bold;
padding: 0.5em 0;
border-bottom: 1px solid grey;
}
.block header svg {
width: 15px;
height: 15px;
margin-right: 0.5em;
}
ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin: 0.25em 0;
}
<section>
<h1>First block without columns</h1>
<div class='container'>
<div class='block'>
<header>
<svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>
Block 1</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 2</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 3</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 4</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</section>
<section>
<h1>Same code with columns</h1>
<div class='container withcolumns'>
<div class='block'>
<header>
<svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>
Block 1</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 2</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 3</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 4</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</section>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="svg-capacity" viewBox="0 0 17.293 20">
<path d="M2674.323,1341a2.012,2.012,0,1,0-1.437-.575,2,2,0,0,0,1.437.575Zm1.52,1h-3.053a2.012,2.012,0,0,0-2.027,2v5.494h1.52V1357h4.067v-7.507h1.533V1344a2.022,2.022,0,0,0-2.039-2Zm-11.693-1a2,2,0,1,0-2.027-2,2.023,2.023,0,0,0,2.027,2Zm1.52,1h-3.04a2.015,2.015,0,0,0-2.04,2v5.493h1.533V1357h4.067v-7.507h1.52V1344a2.015,2.015,0,0,0-2.04-2Z" transform="translate(-2660.59 -1337)"></path>
</symbol>
</svg>
Does anyone have an idea how to fix this?
Regards
I had the exact same problem and finally after searching for a while, the following made Chrome render my SVGs correctly:
-webkit-backface-visibility: hidden;
In your code above if you add the following, it works:
.block header {
font-weight: bold;
padding: 0.5em 0;
border-bottom: 1px solid grey;
-webkit-backface-visibility: hidden;
}
It's for sure a bug but here is a different code using the SVG as background to achieve the same without the bug:
section {
width: 500px;
margin-right: 100px;
float: left;
}
.container {
border: 1px solid black;
margin: 0 auto;
padding: 0.25em;
margin-top: 1.25em;
}
.container.withcolumns {
column-count: 2;
column-gap: 2em;
}
.block {
break-inside: avoid-column;
}
.block header {
font-weight: bold;
padding: 0.5em 18px;
border-bottom: 1px solid grey;
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.293 20" width="15"> <path d="M2674.323,1341a2.012,2.012,0,1,0-1.437-.575,2,2,0,0,0,1.437.575Zm1.52,1h-3.053a2.012,2.012,0,0,0-2.027,2v5.494h1.52V1357h4.067v-7.507h1.533V1344a2.022,2.022,0,0,0-2.039-2Zm-11.693-1a2,2,0,1,0-2.027-2,2.023,2.023,0,0,0,2.027,2Zm1.52,1h-3.04a2.015,2.015,0,0,0-2.04,2v5.493h1.533V1357h4.067v-7.507h1.52V1344a2.015,2.015,0,0,0-2.04-2Z" transform="translate(-2660.59 -1337)"></path></svg>') left top 0.5em/15px 15px no-repeat;
}
ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin: 0.25em 0;
}
<section>
<h1>First block without columns</h1>
<div class='container'>
<div class='block'>
<header>
Block 1</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class='block'>
<header>Block 2</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header>Block 3</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header>Block 4</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</section>
<section>
<h1>Same code with columns</h1>
<div class='container withcolumns'>
<div class='block'>
<header>
Block 1</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class='block'>
<header>Block 2</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header>Block 3</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header>Block 4</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</section>
</div>
There is an error in your markup where you are closing the section before closing the last block. Still this is not fixing the problem.
This probably is a bug. In order to make it work I've removed the transformation and recalculated the d attribute.
section {
width: 500px;
margin-right: 100px;
float: left;
}
.container {
border: 1px solid black;
margin: 0 auto;
padding: 0.25em;
margin-top: 1.25em;
}
.container.withcolumns {
column-count: 2;
column-gap: 2em;
}
.block {
break-inside: avoid-column;
}
.block header {
font-weight: bold;
padding: 0.5em 0;
border-bottom: 1px solid grey;
}
.block header svg {
width: 15px;
height: 15px;
margin-right: 0.5em;
}
ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin: 0.25em 0;
}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="svg-capacity" viewBox="0 0 17.293 20">
<path d="M13.73,4a2.012,2.012,0,1,0,-1.437,-0.575a2,2,0,0,0,1.437,0.575zm1.52,1h-3.053a2.012,2.012,0,0,0,-2.027,2v5.494h1.52v7.506h4.067v-7.507h1.533v-5.493a2.022,2.022,0,0,0,-2.039,-2zm-11.693,-1a2,2,0,1,0,-2.027,-2a2.023,2.023,0,0,0,2.027,2zm1.52,1h-3.04a2.015,2.015,0,0,0,-2.04,2v5.493h1.533v7.507h4.067v-7.507h1.52v-5.493a2.015,2.015,0,0,0,-2.04,-2z" ></path>
</symbol>
</svg>
<section>
<h1>Same code with columns</h1>
<div class='container withcolumns'>
<div class='block'>
<header>
<svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>
Block 1</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 2</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 3</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 4</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</section>
Horizontally Align ULs In Different
I have the below code which displays list items horizontally.
However, the horizontal alignment gets broken up between the ULs. Is it possible to have all of the list items aligned across the ULs? ie so that item 6 appears below item 2 etc.
div,
ul,
li {
margin: 0;
padding: 0;
}
li {
width: 24%;
display: inline-block;
border: 1px solid red;
margin-bottom: 20px;
}
ul {
width: 100%;
display: inline-block;
}
.container {
width: 1400px;
}
<div class="container">
<div class="firstdiv">
<ul class="firstul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div class="seconddiv">
<ul class="secondul">
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
<div class="thirddiv">
<ul class="thirdul">
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
</ul>
</div>
</div>
Assumming that you need to keep your HTML structure like that, apply display: inline to your lists and their div wrappers:
div,
ul,
li {
margin: 0;
padding: 0;
}
li {
width: 24%;
display: inline-block;
border: 1px solid red;
margin-bottom: 20px;
}
.container div,
.container ul {
display: inline;
}
<div class="container">
<div class="firstdiv">
<ul class="firstul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div class="seconddiv">
<ul class="secondul">
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
<div class="thirddiv">
<ul class="thirdul">
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
</ul>
</div>
</div>
A future alternative may be to apply display:grid to your container and display: contents to its descendant <div> and <ul> elements. Granted, the support for display: contents is limited at the moment.
.container {
display: grid;
grid-template-columns: repeat(4, calc(25% - 7.5px));
grid-gap: 20px 10px;
}
.container div,
.container ul {
display: contents;
}
.container li {
list-style: none;
outline: 1px solid #f00;
}
<div class="container">
<div class="firstdiv">
<ul class="firstul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div class="seconddiv">
<ul class="secondul">
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
<div class="thirddiv">
<ul class="thirdul">
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
</ul>
</div>
</div>
hover the sidebar vertical menu display a submenu in bootstrap material design
How to make a display of three columns as one submenu while hovering each menu. <div class="container"> <div class="row"> <div class="col-sm-4"> <ul class="vertical-nav"> <li>Link 1</li> <li>Link 2 <ul class="sub-menu"> <li>Sub Link 1</li> <li>Sub Link 2</li> </ul> </li> </ul> </div> </div> </div> I want to make the menu like this below image
Please see below. Hope this helps.
$('.vertical-nav li a').mouseover(function() {
$(this).parent().find('.sub-menu').show();
})
.mouseout(function() {
$(this).parent().find('.sub-menu').hide();
});
.sub-menu {
display:none;
}
.vertical-nav li, .sub-menu li {
list-style:none;
}
.column {
float:left;
width: 100px;
}
.title {
padding-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="vertical-nav">
<li>Link 1</li>
<li>Link 2
<ul class="sub-menu">
<div class='column'>
<li class='title'>Style</li>
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</div>
<div class='column'>
<li class='title'>Subject</li>
<li>Sub Link 3</li>
<li>Sub Link 4</li>
</div>
<div class='column'>
<li class='title'>Medium</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</div>
</ul>
</li>
</ul>
</div>
</div>
</div>
How to center text in lists?
I'm trying to make a website footer inspired by the w3schools 4 column footer, however, the text in the li tags go off to the right a little (compared to the headings).
CSS:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
#footer {
width: 100%;
margin: auto;
}
.footerFloat {
width: 100%;
}
#media all and (min-width: 950px) {
#footer {
width: 980px;
margin: auto;
}
.footerFloat {
width: 25%;
float: left;
display: block;
}
}
#wrapper {
width: 100%;
overflow: hidden;
}
ul {
list-style: none;
}
.center {
text-align: center;
}
HTML:
<header></header>
<footer>
<div id="wrapper">
<div id="footer">
<div class="footerFloat">
<h4 class="center">Header 1</h4>
<ul>
<li class="center">Line 1</li>
<li class="center">Line 2</li>
<li class="center">Line 3</li>
<li class="center">Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4 class="center">Header 4</h4>
<ul>
<li class="center">Line 1</li>
<li class="center">Line 2</li>
<li class="center">Line 3</li>
<li class="center">Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4 class="center">Header 3</h4>
<ul>
<li class="center">Line 1</li>
<li class="center">Line 2</li>
<li class="center">Line 3</li>
<li class="center">Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4 class="center">Header 4</h4>
<ul>
<li class="center">Line 1</li>
<li class="center">Line 2</li>
<li class="center">Line 3</li>
<li class="center">Line 4</li>
</ul>
</div>
</div>
</div>
</footer>
Here is a picture of the problem.
Does anyone know how I could fix this, and centre the text with the headings in the footer?
Any help would be greatly appreciated, thanks.
—ItzJavaCraft
Remove the padding which is built into the ul by default.
.footerFloat {
width: 25%;
float: left;
}
#wrapper {
width: 100%;
overflow: hidden;
}
ul {
list-style: none;
padding: 0; /* here---add this */
}
.center {
text-align: center;
}
<footer>
<div id="wrapper">
<div id="footer">
<div class="footerFloat">
<h4 class="center">Header 1</h4>
<ul>
<li class="center">Line 1</li>
<li class="center">Line 2</li>
<li class="center">Line 3</li>
<li class="center">Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4 class="center">Header 4</h4>
<ul>
<li class="center">Line 1</li>
<li class="center">Line 2</li>
<li class="center">Line 3</li>
<li class="center">Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4 class="center">Header 3</h4>
<ul>
<li class="center">Line 1</li>
<li class="center">Line 2</li>
<li class="center">Line 3</li>
<li class="center">Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4 class="center">Header 4</h4>
<ul>
<li class="center">Line 1</li>
<li class="center">Line 2</li>
<li class="center">Line 3</li>
<li class="center">Line 4</li>
</ul>
</div>
</div>
</div>
</footer>