I have 5 side by side lists in my website's footer as follows:
<div class="row">
<div class="col-xs-12 footer-links">
<div class="links">
<h1 class="title">ABOUT US</h1>
<ul>
<li class="link"> About Company</li>
<li class="link"> Legal Documents</li>
<li class="link"> Careers</li>
<li class="link"> Contact Us</li>
<li class="link"> FAQs</li>
</ul>
</div>
<div class="links">
<h1 class="title">ACCOUNTS</h1>
<ul>
<li class="link">Register</li>
<li class="link">Compare Account Types</li>
<li class="link">Funding Options</li>
<li class="link">Islamic Account</li>
</ul>
</div>
<div class="links">
<h1 class="title">INSTRUMENTS</h1>
<ul>
<li class="link"> Currencies</li>
<li class="link"> Commodities</li>
<li class="link"> Metals</li>
<li class="link"> Shares</li>
<li class="link"> Bonds</li>
<li class="link"> Indices</li>
</ul>
</div>
<div class="links">
<h1 class="title">PLATFORMS</h1>
<ul>
<li class="link"> Meta Trader 4</li>
<li class="link"> MT4 Desktop</li>
<li class="link"> MT4 iOS</li>
<li class="link"> MT4 Android</li>
<li class="link"> MT4 Webtrader</li>
</ul>
</div>
<div class="links">
<h1 class="title">TRADING TOOLS</h1>
<ul>
<li class="link"> Expiration Dates</li>
<li class="link"> Market Hours</li>
<li class="link"> Holiday Calendar</li>
<li class="link"> Economic Calendar</li>
</ul>
</div>
</div>
What I would like to happen is that at any resolution below 992px, the lists will each take up 50% of the column creating 3 rows of 2 lists each except for the last (since I have 5 lists)
Here is my sass code: (maxMQ is just a mixin for a media query and $md-max-width is 992px)
.footer {
.links {
float: left;
display: inline-block;
width: calc(100% / 5);
#include maxMQ($md-max-width) {
margin-top: 30px;
width: 50%;
}
.title {
font-size: 14px;
margin-bottom: 5px;
padding-bottom: 7px;
display: inline-block;
border-bottom: 2px solid $highlight-blue;
}
ul {
margin: 0;
padding: 0;
display: block;
}
li {
margin-top: 5px;
font-size: 13px;
a {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
}
}
The problem is that when I reduce resolution below 992px (mobile/tablet), the 3rd list skips a spot on the second row. so it looks something like this:
row 1: list list
row 2: list
row 3: list list
What I want is:
row 1: list list
row 2: list list
row 3: list
I have no idea why this is happening. I do know that when I remove the ul's from within the 'links' divs it works fine.
Any help would be greatly appreciated! Thanks!
This is due to the floating elements, the first element has more height than the second one and it's creating this issue on the second row.
To fix this and you can use flex and remove the floating:
.links {
float: left;
display: inline-block;
width: calc(100% / 5);
}
#media all and (max-width:992px) {
.footer-links {
display: flex;
flex-wrap:wrap;
}
.links {
margin-top: 30px;
width: 50%;
float: none;
}
.title {
font-size: 14px;
margin-bottom: 5px;
padding-bottom: 7px;
display: inline-block;
border-bottom: 2px solid $highlight-blue;
}
ul {
margin: 0;
padding: 0;
display: block;
}
li {
margin-top: 5px;
font-size: 13px;
}
li a {
color: #000 text-decoration: none;
cursor: pointer;
}
}
<div class="row">
<div class="col-xs-12 footer-links">
<div class="links">
<h1 class="title">ABOUT US</h1>
<ul>
<li class="link"> About Company</li>
<li class="link"> Legal Documents</li>
<li class="link"> Careers</li>
<li class="link"> Contact Us</li>
<li class="link"> FAQs</li>
</ul>
</div>
<div class="links">
<h1 class="title">ACCOUNTS</h1>
<ul>
<li class="link">Register</li>
<li class="link">Compare Account Types</li>
<li class="link">Funding Options</li>
<li class="link">Islamic Account</li>
</ul>
</div>
<div class="links">
<h1 class="title">INSTRUMENTS</h1>
<ul>
<li class="link"> Currencies</li>
<li class="link"> Commodities</li>
<li class="link"> Metals</li>
<li class="link"> Shares</li>
<li class="link"> Bonds</li>
<li class="link"> Indices</li>
</ul>
</div>
<div class="links">
<h1 class="title">PLATFORMS</h1>
<ul>
<li class="link"> Meta Trader 4</li>
<li class="link"> MT4 Desktop</li>
<li class="link"> MT4 iOS</li>
<li class="link"> MT4 Android</li>
<li class="link"> MT4 Webtrader</li>
</ul>
</div>
<div class="links">
<h1 class="title">TRADING TOOLS</h1>
<ul>
<li class="link"> Expiration Dates</li>
<li class="link"> Market Hours</li>
<li class="link"> Holiday Calendar</li>
<li class="link"> Economic Calendar</li>
</ul>
</div>
</div>
Or simply remove floating without adding flex but you need to fix white spaces issue to have them 50% width:
.links {
float: left;
display: inline-block;
width: calc(100% / 5);
}
#media all and (max-width:992px) {
.footer-links {
font-size: 0; /* remove white spaces */
}
.links {
margin-top: 30px;
width: 50%;
float: none;
font-size: initial; /* put back font as initial*/
vertical-align:top;
}
.title {
font-size: 14px;
margin-bottom: 5px;
padding-bottom: 7px;
display: inline-block;
border-bottom: 2px solid $highlight-blue;
}
ul {
margin: 0;
padding: 0;
display: block;
}
li {
margin-top: 5px;
font-size: 13px;
}
li a {
color: #000 text-decoration: none;
cursor: pointer;
}
}
<div class="row">
<div class="col-xs-12 footer-links">
<div class="links">
<h1 class="title">ABOUT US</h1>
<ul>
<li class="link"> About Company</li>
<li class="link"> Legal Documents</li>
<li class="link"> Careers</li>
<li class="link"> Contact Us</li>
<li class="link"> FAQs</li>
</ul>
</div>
<div class="links">
<h1 class="title">ACCOUNTS</h1>
<ul>
<li class="link">Register</li>
<li class="link">Compare Account Types</li>
<li class="link">Funding Options</li>
<li class="link">Islamic Account</li>
</ul>
</div>
<div class="links">
<h1 class="title">INSTRUMENTS</h1>
<ul>
<li class="link"> Currencies</li>
<li class="link"> Commodities</li>
<li class="link"> Metals</li>
<li class="link"> Shares</li>
<li class="link"> Bonds</li>
<li class="link"> Indices</li>
</ul>
</div>
<div class="links">
<h1 class="title">PLATFORMS</h1>
<ul>
<li class="link"> Meta Trader 4</li>
<li class="link"> MT4 Desktop</li>
<li class="link"> MT4 iOS</li>
<li class="link"> MT4 Android</li>
<li class="link"> MT4 Webtrader</li>
</ul>
</div>
<div class="links">
<h1 class="title">TRADING TOOLS</h1>
<ul>
<li class="link"> Expiration Dates</li>
<li class="link"> Market Hours</li>
<li class="link"> Holiday Calendar</li>
<li class="link"> Economic Calendar</li>
</ul>
</div>
</div>
Or you can simply add a min-height to your elements to be sure they have the same height:
.links {
float: left;
display: inline-block;
width: calc(100% / 5);
}
#media all and (max-width:992px) {
.links {
margin-top: 30px;
width: 50%;
min-height:170px; /* adjust this value with want you what*/
}
.title {
font-size: 14px;
margin-bottom: 5px;
padding-bottom: 7px;
display: inline-block;
border-bottom: 2px solid $highlight-blue;
}
ul {
margin: 0;
padding: 0;
display: block;
}
li {
margin-top: 5px;
font-size: 13px;
}
li a {
color: #000 text-decoration: none;
cursor: pointer;
}
}
<div class="row">
<div class="col-xs-12 footer-links">
<div class="links">
<h1 class="title">ABOUT US</h1>
<ul>
<li class="link"> About Company</li>
<li class="link"> Legal Documents</li>
<li class="link"> Careers</li>
<li class="link"> Contact Us</li>
<li class="link"> FAQs</li>
</ul>
</div>
<div class="links">
<h1 class="title">ACCOUNTS</h1>
<ul>
<li class="link">Register</li>
<li class="link">Compare Account Types</li>
<li class="link">Funding Options</li>
<li class="link">Islamic Account</li>
</ul>
</div>
<div class="links">
<h1 class="title">INSTRUMENTS</h1>
<ul>
<li class="link"> Currencies</li>
<li class="link"> Commodities</li>
<li class="link"> Metals</li>
<li class="link"> Shares</li>
<li class="link"> Bonds</li>
<li class="link"> Indices</li>
</ul>
</div>
<div class="links">
<h1 class="title">PLATFORMS</h1>
<ul>
<li class="link"> Meta Trader 4</li>
<li class="link"> MT4 Desktop</li>
<li class="link"> MT4 iOS</li>
<li class="link"> MT4 Android</li>
<li class="link"> MT4 Webtrader</li>
</ul>
</div>
<div class="links">
<h1 class="title">TRADING TOOLS</h1>
<ul>
<li class="link"> Expiration Dates</li>
<li class="link"> Market Hours</li>
<li class="link"> Holiday Calendar</li>
<li class="link"> Economic Calendar</li>
</ul>
</div>
</div>
Another easy fix for your situation is to clear floating after each last element of each row by using clear:left (but you need to adjust this if you change your logic, for example 3 per row instead of 2 per row):
.links {
float: left;
display: inline-block;
width: calc(100% / 5);
}
#media all and (max-width:992px) {
.links {
margin-top: 30px;
width: 50%;
}
/* Added this code*/
.links:nth-child(2n+1) {
clear:left;
}
/**/
.title {
font-size: 14px;
margin-bottom: 5px;
padding-bottom: 7px;
display: inline-block;
border-bottom: 2px solid $highlight-blue;
}
ul {
margin: 0;
padding: 0;
display: block;
}
li {
margin-top: 5px;
font-size: 13px;
}
li a {
color: #000 text-decoration: none;
cursor: pointer;
}
}
<div class="row">
<div class="col-xs-12 footer-links">
<div class="links">
<h1 class="title">ABOUT US</h1>
<ul>
<li class="link"> About Company</li>
<li class="link"> Legal Documents</li>
<li class="link"> Careers</li>
<li class="link"> Contact Us</li>
<li class="link"> FAQs</li>
</ul>
</div>
<div class="links">
<h1 class="title">ACCOUNTS</h1>
<ul>
<li class="link">Register</li>
<li class="link">Compare Account Types</li>
<li class="link">Funding Options</li>
<li class="link">Islamic Account</li>
</ul>
</div>
<div class="links">
<h1 class="title">INSTRUMENTS</h1>
<ul>
<li class="link"> Currencies</li>
<li class="link"> Commodities</li>
<li class="link"> Metals</li>
<li class="link"> Shares</li>
<li class="link"> Bonds</li>
<li class="link"> Indices</li>
</ul>
</div>
<div class="links">
<h1 class="title">PLATFORMS</h1>
<ul>
<li class="link"> Meta Trader 4</li>
<li class="link"> MT4 Desktop</li>
<li class="link"> MT4 iOS</li>
<li class="link"> MT4 Android</li>
<li class="link"> MT4 Webtrader</li>
</ul>
</div>
<div class="links">
<h1 class="title">TRADING TOOLS</h1>
<ul>
<li class="link"> Expiration Dates</li>
<li class="link"> Market Hours</li>
<li class="link"> Holiday Calendar</li>
<li class="link"> Economic Calendar</li>
</ul>
</div>
</div>
inline-block automatically adds some margin to the elements, I believe around 4px. So 50% plus that 4px will make it more than 100%, pushing down the elements. Try changing to just block instead.
Related
I have been struggling with HTML and CSS and i am trying to get the list in my drop down to display side by side, inline and center? Once i have figured out the correct method i will use the div with the class names "left", "middle" and "right" on all the drop down menus.
here is a pic of what i have got to:
So like you can see in the bath dropdown in the image above i have them in 3 columns they are not inline and there is a gap either side i cannot seem to remove? eventually i will have an extra column on each dropdown which will have a image in it.
Any help would be great and as with all my questions so far a brief description of why would be awesome just so i can get a better understanding as i am learning as i go.
here is a fiddle
https://jsfiddle.net/qesmow58/5/
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
height: 30px;
background-color: #17D8C7;
}
.headermenu a {
text-decoration: none;
}
.headermenu>ul>li>a {
display: inline-block;
text-align: center;
text-decoration: none;
color: white;
}
.headermenu ul {
padding-left: 0;
list-style: none;
}
.headermenu .arrow {
line-height: 0%;
font-size: 8px
}
.headermenu>ul>li {
position: relative;
display: inline-block;
vertical-align: top;
margin-left: 0.5%;
margin-right: 0.5%;
line-height: 30px;
}
.headermenu>ul>li>div {
display: none;
position: absolute;
top: 100%;
border: 1px solid #aa2ebf;
background-color: white;
width: 450px;
}
.headermenu>ul>li:hover>div {
display: block;
}
.left,
.middle,
.right {
display: inline-block;
}
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths<span class="arrow">▼</span>
<div>
<div class="left">
<ul class="bathdropdown1">
<li>
<h3>Bath Types</h3>
</li>
<li>Standard</li>
<li>L-Shaped</li>
<li>B-Shaped</li>
</ul>
</div>
<div class="middle">
<ul class="bathdropdown2">
<li>
<h3>Bath Accessories</h3>
</li>
<li>Bath Screens</li>
<li>Bath Panels</li>
</ul>
</div>
<div class="right">
<ul class="bathdropdown3">
<li>
<h3>All Baths</h3>
</li>
<li>All</li>
</ul>
</div>
</div>
</li>
<li>Toilets<span class="arrow">▼</span>
<div>
<ul class="toiletdropdown1">
<li>
<h3>Toilet Style</h3>
</li>
<li>Back to Wall</li>
<li>Close Coupled</li>
<li>Comfort Height</li>
<li>Fully Back to Wall</li>
<li>Low Level</li>
<li>Toilet and Basin Units</li>
</ul>
<ul class="toiletdropdown2">
<li>
<h3>Toilet Accessories</h3>
</li>
<li>Concealed Cisterns</li>
</ul>
<ul class="toiletdropdown3">
<li>
<h3>All Toilet Types</h3>
</li>
<li>All</li>
</ul>
</div>
</li>
<li>Basins<span class="arrow">▼</span>
<div>
<ul class="basindropdown1">
<li>
<h3>Style</h3>
</li>
<li>Basin and Pedestal</li>
<li>Cloakroom</li>
</ul>
<ul class="basindropdown2">
<li>
<h3>All Basins</h3>
</li>
<li>All Basins</li>
</ul>
</div>
</li>
<li>Shower Enclosures<span class="arrow">▼</span>
<div>
<ul class="showerenclosuredropdown1">
<li>
<h3>Amelia Enclosures
<h3>
</li>
<li>Amelia Bifold Door</li>
<li>Amelia Enclosure Side Panels</li>
<li>Amelia Pivot Door</li>
<li>Amelia Quadrant Enclosure</li>
<li>Amelia Sliding Door</li>
</ul>
<ul class="showerenclosuredropdown2">
<li>
<h3>Sienna Enclosures</h3>
</li>
<li>Sienna Quadrant</li>
<li>Sienna Bifold Door</li>
<li>Sienna Pivot Door</li>
<li>Sienna Sliding Door</li>
<li>Sienna Wet Room Screen</li>
<li>Sienna Enclosure Side Panels</li>
</ul>
<ul class="showerenclosuredropdown3">
<li>
<h3>Show Trays</h3>
</li>
<li>Shower Trays</li>
<li>Riser Kits</li>
</ul>
</div>
</li>
<li>Furniture<span class="arrow">▼</span>
<div>
<ul class="furnituredropdown1">
<li>
<h3>Collection</h3>
</li>
<li>Bella Collection</li>
<li>Caprice Collection</li>
<li>Gino Collection</li>
<li>Shine Collection</li>
<li>Sienna Collection</li>
<li>Valentino Collection</li>
</ul>
<ul class="furnituredropdown2">
<li>
<h3>Unit Type</h3>
</li>
<li>Vanity Unit and Basin</li>
<li>Wall Vanity Unit and Basin</li>
<li>Corner Vanity Unit and Basin</li>
<li>Back to Wall Units</li>
<li>Cupboard Units</li>
<li>Mini Units</li>
</ul>
</div>
</li>
<li>Showers<span class="arrow">▼</span>
<div>
<ul class="showersdropdown1">
<li>
<h3>Style</h3>
</li>
<li>Round Head</li>
<li>Square Head</li>
</ul>
</div>
</li>
<li>Taps<span class="arrow">▼</span>
<div>
<ul class="tapsdropdown1">
<li>
<h3>Bathroom Taps</h3>
</li>
<li>Mono Mixer</li>
<li>Bath Shower Mixer</li>
<li>Mini Mono Mixer</li>
<li>Bath Filler</li>
</ul>
<ul class="tapsdropdown2">
<li>
<h3>Kitchen Taps</h3>
</li>
<li>All</li>
</ul>
<ul class="tapsdropdown3">
<li>
<h3>All Taps</h3>
</li>
<li>All</li>
</ul>
</div>
</li>
<li>Accessories<span class="arrow">▼</span>
<div>
<ul class="accessoriesdropdown1">
<li>Wastes</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
Add this to your css
.left, .middle, .right {
float: left;
width: 33.3%;
box-sizing: border-box;
}
https://jsfiddle.net/qesmow58/8/
Give the div a class which you have used to wrap drop-down items so that you can be specific for that particular div. Here i have given sub-menu-container class to it
Add vertical-align: top to .left, .middle, .right. this is
because you have set display: inline-block to them.
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
height: 30px;
background-color: #17D8C7;
}
.headermenu a {
text-decoration: none;
}
.headermenu > ul > li > a {
display: inline-block;
text-align: center;
text-decoration: none;
color: white;
}
.headermenu ul {
padding-left: 0;
list-style: none;
}
.headermenu .arrow {
line-height: 0%;
font-size: 8px
}
.headermenu > ul > li {
position: relative;
display: inline-block;
vertical-align: top;
margin-left: 0.5%;
margin-right: 0.5%;
line-height: 30px;
}
.headermenu > ul > li > div.sub-menu-container {
display: none;
position: absolute;
top: 100%;
border: 1px solid #aa2ebf;
background-color: white;
width: 450px;
}
.headermenu > ul > li:hover > div {
display: block;
}
.left, .middle, .right {
display: inline-block;
vertical-align: top;
}
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>
Baths<span class="arrow">▼</span>
<div class="sub-menu-container">
<div class="left">
<ul class="bathdropdown1">
<li>
<h3>Bath Types</h3>
</li>
<li>Standard</li>
<li>L-Shaped</li>
<li>B-Shaped</li>
</ul>
</div>
<div class="middle">
<ul class="bathdropdown2">
<li>
<h3>Bath Accessories</h3>
</li>
<li>Bath Screens</li>
<li>Bath Panels</li>
</ul>
</div>
<div class="right">
<ul class="bathdropdown3">
<li>
<h3>All Baths</h3>
</li>
<li>All</li>
</ul>
</div>
</div>
</li>
<li>
Toilets<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="toiletdropdown1">
<li>
<h3>Toilet Style</h3>
</li>
<li>Back to Wall</li>
<li>Close Coupled</li>
<li>Comfort Height</li>
<li>Fully Back to Wall</li>
<li>Low Level</li>
<li>Toilet and Basin Units</li>
</ul>
<ul class="toiletdropdown2">
<li>
<h3>Toilet Accessories</h3>
</li>
<li>Concealed Cisterns</li>
</ul>
<ul class="toiletdropdown3">
<li>
<h3>All Toilet Types</h3>
</li>
<li>All</li>
</ul>
</div>
</li>
<li>
Basins<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="basindropdown1">
<li>
<h3>Style</h3>
</li>
<li>Basin and Pedestal</li>
<li>Cloakroom</li>
</ul>
<ul class="basindropdown2">
<li>
<h3>All Basins</h3>
</li>
<li>All Basins</li>
</ul>
</div>
</li>
<li>
Shower Enclosures<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="showerenclosuredropdown1">
<li>
<h3>Amelia Enclosures</h3>
</li>
<li>Amelia Bifold Door</li>
<li>Amelia Enclosure Side Panels</li>
<li>Amelia Pivot Door</li>
<li>Amelia Quadrant Enclosure</li>
<li>Amelia Sliding Door</li>
</ul>
<ul class="showerenclosuredropdown2">
<li>
<h3>Sienna Enclosures</h3>
</li>
<li>Sienna Quadrant</li>
<li>Sienna Bifold Door</li>
<li>Sienna Pivot Door</li>
<li>Sienna Sliding Door</li>
<li>Sienna Wet Room Screen</li>
<li>Sienna Enclosure Side Panels</li>
</ul>
<ul class="showerenclosuredropdown3">
<li>
<h3>Show Trays</h3>
</li>
<li>Shower Trays</li>
<li>Riser Kits</li>
</ul>
</div>
</li>
<li>
Furniture<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="furnituredropdown1">
<li>
<h3>Collection</h3>
</li>
<li>Bella Collection</li>
<li>Caprice Collection</li>
<li>Gino Collection</li>
<li>Shine Collection</li>
<li>Sienna Collection</li>
<li>Valentino Collection</li>
</ul>
<ul class="furnituredropdown2">
<li>
<h3>Unit Type</h3>
</li>
<li>Vanity Unit and Basin</li>
<li>Wall Vanity Unit and Basin</li>
<li>Corner Vanity Unit and Basin</li>
<li>Back to Wall Units</li>
<li>Cupboard Units</li>
<li>Mini Units</li>
</ul>
</div>
</li>
<li>
Showers<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="showersdropdown1">
<li>
<h3>Style</h3>
</li>
<li>Round Head</li>
<li>Square Head</li>
</ul>
</div>
</li>
<li>
Taps<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="tapsdropdown1">
<li>
<h3>Bathroom Taps</h3>
</li>
<li>Mono Mixer</li>
<li>Bath Shower Mixer</li>
<li>Mini Mono Mixer</li>
<li>Bath Filler</li>
</ul>
<ul class="tapsdropdown2">
<li>
<h3>Kitchen Taps</h3>
</li>
<li>All</li>
</ul>
<ul class="tapsdropdown3">
<li>
<h3>All Taps</h3>
</li>
<li>All</li>
</ul>
</div>
</li>
<li>
Accessories<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="accessoriesdropdown1">
<li>Wastes</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
Working fiddle here
I have looked around but couldn't find anything describing my problem. I have 5 section elements in a main tag with 3 of them containing text and images.
I'm trying to get each section in a column side by side using column count, however the last two columns with no text and images stack instead of remaining next to each other. I have attached a picture below.
When I add the same images and text it works as it should but I would like to know if I can have empty columns as I do not have content for them yet.
The Code:
main {
-webkit-column-count: 5; /* Chrome, Safari, Opera */
-moz-column-count: 5; /* Firefox */
column-count: 5;
}
li {
list-style: none;
}
.office {
margin-top: 5%;
display:inline-block;
width: 100%;
text-align: center;
}
.office_border {
border: 2px solid #95cccc;
width: 150px;
margin: auto;
}
.office_title {
font: normal 1.9rem DIN;
}
.office_properties {
padding: 0;
}
.office_properties_title {
font: 0.8rem 'Josefin Sans';
}
.office_properties_title_text {
font-weight: normal;
}
.office_properties_item_image {
width: 100%;
}
.office_properties_button {
padding: 5%;
}
.office_properties_link {
font-family: 'Josefin Sans';
text-decoration: none;
color: #c0392b;
}
<main>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://placekitten.com/300/200" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title"> </li>
<li class="office_properties_item"> </li>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title"> </li>
<li class="office_properties_item"> </li>
</ul>
</section>
</main>
You can add display:inline-flex to main you can also find an example I made here, also I added support for column-count for other browsers.
If you want to watch it in the snippet click on "full page".
I hope this help:)
main {
display:inline-flex;
-webkit-column-count: 5; /* Chrome, Safari, Opera */
-moz-column-count: 5; /* Firefox */
column-count: 5;
}
li {
list-style: none;
}
.office {
margin-top: 5%;
display:inline-block;
width: 100%;
text-align: center;
}
.office_border {
border: 2px solid #95cccc;
width: 150px;
margin: auto;
}
.office_title {
font: normal 1.9rem DIN;
}
.office_properties {
padding: 0;
}
.office_properties_title {
font: 0.8rem 'Josefin Sans';
}
.office_properties_title_text {
font-weight: normal;
}
.office_properties_item_image {
width: 100%;
}
.office_properties_button {
padding: 5%;
}
.office_properties_link {
font-family: 'Josefin Sans';
text-decoration: none;
color: #c0392b;
}
<main>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Strokkur_21_(js).jpg/668px-Strokkur_21_(js).jpg" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Strokkur_21_(js).jpg/668px-Strokkur_21_(js).jpg" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Strokkur_21_(js).jpg/668px-Strokkur_21_(js).jpg" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="assets/properties/21JS.jpg" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
<section class="office">
<h1 class="office_title">TITLE</h1>
<ul class="office_properties">
<div class="office_border"></div>
<li class="office_properties_title">
<h2 class="office_properties_title_text">Heading</h2>
</li>
<li class="office_properties_item">
<img src="assets/properties/21JS.jpg" alt="" class="office_properties_item_image">
</li>
<li class="office_properties_button">
DISCOVER
</li>
<div class="office_border"></div>
</ul>
</section>
</main>
Currently I am trying to create a header section in HTML, which contains a logo image and a list which is being used as a navigation menu.
The problem which I am facing right now is that, when I am giving a certain height to the list(equivalent to image height) the height of the list is going downwards against the image, and I want to be on the same line and text of the list in the middle. The following is the code snippet of my page.
.header-section>img
{
display:inline-block;
padding:10px;
background-color:yellow;
}
.navigation,.navigation ul
{
list-style:none;
}
.navigation
{
background-color:red;
display:inline-block;
}
.navigation>li
{
display:inline;
text-align:center;
line-height:50px;
}
.navigation ul
{
display:none;
}
<!--Header section-->
<div class="header-section">
<img src="images/logo/logo.png" alt="logo" width="90px" height="30px">
<!--Navigation section-->
<ul class="navigation">
<li>Home</li>
<li class="sub-menu">
About ▼
<ul>
<li>The Company</li>
<li>The Founders</li>
<li>The Team</li>
<li>The Mission</li>
</ul>
</li>
<li class="sub-menu">
Products ▼
<ul>
<li>Solar Panels</li>
<li>Solar Lamps</li>
<li>Solar Heaters</li>
<li>Solar Cookers</li>
</ul>
</li>
<li class="sub-menu">
Services ▼
<ul>
<li>Solar Equipment Repair</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Support ▼
<ul>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Contact ▼
<ul>
<li>Email Us</li>
<li>Contact Form</li>
</ul>
</li>
</ul>
<!--Social Icons-->
<img src="images/icons/twitter.png">
<img src="images/icons/facebook.png">
<img src="images/icons/google-plus.png">
</div>
<!--Header section closed-->
Add a vertical-align attribute to your images
.header-section > img
{
display:inline-block;
padding:10px;
background-color:yellow;
vertical-align: middle;
}
Update : Float version
Add a "float left" attribute to your images and .navigation and set an image "height + padding" equal to the line-height of your list.
.header-section
{
overflow: hidden;
}
.header-section > img
{
float: left;
padding:10px;
background-color:yellow;
width: 30px;
height: 30px;
}
.navigation
{
padding: 0;
margin: 0;
float: left;
list-style:none;
}
.navigation
{
background-color:red;
}
.navigation > li
{
display:inline;
text-align:center;
line-height:50px;
}
.navigation ul
{
display:none;
}
<!--Header section-->
<div class="header-section">
<img src="images/logo/logo.png">
<!--Navigation section-->
<ul class="navigation">
<li>Home</li>
<li class="sub-menu">
About ▼
<ul>
<li>The Company</li>
<li>The Founders</li>
<li>The Team</li>
<li>The Mission</li>
</ul>
</li>
<li class="sub-menu">
Products ▼
<ul>
<li>Solar Panels</li>
<li>Solar Lamps</li>
<li>Solar Heaters</li>
<li>Solar Cookers</li>
</ul>
</li>
<li class="sub-menu">
Services ▼
<ul>
<li>Solar Equipment Repair</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Support ▼
<ul>
<li>Training</li>
</ul>
</li>
<li class="sub-menu">
Contact ▼
<ul>
<li>Email Us</li>
<li>Contact Form</li>
</ul>
</li>
</ul>
<!--Social Icons-->
<img src="images/icons/twitter.png">
<img src="images/icons/facebook.png">
<img src="images/icons/google-plus.png">
</div>
<!--Header section closed-->
I am building a site for my school's robotics team. This is my first time ever coding in html/css. For some reason, my other pages use the margins quite nicely, but for this page specifically, my "margin-right" element does not work.
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index_style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<title>Team 3774 Homepage</title>
</head>
<body>
<div id="page">
<div class="Banner">
<a class="Banner_Link" href="www.robotichive3774.com">
<img src="/Images/Banner.png" height="200" width="1350" border="0">
</a>
</div>
<div class="navbar">
<ul class="nav">
<li><a class="li_nav" href="/Home">Home</a></li>
<li><a class="li_nav" href="/Team Bio">Team Bio</a></li>
<li><a class="li_nav" href="/Our Robot">Our Robot</a></li>
<li><a class="li_nav" href="/Our Coach">Our Coach</a></li>
<li><a class="li_nav" href="/Gallery">Gallery</a></li>
<li><a class="li_nav" href="/Outreach">Outreach</a></li>
<li><a class="li_nav" href="/Youtube">Youtube</a></li>
</ul>
</div>
<div class="Team_Bio">
<div class="example">
<h2>Team Bio</h2>
<h1>Example</h1>
<ul>
<li class="li_info">Class</li>
<li class="li_info">Role</li>
<li class="li_info">Career Interests</li>
<li class="li_info">Other Clubs and Sports</li>
</ul>
</div>
<div class="Abanoub_Boules">
<div class="info_AB">
<h1>Abanoub Boules</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Captian, Coder, Documenter</li>
<li class="li_info">CEO of a Biology Firm</li>
<li class="li_info">Coptic Society</li>
<li class="li_info">Technology Student Association</li>
<li class="li_info">President of Stem Clubs</li>
</ul>
</div>
<div class="picture_AB">
<img src="Abanoub.jpg" width="350px" height="350px">
</div>
</div>
<div class="Andre_Bernardo">
<div class="info_ABe">
<h1>Andre Bernardo</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, 3D modeling</li>
<li class="li_info">Computer Science</li>
<li class="li_info">Tennis</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_ABe">
<img src="Andre.jpg" width="350px" height="350px">
</div>
</div>
<div class="Leo_Scarano">
<div class="info_LS">
<h1>Leo Scarano</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, Coder</li>
<li class="li_info">Computer Science</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_LS">
<img src="Leo.jpg" width="350px" height="350px">
</div>
</div>
<div class="Mina_Hanna">
<div class="info_MH">
<h1>Mina Hanna</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, Coder</li>
<li class="li_info">Pharmaceutics</li>
<li class="li_info">Coptic Society</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_MH">
<img src="Mina.jpg" width="350px" height="350px">
</div>
</div>
<div class="Kenneth_Rebbecke">
<div class="info_KR">
<h1>Kenneth Rebbecke</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, Documenter</li>
<li class="li_info">Structual Engineering</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_KR">
<img src="Kenny.jpg" width="350px" height="350px">
</div>
</div>
<div class="Kristen_Kaldas">
<div class="info_KK">
<h1>Kristen Kaldas</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Coder, Bookkeeper</li>
<li class="li_info">Biomedical Engineering</li>
<li class="li_info">Science Seminar</li>
<li class="li_info">Science Club</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_KK">
<img src="Kristen.jpg" width="350px" height="350px">
</div>
</div>
<div class="Melanie_Aguilar">
<div class="info_MA">
<h1>Melanie Aguilar</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Secratary, Mascot</li>
<li class="li_info">Party Planner</li>
<li class="li_info">Yearbook</li>
</ul>
</div>
<div class="picture_MA">
<img src="Melanie.jpg" width="350px" height="350px">
</div>
</div>
<div class="Anish_Patel">
<div class="info_AP">
<h1>Anish Patel</h1>
<ul>
<li class="li_info">Junior</li>
<li class="li_info">Engineer, 3d modeling</li>
<li class="li_info">Mechanical Engineer</li>
<li class="li_info">Science Club</li>
<li class="li_info">Junior Classical League</li>
<li class="li_info">Certamn</li>
</ul>
</div>
<div class="picture_AP">
<img src="Anish.jpg" width="350px" height="350px">
</div>
</div>
<div class="Furhan_Ashraf">
<div class="info_FA">
<h1>Furhan Ashraf</h1>
<ul>
<li class="li_info">Junior</li>
<li class="li_info">Financial Advisor, Engineer</li>
<li class="li_info">Engineering/Undecided</li>
<li class="li_info">Science Club</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_FA">
<img src="Furhan.jpg" width="350px" height="350px">
</div>
</div>
<div class="Andrew_W">
<div class="info_AW">
<h1>Andrew Wojtkowski</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, 3d Modeling</li>
<li class="li_info">Aerospace Engineer</li>
<li class="li_info">Varsity Hockey</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_AW">
<img src="Andrew.jpg" width="350px" height="350px">
</div>
</div>
<div class="Bryan_F">
<div class="info_BF">
<h1>Bryan Ferreira</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, Documenter</li>
<li class="li_info">Computer Engineer/Civil Engineer</li>
<li class="li_info">Guitar</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_BF">
<img src="Bryan.jpg" width="350px" height="350px">
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.Team_Bio
{
margin-left: 200px;
margin-right: 200px;
}
a.Banner_Link
{
padding:0 !important;
}
.Banner
{
height: 200px;
width: 1350px;
}
#page{
width: 1000px;
margin-left: 0px;
margin-right: 0px;
}
div
{
font-family: 'Roboto Slab', serif;
}
.body
{
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
margin-bottom: 100px;
}
.Banner img
{
vertical-align:top;
}
body
{
margin: 0;
}
.li_nav
{
float: left;
display:inline-block;
font-family: 'Roboto Slab', serif;
}
.nav
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
min-width: 1350px;
}
a:link, a:visited
{
display:inline-block;
width: 182.7px;
padding-top: 12px;
padding-right: 5px;
padding-bottom: 14px;
padding-left: 5px;
font-weight: bold;
color: #FFFFFF;
background-color: #990000;
text-align: center;
text-decoration: none;
font-family: 'Roboto Slab', serif;
}
a:hover, a:active
{
background-color: #B20000;
}
.Team_Bio
{
min-width: 1350px;
}
h2
{
font-size: 60px;
text-align: center;
}
.example
{
float: left;
width: 1350px;
height: 425px;
margin: 0 auto;
}
.Abanoub_Boules
{
float: left;
width: 1350px;
height: 500px;
margin: 0 auto;
}
The site is robotichive3774.com if you want to see exactly what I am talking about.
It's true, the HTML and CSS are a mess but as you said you're new to this.
The layout problem has to do with the widths of your team member sections inside that element. They're forcing it to stretch out.
I'd recode the CSS for the team members.
Start by removing the pixels widths on each team member's and set them to percentage based widths.
Make the team member's main element 100% wide so it just fills the container it's sitting in.
Then set their info and picture wrapping elements to 49% each.
Set the image inside the picture wrapping element to 100% and auto for the height.
Do all these widths etc in your CSS file.
That should fix you right up.
Lastly, if you're gonna do the floats put a "clearing div" after each team member so the next section if forced below the previous run. Otherwise things will run into each other.
Like this:
<div class="clear"></div>
.clear { clear: both; }
In the end, you should really simply your code. There's too many classes etc. All the team member sections could have the same class so you can apply global rules etc.
I have some problem with my CSS :
My coding so far :
#leftcolumn {
background: url('SlicingImage/action_bar.jpg');
background-repeat:none;
float:left;
z-index: -1;
}
HTML:
<div id="containerleft">
<div id="leftcolumn" >
<p><img src="SlicingImage/alacards_logo.png"/></p>
<ul>
<li class="separator"></li>
<li class="buttons">home</li>
<li class="separator"></li>
<li class= "buttons">users</li>
<li class="separator"></li>
<li class= "buttons">tutorial</li>
<li class="separator"></li>
<li class= "buttons">issuers</li>
<li class="separator"></li>
<li class= "buttons">merchants</li>
<li class="separator"></li>
<li class= "buttons">partners</li>
<li class="separator"></li>
<li class= "buttons">high light</li>
<li class="separator"></li>
<li class= "buttons">news</li>
<li class="separator"></li>
<li class= "buttons">contact us</li>
<li class="separator"></li>
<li class="bottom"></li>
</ul>
</div>
</div>
If I run this code, result : BG but I want that small gray area covered like this
If I delete
background: url('SlicingImage/action_bar.jpg');
become like BG2
I tried add that class="bottom", but not like what I want (must define height manually)
Your background it is not showing because the z-index. Try to put a higher one
Try giving width to your ul and margin:auto;
ul {
list-style-type: none;
margin: auto;
overflow: hidden;
padding: 0;
position: relative;
width: 750px;
}
Works for me:
#leftcolumn {
background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTFMUprTNP6nK2r2QxbZ-ls7YlgiVenNuwCBkXwX-keeE96iOradptCHPLZ);
background-repeat:none;
float:left;
z-index: -1;
}
It must be something odd in your button and/or separator classes.
NOTE: I used some random pink background image that I found with Google image search.
I found the solution: After I put </p> after </ul>, will give me the result I want
<div id="containerleft">
<div id="leftcolumn" >
<p><img src="SlicingImage/alacards_logo.png"/>
<ul>
<li class="separator"></li>
<li class="buttons">home</li>
<li class="separator"></li>
<li class= "buttons">users</li>
<li class="separator"></li>
<li class= "buttons">tutorial</li>
<li class="separator"></li>
<li class= "buttons">issuers</li>
<li class="separator"></li>
<li class= "buttons">merchants</li>
<li class="separator"></li>
<li class= "buttons">partners</li>
<li class="separator"></li>
<li class= "buttons">high light</li>
<li class="separator"></li>
<li class= "buttons">news</li>
<li class="separator"></li>
<li class= "buttons">contact us</li>
<li class="separator"></li>
<li class="bottom"></li>
</ul>
</p>
</div>
</div>