I would like to be able to vertically center a div containing meta data such as Title and Author within a container that has a fluid width. In the example below, I would like the .meta div to be vertically centered within the article which is fluid width.
I tried following this article (http://css-tricks.com/centering-in-the-unknown/) but it doesn't work.
HTML
<div class="container">
<h3>Test</h3>
<article>
<div class="meta">
<div class="title"></div>
<div class="author"></div>
<img src="" />
</div>
</article>
</div>
CSS (using LESS)
.container {
h3 {
margin: -5px 0 0 0;
padding: 32px 0px 16px 0;
.freight-sans-pro;
font-size: 1.375em;
line-height: 1em;
font-weight: 200;
}
article {
max-height: 375px;
overflow: hidden;
position: relative;
z-index: 900;
margin-bottom: 2px;
background-color: #color-black;
line-height: 0em;
a {
max-height: 375px;
display: block;
img { opacity: .5; .opacity-transition; }
}
.meta {
width: 100%;
position: absolute;
bottom: 40%;
z-index: 500;
padding: 0px 10%;
color: #color-white;
font-size: 20px;
text-align: center;
.title {
margin: 0;
font-size: 2em;
line-height: 1em;
font-weight: 700;
text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7);
padding-bottom: 8px;
text-decoration: none;
display: block;
}
.author {
margin: 0;
font-size: .8em;
line-height: .75em;
font-style: italic;
text-transform: uppercase;
text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7);
text-decoration: none;
display: block;
}
}
}
}
Tried your Less but got an error in codepen.io so could not debug.
You could try something simple like this:
.container {
border: 2px solid blue;
width: 180px;
height: 120px;
overflow: hidden;
display: table-cell;
vertical-align: middle;
}
Check it working here
You might find this article useful as well: http://logconsole.com/vertical-align-center-image/
It's about vertically centring image, but in most cases you could just change image with a div.
Try this on what you want to be centered. I altered #domkoscielak's code so that it work.
.meta {
width: 180px;
height: 120px;
top: 50%;
margin-top: -60px; /*half of height*/
position: absolute;
}
Related
Hope your all well.
Is it possible to align my div to the right side within my container? I try using align functions but does not seem to work. is it possible?
Note, the alignment solution should be for div (chatline) and HTML code only, as i need another div to align (chatline) on the right or left etc. so please don't use CSS alignment on the hold container.
Any help would be grateful here. thanks Yummi
body {
background-color: #6B6B6B;
margin: 50px;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
}
#chattext {
font-family: Arial;
color: grey;
font-size: 12px;
line-height: 1.1;
letter-spacing: .5px;
}
.chatbox {
position: absolute;
width: 400px;
padding: 15px;
padding-top: 5px;
border-radius: 0px 0px 30px 30px;
background-color: rgba(0, 0, 0, .4);
grid-template-columns: 500px;
display: grid;
}
.bubble {
position: absolute;
max-width: 200px;
padding: 15px;
padding-top: 10px;
border-radius: 0px 30px 30px 30px;
background-color: rgba(0, 0, 0, .3);
}
<div class="chatbox">
<div style="height:200px">
<p class="bubble" id="chattext">This should be right > please use htnl code on this div to align</p>
<p style="margin-top:70px;" class="bubble" id="chattext">stay left</p>
</div>
</div>
You can define new class and use it in every bubble you want it in right
.right_chat {
right:0;
}
another advice id prefer to use just for one element so in my code i change it to class and use it in html code
body {
background-color: #6B6B6B;
margin: 50px;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
}
.chattext {
font-family: Arial;
color: grey;
font-size: 12px;
line-height: 1.1;
letter-spacing: .5px;
}
.right_chat {
right:0;
}
.chatbox {
position: absolute;
width: 400px;
padding: 15px;
padding-top: 5px;
border-radius: 0px 0px 30px 30px;
background-color:rgba(0, 0, 0, .4);
grid-template-columns: 500px;
display: grid;
}
.bubble {
position: absolute;
max-width:200px;
padding: 15px;
padding-top: 10px;
border-radius: 0px 30px 30px 30px;
background-color:rgba(0, 0, 0, .3);
}
<div class="chatbox">
<div style="height:200px"><p class="bubble chattext right_chat" id="">This should be right > please use htnl code on this div to align</p><p style="margin-top:70px;" class="bubble chattext">stay left</p></div>
</div>
Is this what you want?
I didn't change the default behavior of the bubble class. Since the bubble is position: absolute I created one extra class named right that you can add on each bubble you want to be aligned on the right.
body {
background-color: #6B6B6B;
margin: 50px;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
}
#chattext {
font-family: Arial;
color: grey;
font-size: 12px;
line-height: 1.1;
letter-spacing: .5px;
}
.chatbox {
position: absolute;
width: 400px;
padding: 15px;
padding-top: 5px;
border-radius: 0px 0px 30px 30px;
background-color:rgba(0, 0, 0, .4);
grid-template-columns: 500px;
display: grid;
}
.bubble {
position: absolute;
max-width:200px;
padding: 15px;
padding-top: 10px;
border-radius: 0px 30px 30px 30px;
background-color:rgba(0, 0, 0, .3);
}
.message-wrapper .bubble.right {
right: 0;
}
<div class="chatbox">
<div class="message-wrapper" style="height:200px">
<p class="bubble right" id="chattext">This should be right > please use htnl code on this div to align</p>
<p style="margin-top:70px;" class="bubble" id="chattext">stay left</p>
</div>
</div>
I'm trying to create the image in the link with only html and css. There are a number of elements that would need to "stack" on top of one another.
I am having a difficult time understanding inheritance, nesting, etc. Here's the code I've written so far:
.heart {
position: relative;
margin-top: 20px;
background-color: #000000;
opacity: .8;
width: 65px;
height: 30px;
border-radius: 15px;
display: inline;
}
.box {
margin: 75px auto;
position: relative;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
display: flex;
}
.thumbnail_image {
position: absolute;
float: left;
display: inline-block;
top: 0px;
left: 0px;
}
.text_container {
top: 60px;
left: 200px;
right: 100px;
width: 400px;
height: 338px;
position: relative;
display: flex;
}
h1 {
font-color: #ffffff !important;
text-transform: uppercase;
font-size: 60px;
font-family: Montserrat;
font-weight: 700;
line-height: 1.1;
text-align: left;
}
<div class="box">
<div class="heart">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
</div>
My concern is how to properly place the heart dialog, the text container, and the image overlay. I seem to be misunderstanding proper inheritance syntax or structure.
Use position:absolute; on heart dialog, text container, and image overlay elements and then position them correctly with the left and right properties.
Absolute positioning and z-index are the key words involved in stacking images with HTML and CSS.
I went ahead and mocked up your image with some html/css to give you an idea of implementation.
Z-index is not relevant in this particular example since you only require one layer above the base, which is automatically given to you with absolute positioning, however if you had multiple layers you would need to set the z-index to a number value where lower numbered z-indexes appear at the bottom and higher z-indexes appear at the top.
Here's my code, hope it helps:
body {
background-color: grey;
}
.container {
position:fixed;
height: 500px;
width: 700px;
background-image: url(http://i.stack.imgur.com/MS8X8.png);
background-position: 46% 52%;
background-size: 150%
}
.hearts {
position: absolute;
background-color: rgba(149, 165, 166,.5);
color: white;
right: 40px;
top: 15px;
padding: 15px 25px 15px 25px;
border-radius: 15px
}
.blue {
width: 550px;
height: 500px;
background-color: rgb(102,173,255);
float: right;
}
h1, h5 {
position: absolute;
font-family: sans-serif;
color: white;
text-transform: uppercase;
}
#quote {
left: 200px;
top: 30px;
font-size: 60px;
}
#attr {
left: 200px;
top: 450px;
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "main.css">
</head>
<body>
<div class = "container">
<div class = "hearts">423</div>
<div class = "blue">
<h1 id = "quote">don't you <br> think that <br> if i were </br>wrong,<br> i'd know it?</h1>
<h5 id = "attr">-Sheldon Cooper</h5>
</div>
</div>
</body>
</html>
Understanding the stacking order
In your case, the natural stacking order will do the job; this is nicely explained over on the MDN. The main thing to understand is that elements will overlap those that come before them in the markup. This is better explained with a simple example:
div {
position: absolute;
background: red;
height: 100px;
width: 100px;
top: 0;
left: 0;
}
.two {
background: blue;
top: 10px;
left: 20px;
}
.three {
background: green;
top: 20px;
left: 40px;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
With that out of the way...
Let's make these!
Feel free to jump to the complete example at the end of this answer!
Want to use some pedantic semantics?
A <blockquote> element to wrap everything together in a semantic container.
A <nav> element to contain the back and forward navigation
A <cite> element that contains the name of the person quoted
Our markup now looks like this:
<blockquote>
<p>Don't You think that if I were wrong, I'd know it?</p>
<cite>Sheldon Cooper</cite>
<a href="#" class="love-counter">
<3 123
</a>
<nav>
Previous
Next
</nav>
</blockquote>
The CSS
Main background image and color
These can be placed as a background on the blockquote itself. You can use background-size to ensure that the image always has the same dimensions. (It will obviously distort images which have an incorrect size)
blockquote {
background: #18a0ff url(image-url) no-repeat;
background-size: 170px 490px;
}
Add the transparent grey background and quotation character
This can be added with a absolutely positioned before pseudo-element of blockquote. The element is stretched out with left / right / bottom along with a width that matches the image. The transparent grey overlay and transparent text is provided by rgba color.
blockquote:before {
content: '\201C';
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding-top: 30px;
font-size: 2.4em;
text-align: center;
background: rgba(0,0,0,0.7);
width: 170px;
color: rgba(255,255,255,0.3);
}
Align the main quote text along with its citation
In order to incorporate smaller quotes, it could be more visually pleasing to vertically center the main text. We can use the display: flex property along with justify-content to easily achieve this; the flex-direction: column property stacks the main quote over the top of the citation. The blockquote is also given left and right padding to appropriately position it horizontally.
blockquote {
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 140px 0 200px;
}
Position the back / forward navigation and love counter
These are easily located with position: absolute along with the appropriate left / right / bottom / top properties. They will look something like this:
.love-counter {
position: absolute;
right: 20px;
top: 20px;
}
nav {
position: absolute;
left: 0px;
bottom: 20px;
}
Complete example
Compatibility: IE 11+ and all modern browsers.
You might consider a javascript method to shrink the font size for larger quotes.
#import url(https://fonts.googleapis.com/css?family=Passion+One:400,700);
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
blockquote {
background: #18a0ff url(http://i.stack.imgur.com/e3nDc.jpg) no-repeat;
background-size: 170px 490px;
height: 490px;
color: #FFF;
font-family: 'Passion One', cursive;
font-size: 4.2em;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 140px 0 200px;
font-weight: 400;
line-height: 1;
width: 650px;
text-transform: uppercase;
}
blockquote p {
margin: 0;
margin-top: 0.75em;
}
cite {
font-size: 0.25em;
font-weight: 400;
margin-top: 2em;
}
cite:before {
content: '\2014 '
}
blockquote:before {
content: '\201C';
font-size: 2.4em;
padding-top: 30px;
text-align: center;
background: rgba(0, 0, 0, 0.7);
width: 170px;
color: rgba(255, 255, 255, 0.3);
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.love-counter {
color: #FFF;
text-decoration: none;
font-size: 0.2em;
position: absolute;
right: 20px;
top: 20px;
font-family: helvetica;
font-weight: bold;
background: rgba(0, 0, 0, 0.2);
padding: 0 10px;
border-radius: 10px;
height: 30px;
line-height: 30px;
min-width: 60px
}
nav {
position: absolute;
left: 0px;
bottom: 20px;
font-size: 0;
width: 170px;
text-align: center;
}
nav a:before,
nav a:after {
font-size: 36px;
width: 50%;
display: inline-block;
color: #FFF;
}
nav a:first-child:before {
content: '<';
}
nav a:last-child:after {
content: '>';
}
.x-large {
background-image: url(http://i.stack.imgur.com/qWm5m.jpg);
}
.x-large p {
font-size: 0.62em;
}
<blockquote>
<p>Don't You think that if I were wrong, I'd know it?</p>
<cite>Sheldon Cooper</cite>
<3 123
<nav>
Previous
Next
</nav>
</blockquote>
<h2>Larger quote</h2>
<blockquote class="x-large">
<p>Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.</p>
<cite>Albert Einstein</cite>
<3 123
<nav>
Previous
Next
</nav>
</blockquote>
html,
body,
box,
thumbnail_image,
overlay,
h1,
h3,
h6,
p,
body {
width: 100%;
padding-bottom: 25px;
}
input {
font-family: "Roboto";
position: absolute;
top;
25.5px;
font-weight: 700;
font-size: 14px;
color: #fff;
background-color: transparent;
text-align: right;
border-width: 0;
width: 100%;
margin: 0 0 .1em 0;
}
.heart_button {
position: absolute;
top: 25.5px;
right: 55px;
}
heart_button:hover,
heart_button:active,
heart_button:focus {
color: #dd0239;
}
.heart_background {
position: absolute;
top: 20px;
right: 20px;
background-color: #000000;
opacity: .1;
width: 65px;
height: 30px;
border-radius: 15px;
}
.box {
margin: 30px auto;
position: relative;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
}
.quote_image {
position: absolute;
opacity: .1;
top: 62px;
left: 51px;
}
.image_overlay {
background-color: #282a37;
width: 170px;
height: 490px;
position: absolute;
float: left;
}
.thumbnail_image {
position: absolute;
float: left;
opacity: .12;
display: inline-block;
top: 0px;
left: 0px;
}
.text_container {
left: 200px;
width: 400px;
height: 338px;
position: absolute;
}
h1 {
color: #fff;
text-transform: uppercase;
font-size: 60px;
font-family: Montserrat;
font-weight: 700;
line-height: 1.1;
text-align: left;
}
.author_name {
position: absolute;
left: 206px;
bottom: 0px;
}
h3 {
font-family: Open Sans;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
text-align: left;
color: #fff;
}
p {
font-family: "Roboto";
font-weight: 700;
font-size: 14px;
color: #fff;
text-align: center;
}
h6 {
font-family: Open Sans;
font-weight: light;
font-size: 22px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}
html {
background: linear-gradient(209deg, #E5ECEF 40%, #BBC2C5 100%) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#footer {
clear: both;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="box">
<div class="heart_button">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457311522/little_heart_jle1j3.png">
</div>
<div class="heart_background">
</div>
<div class="image_overlay">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
<div class="author_name">
<h3> - Sheldon Cooper </h3>
</div>
<div class="quote_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457314397/quotations_image_wfwimc.png">
</div>
</div>
</body>
<footer>
<div>
<h6>A Project by Charles Bateman</h6>
</div>
</footer>
I'm trying to create a template for some rotating spotlights we create here at work, and what I'm trying to do should be rather simple.
Here is my fiddle: http://jsfiddle.net/aeromax/2t4k4cf9/
What I'm trying to do, is to get #spotlightCTA to float right (easily doable) and align to the bottom of the #spotlightTitle, so that the call to action moves up or down depending on how tall the title is.
Here is the styles associated with these two divs:
#spotlightTitle {
width: auto;
height: auto;
display: inline-block;
bottom: 0px;
}
#spotlightCTA {
position: relative;
display: inline-block;
width: 300px;
text-align: right;
cursor: pointer;
right: 0px;
float: right;
}
And my HTML
<div id="spotlightContent">
<div id="spotlightTitle">
<div class="title">This is a test title.<br>Let's make it longer.
</div>
</div>
<div id="spotlightCTA" class="animate">
<span>This is a call to action.</span>
<button type="">Test button</button>
</div>
</div>
If I float right, it aligns to the top. If I remove the float, it aligns to the bottom but I can't get it to align to the right.
Thanks in advance!
Flexbox can do that.
div {
background-color: rgba(10, 10, 10, .2);
}
/*Containers*/
#spotlightContainer {
position: relative;
height: 200px;
width: 646px;
padding: 10px 20px 0px 20px;
background-color: rgba(0, 0, 0, .4);
}
#spotlightContent {
width: 646px;
height: auto;
padding: 30px 0px 0px 0px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#spotlightTitle {
width: auto;
height: auto;
display: inline-block;
bottom: 0px;
}
/*CTA*/
#spotlightCTA {
position: relative;
display: inline-block;
width: 300px;
text-align: right;
cursor: pointer;
right: 0px;
float: right;
}
#spotlightCTA span {
font-family: "Open Sans", "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: 300;
color: #fff;
display: inline-block;
padding: 5px 0px 0px 0px;
}
#spotlightCTA button {
background-color: #ffd200;
border-radius: 0px;
border: none;
margin: 0px 0px 0px 15px;
padding: 5px;
vertical-align: text-bottom;
}
.title {
font-family: "Oswald", "Helvetica Neue", helvetica, arial, sans-serif;
color: #fff;
font-weight: 600;
max-width: 400px;
font-size: 32px;
line-height: 1.2;
display: inline-block;
}
<div id="spotlightContainer">
<div id="spotlightContent">
<div id="spotlightTitle">
<div class="title">This is a test title.
<br>Let's make it longer.
</div>
</div>
<div id="spotlightCTA" class="animate">
<span>This is a call to action.</span>
<button type="">Test button</button>
</div>
</div>
</div>
I am having trouble vertically aligning the 's text inside a div.
This is what I have. I need to center "Next" inside the blue box:
#import url(http://fonts.googleapis.com/css?family=Muli);
/*Makes the little side arrow*/
.open {
position: fixed;
width: 100px;
height: 40px;
left: 50%;
top: -1000px;
margin-left: -80px;
margin-top: -30px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 6px;
padding: 10px 30px;
color: #444;
transition: all ease-out 0.6s;
}
.open:hover {
border: 1px solid #aaa;
box-shadow: 0 0 8px #ccc inset;
transition: all ease-out 0.6s;
}
.tutorial-box {
position: fixed;
width: 400px;
height: 238px;
top: 75px;
background-color: #F3F3F3;
border-radius: 6px;
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
}
.slider-turn p, .tutorial-box h1{
margin-left: 10px;
}
.tutorial-box:before {
content: '';
position: absolute;
left: -14px;
top: 28px;
border-style: solid;
border-width: 10px 14px 10px 0;
border-color: rgba(0, 0, 0, 0) #f3f3f3 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.tutorial-box p {
width: 350px;
font-size: 16px;
color: #a8aab2;
font-weight: 400;
line-height: 28px;
float: left;
margin: 0;
}
.tutorial-box .bottom {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
bottom: 0;
position: absolute;
}
.tutorial-box .bottom .btn-2 {
flex: 3;
-webkit-flex: 3;
-ms-flex: 3;
width: 100%;
height: 54px;
background-color: #373942;
border-bottom-left-radius: 6px;
display: flex;
}
.tutorial-box .bottom span {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
line-height: 54px;
color: #fff;
margin-left: 25px;
font-size: 18px;
}
.next {
text-decoration: none;
display: inline-block;
vertical-align: middle;
text-align: center;
flex: 1;
background-color: #6cb5f3;
border: 0;
margin: 0;
padding: 0;
text-transform: uppercase;
color: #fff;
font-weight: bold;
border-bottom-right-radius: 6px;
cursor: pointer;
transition: all .3s;
}
.next:hover {
text-decoration: none;
background-color: #6BA5D6;
transition: all .3s;
}
.next:active {
text-decoration: none;
background-color: #5F8AAF;
}
.slider-tutorial-box {
width: 350px;
margin: 0 25px;
overflow: hidden;
}
.slider-turn {
width: 10000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TUTORIAL -->
<div class="tutorial-box">
<h1>Welcome</h1>
<span class="close"></span>
<div class="slider-container">
<div class="slider-turn">
<p>
Here, under the Company tab, is where you will do most of the company managment.<br>
</p>
</div>
</div>
<div class="bottom">
<div class="btn-2">
<span>Step 2/?</span>
</div>
Next
</div>
</div>
Please let me know how I can center the text vertically to the center of the div.
Thank you very much. Let me know if I wasn't clear enough.
Seems like you already did that for .tutorial-box .bottom span so, do the same thing for .next
.next{
line-height: 54px;
}
the simplest and possibly most easy way would be to add the 'center' and '/center' tag before and after the text you want, and after each letter use '/br' to move to the next line. this will add some bulk, but would be considerably easier than other methods.
<center>
'letter'</br>'next letter'</br>'next letter'</br>
</center>
repeating the letter and break for all letters
alternatively, you could also add "div" tags around the "a" tag. you would have to modify the 'height' and 'width' to make it vertical for you. I would use px for this and not '%' or 'em'. add this to them:
<div style="height: /* modify this */100px; width: /* and this*/20px;">
Next
</div>
this may not be AS compatible cross platform though.
Like this:
.next {
position: relative;
top: 50%;
transform: translateY(-50%);
}
A nice trick that works both vertically and horizontally.
SOLVED:
I have a demo which works on jsFiddle, but the same one doesn't work on other site. You will see the .right_side_header class overflow onto the next line, which is under the main_container-->header--->class. Why is this so? It is 763px, I've double checked the pixels for every box, but it overflows. Can someone please tell me why? If you inspect the element, and uncheck the width of 763px, it doesn't overflow.
Here's the code for some of the header css:
.header {
display: block;
padding-top: 33px;
padding-left: 30px;
padding-right: 30px;
margin-left:auto;
margin-right:auto;
width: 900px;
}
.right_side_header {
display: inline-block;
vertical-align: top;
padding-top: 35px;
width: 763px;
}
img.globe {
display: inline;
}
#globe-logo {
display: inline;
position: relative;
z-index: 9000;
}
span.letter_logo {
font-family: HelveticaBlack;
font-size: 41px;
height: 41px;
line-height: 1;
margin-left: auto;
margin-right: auto;
text-align: center;
text-shadow: 1px 1px 0px rgba(245, 245, 245, 0.35), -1px -1px 0px rgba(245, 245, 245, 0.35);
}
div.letter_logo_container {
text-align: center;
display: block;
line-height: 1;
width: 621px;
}
and here is the code for the nav_bar css:
div.nav_phone {
height: 18px;
padding-top: 3px;
width: 621px;
display: inline-block;
}
span.sales_ph_num {
font-family: HelveticaItalic;
font-size: 11.5px;
color: #c10d24;
text-shadow: 1px 1px 0px rgba(245, 235, 236, 0.4), -1px -1px 0px rgba(245, 235, 236, 0.4);
}
div.sales_ph_num {
text-align: center;
display: inline-block;
vertical-align: top;
width: 110px;
}
.nav_bar {
background-image: url("132/nav_bar.png");
background-repeat: no-repeat;
height: 18px;
width: 621px;
position: relative;
}
div#links {
line-height: 1;
position: absolute;
top: 50%;
left: 119px;
margin: -6px auto 0 auto;
font: 12px HelveticaMedium;
text-align: center;
text-shadow: 1px 1px 0px rgba(237, 237, 237, 0.5), -1px -1px 0px rgba(237, 237, 237, 0.5);
}
#Products {
margin-left: 36px;
}
#Terms, #Terms_Nav {
margin-left: 36px;
}
a.Terms, a.Terms:visited, #Home a, #Home a:visited, a#About, a#About:visited,
#About a, #About a:visited {
text-decoration: none;
color: #000000;
cursor:pointer;
}
li#line_break {
margin-top: 12px;
}
#About {
text-decoration: none;
color: #000000;
margin-left: 36px;
margin-right: 35px;
}
and this is the main_body css:
html, body {
width: 100%;
height: 100%;
background-color: #fafafa;
-webkit-overflow-scrolling: touch;
position: relative;
overflow-x: hidden;
}
.main_container {
max-width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-o-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
position: absolute;
left: -9999em;
}
and theres a css that does a reset:
* {
margin: 0;
padding: 0;
}
Thank you for any help.
Remove the top: -61px; from div.ad_banner.
Also if you are having a loading screen I would recommend having some kind of simple animation just so it doesn't look like the page has died.
You have limited your right_side_header class to 763px, also your sales_ph_num class is limited to 110px.
But on jsfiddle you have set 900px and 137px respectevly.
Just set same values like you did on jsfiddle. =))
SOLUTION:
ok this issue was bugging me for awhile, and i don't understand why this is. i noticed some extra 1 or 2 pixels of whitespace between the sales_ph_num div and the nav_bar div, there shouldn't have been any. then i saw that i was using inline-block, searched on SO for inline-block and unaccounted whitespace, and there you go. i had used inline block with 2 or 3 divs, and it was adding extra whitespace, which was making the content overflow since every box had a width.
if you have two divs side by side, with one div as inline, and the other inline-block, and you place the div tags in html on separate lines, white space is added:
<div class="container_1000px">
<div class="container">
My content.
</div>
<div class="next_container">
Next content.
</div>
</div>
.container_1000px
{
width: 1000px;
}
.container
{
display: inline;
width:960px;
}
.next_container
{
display: inline-block
width: 40px;
}
this will overflow because extra whitespace is added between the inline and inline-blocked div.
the solution is to place each divs on one line.
<div class="container_1000px"><div class="container">My content.</div><div class="next_container">Next content.</div></div>
and no extra whitespace will be added. thanks again.
Can anyone explain to me why this happens and why it should/shouldn't?