I would like to surround a number in a circle like in this image:
Is this possible and how is it achieved?
Here's a demo on JSFiddle and a snippet:
.numberCircle {
border-radius: 50%;
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
<div class="numberCircle">30</div>
My answer is a good starting point, some of the other answers provide flexibility for different situations. If you care about IE8, look at the old version of my answer.
The problem with most of the other answers here is you need to tweak the size of the outer container so that it is the perfect size based on the font size and number of characters to be displayed. If you are mixing 1 digit numbers and 4 digit numbers, it won't work. If the ratio between the font size and the circle size isn't perfect, you'll either end up with an oval or a small number vertically aligned at the top of a large circle. This should work fine for any amount of text and any size circle. Just set the width and line-height to the same value:
.numberCircle {
width: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
font-size: 32px;
border: 2px solid #666;
}
<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>
If you need to make the content longer or shorter, all you need to do is adjust the width of the container for a better fit.
See it on JSFiddle.
For circle sizes varying based on the content this should work:
.numberCircle {
display: inline-block;
line-height: 0px;
border-radius: 50%;
border: 2px solid;
font-size: 32px;
}
.numberCircle span {
display: inline-block;
padding-top: 50%;
padding-bottom: 50%;
margin-left: 8px;
margin-right: 8px;
}
<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>
It relies on the width of the content plus the margin-'s to determine the radius, then extends the height to match using the padding-'s. The margin-'s would need to be adjusted based on the font-size.
Update to remove inner element:
.numberCircle {
display: inline-block;
border-radius: 50%;
border: 2px solid;
font-size: 32px;
}
.numberCircle:before,
.numberCircle:after {
content: '\200B';
display: inline-block;
line-height: 0px;
padding-top: 50%;
padding-bottom: 50%;
}
.numberCircle:before {
padding-left: 8px;
}
.numberCircle:after {
padding-right: 8px;
}
<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>
Uses pseudo-elements to force the height. Need the zero width space for vertical alignment. Moved the line-height:0px from the outer to the pseudo so that it is at least visible when degrading for IE8.
If it's 20 and lower, you can just use the unicode characters ① ② ... ⑳
http://www.alanwood.net/unicode/enclosed_alphanumerics.html
the easiest way is using bootstrap and badge class
<span class="badge">1</span>
This version does not rely on hard-coded, fixed values but sizes relative to the font-size of the div.
http://jsfiddle.net/qod1vstv/
CSS:
.numberCircle {
font: 32px Arial, sans-serif;
width: 2em;
height: 2em;
box-sizing: initial;
background: #fff;
border: 0.1em solid #666;
color: #666;
text-align: center;
border-radius: 50%;
line-height: 2em;
box-sizing: content-box;
}
HTML:
<div class="numberCircle">30</div>
<div class="numberCircle" style="font-size: 60px">1</div>
<div class="numberCircle" style="font-size: 12px">2</div>
You can use the border-radius for this:
<html>
<head>
<style type="text/css">
.round
{
-moz-border-radius: 15px;
border-radius: 15px;
padding: 5px;
border: 1px solid #000;
}
</style>
</head>
<body>
<span class="round">30</span>
</body>
</html>
Play with the border radius and the padding values until you are satisfied with the result.
But this won't work in all browsers. I guess IE still does not support rounded corners.
I am surprised nobody used flex which is easier to understand, so I put my version of answer here:
To create a circle, make sure width equals height
To adapt to font-size of number in the circle, use em rather than px
To center the number in the circle, use flex with justify-content: center; align-items: center;
if the number grows (>1000 for example), increase the width and height at same time
Here is an example:
.circled-number {
color: #666;
border: 2px solid #666;
border-radius: 50%;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
}
.circled-number--big {
color: #666;
border: 2px solid #666;
border-radius: 50%;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 4em;
height: 4em;
}
<div class="circled-number">
30
</div>
<div class="circled-number--big">
3000000
</div>
Late to the party, but here is a bootstrap-only solution that has worked for me. I'm using Bootstrap 4:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="row mt-4">
<div class="col-md-12">
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">1</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">2</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">3</span>
</div>
</div>
</body>
You basically add bg-dark text-white rounded-circle px-3 py-1 mx-2 h3 classes to your <span> (or whatever) element and you're done.
Note that you might need to adjust margin and padding classes if your content has more than one digits.
My solution here - this easily allows for different sizes and colors and ties into a CMS for editorial control. For IE degrading to squares.
HTML:
<div class="circular-label label-outer label-size-large label-color-pink">
<div class="label-inner">
<span>Fashion & Beauty</span>
</div>
</div>
CSS:
.circular-label {
overflow: hidden;
z-index: 100;
vertical-align: middle;
font-size: 11px;
-webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.label-inner {
width: 85%;
height: 85%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 2px dotted white;
vertical-align: middle;
margin: auto;
top: 5%;
position: relative;
overflow: hidden;
}
.label-inner > span {
display: table;
text-align: center;
vertical-align: middle;
font-weight: bold;
text-transform: uppercase;
width: 100%;
position: absolute;
margin: auto;
margin-top: 38%;
font-family:'ProximaNovaLtSemibold';
font-size: 13px;
line-height: 1.0em;
}
.circular-label.label-size-large {
width: 110px;
height: 110px;
-moz-border-radius: 55px;
-webkit-border-radius: 55px;
border-radius: 55px;
margin-top:-55px;
}
.circular-label.label-size-med {
width: 76px;
height: 76px;
-moz-border-radius: 38px;
-webkit-border-radius: 38px;
border-radius: 38px;
margin-top:-38px;
}
.circular-label.label-size-med .label-inner > span {
margin-top: 33%;
}
.circular-label.label-size-small {
width: 66px;
height: 66px;
-moz-border-radius: 33px;
-webkit-border-radius: 33px;
border-radius: 33px;
margin-top:-33px;
}
It's not too difficult to see how to do this. The bigger question is whether it is possible to make the dimensions of the circle scale to content.
Currently I don't think it is possible. Anyone?
Here's a demo on JSFiddle and a snippet:
/* Creating a number within a circle using CSS */
.numberCircle {
font-family: "OpenSans-Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
display: inline-block;
color: #fff;
text-align: center;
line-height: 0px;
border-radius: 50%;
font-size: 12px;
min-width: 38px;
min-height: 38px;
}
.numberCircle span {
display: inline-block;
padding-top: 50%;
padding-bottom: 50%;
margin-left: 1px;
margin-right: 1px;
}
/* Some Back Ground Colors */
.clrGreen {
background: #51a529;
}
.clrRose {
background: #e6568b;
}
.clrOrange {
background: #ec8234;
}
.clrBlueciel {
background: #21adfc;
}
.clrMauve {
background: #7b5d99;
}
<span class="numberCircle clrGreen"><span>8</span></span>
<span class="numberCircle clrRose"><span>80</span></span>
<span class="numberCircle clrOrange"><span>800</span></span>
<span class="numberCircle clrMauve"><span>8000</span></span>
.numberCircle {
border-radius: 50%;
width: 40px;
height: 40px;
display: block;
float: left;
border: 2px solid #000000;
color: #000000;
text-align: center;
margin-right: 5px;
}
<h3><span class="numberCircle">1</span> Regiones del Interior</h3>
Late to the party but here's the solution I went with https://codepen.io/jnbruno/pen/vNpPpW
Required no extra work.
Thanks John Noel Bruno
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
font-size: 24px;
line-height: 1.33;
}
.btn-circle {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
text-align: center;
font-size: 12px;
line-height: 1.42857;
}
<div class="panel-body">
<h4>Normal Circle Buttons</h4>
<button type="button" class="btn btn-default btn-circle">
<i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</button>
</div>
Do something like this in your css
div {
width: 10em; height: 10em;
-webkit-border-radius: 5em; -moz-border-radius: 5em;
}
p {
text-align: center; margin-top: 4.5em;
}
Use the paragraph tag to write the text. Hope that helps
Improving the first answer just get rid of the padding and add line-height and vertical-align:
.numberCircle {
border-radius: 50%;
width: 36px;
height: 36px;
line-height: 36px;
vertical-align:middle;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
The answer of thirtydot is right but is missing a little point. You need to add position: relative , if you want to have centered value in the circle and include also different range of number.
For example 123;
HTML:
<div class="numberCircle">30</div>
CSS:
.numberCircle {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
position: relative;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
but an easiest solution is to use Bootstrap
<span class="badge" style ="float:right">123</span>
Heres my way of doing it, using square method. upside is it works with different values, but you need 2 spans.
.circle {
display: inline-block;
border: 1px solid black;
border-radius: 50%;
position: relative;
padding: 5px;
}
.circle::after {
content: '';
display: block;
padding-bottom: 100%;
height: 0;
opacity: 0;
}
.num {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.width_holder {
display: block;
height: 0;
overflow: hidden;
}
<div class="circle">
<span class="width_holder">1</span>
<span class="num">1</span>
</div>
<div class="circle">
<span class="width_holder">11</span>
<span class="num">11</span>
</div>
<div class="circle">
<span class="width_holder">11111</span>
<span class="num">11111</span>
</div>
<div class="circle">
<span class="width_holder">11111111</span>
<span class="num">11111111</span>
</div>
You can use
span.red {
background: red;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.grey {
background: #cccccc;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #fff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.green {
background: #5EA226;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.blue {
background: #5178D0;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.pink {
background: #EF0BD8;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
<h1><span class="grey">1</span>A grey circle with number inside</h1>
<h1><span class="red">2</span>A red circle with number inside</h1>
<h1><span class="blue">3</span>A blue circle with number inside</h1>
<h1><span class="green">4</span>A green circle with number inside</h1>
<h1><span class="pink">5</span>A pink circle with number inside</h1>
Thank to https://wpsites.net/web-design/colored-numbered-circles-using-pure-css-html/
Something like this could work (for numbers 0 to 99):
.circle {
border: 0.1em solid grey;
border-radius: 100%;
height: 2em;
width: 2em;
text-align: center;
}
.circle p {
margin-top: 0.10em;
font-size: 1.5em;
font-weight: bold;
font-family: sans-serif;
color: grey;
}
<body>
<div class="circle">
<p>30</p>
</div>
</body>
You work like with a standard block, that is a square
This is feature of CSS 3 and it is not very well suporrted, you can count on firefox and safari for sure.
.circle {
width: 10em;
height: 10em;
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
border: 1px solid black;
}
<div class="circle"><span>1234</span></div>
The position of the portfolio page is well positioned but I think I don't use correctly propriety margin-left, I think that I have to use another propriety?
Then, my second problem is that my languages page is too far from my portfolio page, I would like to fix to 50 px. But I cannot do because I am stuck with my first problem.
Thank you for help.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
}
.page-left{
display: inline-block;
margin-left: 430px;
}
<body>
<header>
<div class="header-block">
<div class="page-left">Portfolio</div>
<div class="page-left">Languages</div>
</div>
</header>
</body>
You should create a new selector for your code for the second question:
View the result in full screen for actual margin-left working.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
}
.page-left{
display: inline-block;
margin-left: 430px;
border:1px solid black;
}
.Languages{
display: inline-block;
margin-left: 30px;
border:1px solid red;
}
<body>
<header>
<div class="header-block">
<div class="page-left">Portfolio</div>
<div class="Languages">Languages</div>
</div>
</header>
</body>
Just add margin-left: 430px; to the header-block div
You can use "flex" it's help you
In different screen sizes It will help arrange the right proportions
Try.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
display: flex;
}
.page-first{
display: inline-block;
margin-left: 430px;
}
.page-second{
margin-left: 50px;
}
<body>
<header>
<div class="header-block">
<div class="page-first">Portfolio</div>
<div class="page-second">Languages</div>
</div>
</header>
</body>
Example.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have a scroll menu and i want on mobiles to be hidden and to be visible only on desktops but i don't know how to do that, some help appreciated. Thanks! Here is my menu codes:
Css menu scroll code:
#iconuri_oferte_useri {
float: right;
position: absolute;
}
.iconuri_dreapta_oferte_useri {
vertical-align: middle;
padding: 2px;
margin-top: 85px;
right: 2px;
z-index: 2;
width: 80px;
background-color: #fff;
border-radius: 20px 0 0 20px;
border-bottom: 1px solid #069;
border-top: 1px solid #069;
border-left: 1px solid #069;
}
.iconuri_dreapta_oferte_useri .originale_icon, .iconuri_dreapta_oferte_useri .transport_icon, .iconuri_dreapta_oferte_useri .livrare_icon, .iconuri_dreapta_oferte_useri .transport_retur, .iconuri_dreapta_oferte_useri .plata_rate, .iconuri_dreapta_oferte_useri .plata_card, .iconuri_dreapta_oferte_useri.icon_garantie {
border-bottom: 1px solid #069;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
margin-bottom: 5px;
}
.iconuri_dreapta_oferte_useri i {
font-size: 40px;
text-align: center;
width: 100%;
color: #069;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconuri_dreapta_oferte_useri .title {
font-size: 13px;
text-align: center;
width: 100%;
font-weight: 700;
color: #069;
}
.iconuri_dreapta_oferte_useri .descriere {
font-size: 10px;
text-align: center;
width: 100%;
color: #f60;
line-height: 9px;
padding-bottom: 2px;
}
Html menu scroll code:
<div class="iconuri_dreapta_oferte_useri" id="iconuri_oferte_useri" style="top: 82px;">
<div class="originale_icon"><i class="fa fa-check"></i> <div class="title">PRODUSE ORIGINALE</div> <div class="descriere">Produse originale, verificate</div></div>
<div class="transport_icon"><i class="fa fa-truck"></i> <div class="title">TRANSPORT</div> <div class="descriere">Gratuit pentru comenzi peste 150 Lei</div></div>
<div class="livrare_icon"><i class="fa fa-clock-o"></i> <div class="title">LIVRARE</div> <div class="descriere">In 24 ore, acoperire nationala</div></div>
<div class="transport_retur"><i class="fa fa-rotate-right"></i> <div class="title">RETUR</div> <div class="descriere">In 14 zile de la data livrarii </div></div>
<div class="plata_card"><i class="fa fa-money"></i> <div class="title">PLATI</div> <div class="descriere">Ramburs si card de credit </div></div>
<div class="icon_garantie"><i class="fa fa-empire"></i> <div class="title">GARANTIE</div> <div class="descriere">30 de zile pentru orice produs </div></div>
</div>
You're probably looking for media queries.
#media (max-width:600px){
.iconuri_dreapta_oferte_useri{
display:none;
}
}
I'm trying to create a fluid layout, but have a small problem with the height of the container. The outer <div> (yellow, ip_A-1) is not adjusting to the height of it's children.
See a fiddle here.
I've tried placing a spacer inside but it's not working. Also making ip_BA_1 and ip_BB_1 position:relative does nothing.
The HTML:
<div class="ip_A_1">
<div class="ip_BA_1">Hello I am a label that has to wrap</div>
<div class="ip_BB_1">
<div class="ip_BBA_1">Hello I am a text that has to wrap.
Hello I am a text that has to wrap.
Hello I am a text that has to wrap.</div>
</div>
<div class="spacer_0"></div>
</div>
<div class="spacer_0"></div>
<div class="ip_A_1">
<div class="ip_BA_1">Hello I am a label that has to wrap</div>
<div class="ip_BB_1">
<div class="ip_BBA_1">Hello I am a text that has to wrap.
Hello I am a text that has to wrap.
Hello I am a text that has to wrap.</div>
</div>
<div class="spacer_0"></div>
</div>
The CSS:
.spacer_0 {
clear:both;
width:100%;
height:0px;
}
.ip_A_1 {
position: relative;
width: 100%;
height: auto;
min-height: 28px;
text-align: left;
font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
font-size:1em;
background: yellow;
}
.ip_BA_1 {
float: left;
width: auto;
padding: 4px 10px 20px 45px;
font-family:'Calibri', 'Gill Sans', 'Helvetica', sans-serif;
font-size: 0.88889em;
line-height: 0.88889em;
font-weight: bold;
background: blue;
color: white;
}
.ip_BB_1 {
clear: both;
float: left;
margin-top: -15px;
width: 100%;
}
.ip_BBA_1 {
position: absolute;
left: 30px;
right: 0px;
padding-left: 6px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ccc;
border: 1px solid #666;
}
The problem is that you are using floats and position:absolute; on the children these rules prevent the children from expanding parents height.
change the ip_BBA_1 css position:relative.
You can visit the site I am working on here.
You can see what I am going for. I want the bottom right box to mimic the top right box in its positioning, but for some reason it refuses to fill the rest its parent div and opts to stack vertically. Even without content the background stops about half way through the box. I have it set to float left (something that shouldn't be necessary as div children should take their parent's width automatically), so I'm guessing there is something actually there but I cannot tell what. I have tried to clear and such but no luck there either. Is there a way to get that bottom right div to actually fill the parent div?
Here is my HTML
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
VIEW MENU
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
<p class="titles">Hours</p>
<p class="subtitles">Lunch</p>
<p class="subtitles">Dinner</p>
<p class="subtitles">Bar</p>
</div>
<div>
<p class="hours">Mon-Fri 11-4</p>
<p class="hours">Mon-Sat 4-12</p>
<p class="hours">Mon-Sat 4-12</p>
</div>
</div><!--end hours-->
And my CSS
/*menu ad*/
div#menu-ad {
position: relative;
margin-right: -11px;
margin-top: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
.titles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2.5rem;
color: #d6832e;
}
#ad {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.6rem;
line-height: 1.35;
color: #4f4d4b;
margin-top: .5rem;
width: auto;
}
a#button {
padding: .6rem 1.3rem .6rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #fff;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
margin-top: -1px;
margin-right: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
width: auto;
height: 150px;
display: inline-block;
}
.subtitles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2rem;
color: #4f4d4b;
text-align: left;
line-height: 2;
}
.hours {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.7rem;
color: #4f4d4b;
text-align: right;
line-height: 2;
}
Thanks for any help or advice!
If you change your structure a little, it might help you. Instead of trying to float to divs side by side, you could just join them together kinda like I did with the HTML and css below. I added comments where I changed stuff in the css.
HTML
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
VIEW MENU
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
<p class="titles">Hours</p>
<p>
<span class="subtitles">Lunch</span>
<span class="hours">Mon-Fri 11-4</span>
</p>
<p>
<span class="subtitles">Dinner</span>
<span class="hours">Mon-Sat 4-12</span>
</p>
<p>
<span class="subtitles">Bar</span>
<span class="hours">Mon-Sat 4-12</span>
</p>
</div>
</div><!--end hours-->
CSS:
/*menu ad*/
div#menu-ad {
position: relative;
margin-right: -11px;
margin-top: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
.titles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2.5rem;
color: #d6832e;
}
#ad {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.6rem;
line-height: 1.35;
color: #4f4d4b;
margin-top: .5rem;
width: auto;
}
a#button {
padding: .6rem 1.3rem .6rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #fff;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
margin-top: -1px;
margin-right: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
width: auto;
height: 150px;
/***** Removed Display:inline-block *****/
}
.subtitles {
float:left; /**** Added ****/
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2rem;
color: #4f4d4b;
text-align: left;
line-height: 2;
}
.hours {
float:right; /**** Added ****/
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.7rem;
color: #4f4d4b;
text-align: right;
line-height: 2;
}
#hours p {clear:both;} /**** Added ****/
All you need to do is to decrease the inner-div size that fits to your #hours div and assign a class to each of the inner div and float them left and right.
Example
<div id="hours">
<div class="left">
<p class="titles">Hours</p>
<p class="subtitles">Lunch</p>
<p class="subtitles">Dinner</p>
<p class="subtitles">Bar</p>
</div>
<div class="right">
<p class="hours">Mon-Fri 11-4</p>
<p class="hours">Mon-Sat 4-12</p>
<p class="hours">Mon-Sat 4-12</p>
</div>
</div><!--end hours-->
CSS:
#hours .left
{
float: left;
}
#hours .right
{
float: right;
}
It will help for sure. Also start using browser`s consoles. They ease your life.
I take it your trying to make the Hours take up the entire box?
If so, add this code to it:
height: 100%;
width: 100%;
padding: 0px;
Use followig. Those which are commented in here, need to remove form your code.
div.container {
/*height: 460px;*/
/*padding: 10px*/
padding: 10px 10px 0px; /* bottom padding 0px */
}
div#hours div {
/*inline-block*/
}
Now add following after ending tag of #hours.
<div style="clear:both;"></div>
To make #hours div look nice, use following.
<div id="hours">
<h3 class="titles">Hours</h3>
<dl>
<dt>Lunch</dt>
<dd>Mon-Fri 11-4</dd>
<dt>Dinner</dt>
<dd>Mon-Sat 4-12</dd>
<dt>Bar</dt>
<dd>Mon-Sat 4-12</dd>
</dl>
</div><!--end hours-->
CSS Styles -
#hours dl,
#hours dt,
#hours dd {
margin: 0;
padding: 0;
}
#hours dl {
width: 100%;
float: left;
clear: both;
}
#hours dl dt {
float: left;
clear: left;
width: 45%;
}
#hours dl dd {
float: left;
}