This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 8 years ago.
I have some HTML and CSS that creates inline block elements (divs) that one might find on a landing page. However, they only appear to be vertically aligned correctly when they contain some content (an unordered list) inside the divs. If there is no content in the div, the element get pushed down. Here is a jsfiddle. Here is the code. Can anybody explain why the third div block is not vertically aligned?
EDIT: While I'm comfortable that the "fix" to this issue is to ensure that each div uses "vertical-align:top" in the styling, I'm still a little puzzled as to why I'm required to use this styling in the first place. I would think that the div elements would always line up evenly, regardless of the content inside the divs.
<html>
<head>
<style type="text/css">
body {
font-family: Helvetica;
}
h1 {
margin: 0px;
padding: 10px;
font-weight: bold;
border-bottom: 1px solid #aaaaaa;
font-size: 12px;
}
a {
text-decoration: none;
}
ul {
padding-left: 20px;
}
li {
list-style-type: none;
font-size: 12px;
}
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
}
.header {
padding: 10px;
background-color: red;
border-bottom: 1px solid #aaaaaa;
color: #ffffff;
}
a:hover {
text-decoration:underline;
}
h1 > a {
color: #ffffff;
}
h1 > a:hover {
color:#ffffff;
}
li > a {
color: #000000;
}
li > a:hover {
color: #000000;
}
</style>
</head>
<body>
<div>
<div class='landing-block'>
<h1 style='background-color: #3991db;'>
<a href='#'>COMPANIES</a>
</h1>
<ul>
<li><a href='#'>Search Companies</a></li>
<li><a href='#'>New Company</a></li>
<ul>
</div>
<div class='landing-block'>
<h1 style='background-color: #9139db;'>
<a href='#'>PEOPLE</a>
</h1>
<ul>
<li><a href='#'>Search People</a></li>
<li><a href='#'>New Person</a></li>
<ul>
</div>
<div class='landing-block'>
<h1 style='background-color: #c2db39;'>
<a href='#'>Products</a>
</h1>
</div>
<div>
</body>
</html>
inline-block elements are vertical-align:baseline; by default. Change this to vertical-align:top;
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
vertical-align:top; /* add this rule */
}
add vertical-align:top; to .landing-block class
Set vertical-align: top for the .landing-block class declaration in your CSS.
Add float: left
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
float: left;
}
jsfiddle
Related
Good evening,
I've got an exercise to make a Header and buttons under it. We've got ready code for the buttons. Our goal is to put it in a border, make a header over these buttons and align buttons and header to center.
My code looks like this right now
CSS
ul {
float:left;
width: 70%;
padding: 0;
margin: auto;
list-style: none;
}
li a {
display: block;
float: left;
text-align: center;
font-size: 1.2em;
width: 130px;
text-decoration: none;
color: aqua;
background-color: blue;
padding: 10px 0px;
margin: 0px 1px 1px 0px;
border: 1px solid navy;
border-radius: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 2px 3px gray;
-moz-box-shadow: 0px 2px 3px gray;
-webkit-box-shadow: 0px 2px 3px gray;
}
li a:hover {
color: blue;
background: aqua;
border: 1px solid blue;
}
.naglowek {
align-content: center;
text-align: center;
border: 5px solid black;
padding-bottom: 50px;
height: 130px;
}
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Menu poziome</title>
</head>
<body>
<div class="naglowek">
<h1>HEADER</h1>
<section>
<br>
<nav>
<ul>
<li>SUBSITE 1</li>
<li>SUBSITE 2</li>
<li>SUBSITE 3</li>
<li>SUBSITE 4</li>
</ul>
</nav>
</section>
</div>
</body>
</html>
Buttons should find themself under header How could I center this list/buttons? Thanks in advance!
I cut down your code to simplify it. I'm aware that navigation is still often tought with using a list, but with a well established use of flexboxes, grid or inline-blocks not needed. Also you dont need to wrap it into a section if it is already wrapped in navigation.
In this case I just used your links and put a div inside to emulate a button. They are set to inline-block and tehrefor behave as "text" (inline). Therefor the can be easily aligned with text-align: center;
.naglowek {
text-align: center;
border: 5px solid black;
min-width: 600px;
padding: 10px;
}
#navigation a div {
display: inline-block;
text-align: center;
font-size: 1.2em;
width: 130px;
text-decoration: none;
color: aqua;
background-color: blue;
padding: 10px 0px;
margin: 0px 1px 1px 0px;
border: 1px solid navy;
border-radius: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 2px 3px gray;
-moz-box-shadow: 0px 2px 3px gray;
-webkit-box-shadow: 0px 2px 3px gray;
}
#navigation a div:hover {
color: blue;
background: aqua;
border: 1px solid blue;
}
<div class="naglowek">
<div id="header"><h1>HEADER</h1></div>
<div id="navigation">
<div>SUBSITE 1</div>
<div>SUBSITE 2</div>
<div>SUBSITE 3</div>
<div>SUBSITE 4</div>
</div>
</div>
I have a 3 column layout which is successfully giving me 3 columns; however, my third column (similar to my first column) needs margin and padding changes. Unfortunately, I seem unable to adjust margin and padding for that column. I'm not really sure the issue and googling is bringing me no answers.
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
background: #ecf0f1;
color: #2c3e50;
font-family: "Georgia", serif;
}
h1, h2 {
font-family: "Franklin Gothic", sans-serif;
}
.header h1 {
background: #2c3e50;
color:#ecf0f1;
margin: 10px;
padding: 25px 15px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
}
.row {
margin: 0;
padding: 0;
font-size: 0;
}
.row div {
margin: 0;
padding: 0;
font-size: 18px;
}
.col-3 {
width: 25%;
display: inline-block;
}
.col-6 {
width: 50%;
display: inline-block;
}
.menu {
float: left;
}
.menu ul {
list-style-type: none;
margin: 10px 0px;
padding: 0;
}
.menu li {
background: #2980b9;
padding: 10px;
color: #ecf0f1;
padding: 10px;
margin: 5px 25px;
font-family: "Franklin Gothic", sans-serif;
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
}
.right {
float:right;
}
.right p {
margin: 10px;
}
.aside {
text-align: center;
background: #2980b9;
height: 390px;
color: #ecf0f1;
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
/* THESE DO NOT WORK AND I CAN'T FIGURE OUT WHY */
margin: 25px;
padding: 25px;
}
.footer {
width: 100%;
position: absolute;
bottom: 0;
}
.footer p {
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
padding: 50px 0px;
background: #2980b9;
text-align: center;
color: #ecf0f1;
margin: 10px 10px;
}
HTML:
<html>
<head>
<meta chrset="utf-8" />
<title>CMST-290 Project 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>Jacob Johnson</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>Education</li>
<li>Software</li>
<li>Skills</li>
<li>Awards</li>
<li>Experience</li>
<li>Projects</li>
</ul>
</div>
<div class="col-6">
<h1>Career Objective</h1>
<p>
I want to ensure quality in everything I do. I will work hard to achieve the goals my employer has for as well the goals I have set for myself.
</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>Developer</h2>
<p>I am familiar with front end tools such as HTML/CSS and JavaScript in addition to languages like C#, Python, and Java.</p>
<h2>Designer</h2>
<p>I have designed several websites from scratch.</p>
<h2>Student</h2>
<p>I am always eager to learn and keep improving my skills.</p>
</div>
</div>
</div>
<div class="footer">
<p>Copyright © 2017 | Jacob B. Johnson</p>
</div>
<script type="text/javascript" src="/d2l/common/math/MathML.js?v=10.6.10.5455-164 "></script>
<script type="text/javascript">document.addEventListener('DOMContentLoaded', function() { D2LMathML.DesktopInit('https://s.brightspace.com/lib/mathjax/2.6.1/MathJax.js?config=MML_HTMLorMML','https://s.brightspace.com/lib/mathjax/2.6.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML'); });</script>
</body>
</html>
CodePen link
Any insight would be awesome as to why I was so easily able to adjust the left-most column but not the right-most. Thanks.
Your styles on aside are being ignored because the .row div selector is more specific, and therefore overriding margin and padding to zero.
Adding this should make it work:
.right .aside {
margin: 25px;
padding: 25px;
}
You just need higher specificity because you've used .row div with margin: 0; padding: 0;. So to override that CSS with a margin or padding change, you will need to use .row in front of a selector like .col-3, so that the rule is .row .col-3 { /* margin/padding *}
You can read more about specificity here - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Created a wrapper div called top div, got a p tag called Title aligned to the left and another div called buttonCP containing 4 p tags, aligned to the center with margin 0 auto. Now I want a final p tag called Button5 aligned to the right within top div, just cant seem to do it. Inspecting element shows that buttonCP margin auto could be pushing the final p tag out of the wrapper div. Any idea how I can have Button5 on the same line as Title and buttonCP? Thanks in advance!
Here is jsfiddle link:
https://jsfiddle.net/6r6jzypy/
<style> #topdiv {
background-color: #F0F0F0;
height: 40px;
width: 100%;
border: 2px solid #D8D8D8;
float:left;
}
p[name=heading] {
margin: 0;
font-weight: bold;
padding: 10px 8px 6px 8px;
float:left;
font-size: 1.0em;
}
#Result {
margin: 0;
float: right;
}
.button1 {
background-color: #D8D8D8;
margin-top: 3px;
float: left;
padding: 6px 8px 6px 8px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border: 2px solid #D8D8D8;
border-right: 1px;
}
.button2 {
background-color: #D8D8D8;
margin-top: 3px;
float: left;
padding: 6px 8px 6px 8px;
border: 2px solid #D8D8D8;
border-right: 1px;
}
.button3 {
background-color: #D8D8D8;
margin-top: 3px;
float: left;
padding: 6px 8px 6px 8px;
border: 2px solid #D8D8D8;
border-right: 1px;
}
.button4 {
background-color: #D8D8D8;
margin-top: 3px;
float: left;
padding: 6px 8px 6px 8px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border: 2px solid #D8D8D8;
}
#buttonCP {
height: 34px;
width: 290px;
margin: 0 auto;
}
</style>
<body>
<div id="topdiv">
<p name="heading">Title</p>
<div id="buttonCP">
<p class="button1">Button1</p>
<p class="button2">Button2</p>
<p class="button3">Button3</p>
<p class="button4">Button4</p>
</div>
<p id="Result">Button5</p>
</div>
</body>
try this :
<div id="topdiv">
<p name="heading">Title</p>
<p id="Result">Button5</p>
<div id="buttonCP">
<p class="button1">Button1</p>
<p class="button2">Button2</p>
<p class="button3">Button3</p>
<p class="button4">Button4</p>
</div>
</div>
Live demo
First heads up is that I'm in my first year at University and I could be making a dumb as balls mistake. However, when I try to get my a:selected to be the same length as my li:hover, the a:selected seems to be off by a few amount of pixels. I've been messing with the padding and still have no luck. Is there a specific reason with my CSS used or a technical problem/browser interpreting it differently?
Here's my CSS:
a {
font-family: Armata;
}
body {
background-image: url(http://i.imgur.com/26DXP2k.png);
background-repeat: repeat;
background-position: fixed;
}
#siteNavigation {
width: 100%;
margin: 55px 0px;
padding: 0px 0px 0px;
text-align: center;
}
#siteNavigation li:hover {
padding: 0px 0px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
#siteNavigation a:hover {
color: #BDBFBE;
padding: 10px 45px;
}
#siteNavigation ul {
margin-top: 0px;
color: inherit;
}
#siteNavigation li {
margin: 0px;
padding: 0px 0px;
display: inline;
list-style: none;
color: #E03A00;
background-color: #BDBFBE;
border-bottom: 3px solid #E03A00;
border-top: 6px solid #BDBFBE;
border-left: 1px solid black;
border-right: 1px solid black;
}
#siteNavigation a {
margin: 0px;
padding: 0px 45px;
display: inline;
text-decoration: none;
color: #E03A00;
}
#siteNavigation #selected a {
margin: 0px;
padding: 0px 45px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
Here's the HTML:
<!doctype html>
<head>
<title>First Web page</title>
<meta charset="utf-8" />
<meta name="author" content="Matthew Sharp" />
<meta name="description" content="Index page" />
<link href="http://fonts.googleapis.com/css?family=Armata%7cLobster%7cRoboto%7cPontano+Sans" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
<!-- Grey Color's {Light to dark}:
FCFFFD
E3E5E4
BDBFBE
7E7F7F
3F403F
ORANGE: E03A00 //Comment used for personal use due to non saved kuler -->
</head>
<body>
<nav id="siteNavigation">
<ul>
<li>
Home
</li>
<li id="selected">
Structure
</li>
<li>
Common Elements
</li>
<li>
CSS Selectors
</li>
<li>
Common CSS
</li>
</ul>
</nav>
<section id="bodyLayer">
</body>
And the results can be seen here:
Cheers.
Solution in JSFiddle
Basically, the problem is that you're applying the selected CSS to the a tag, when you wanted to apply it to the li tag.
The a tag captures the text and a small area around it based on the margin and padding, but the actual "cell" is represented by the li tag, so that's where you want to apply the selected CSS.
#siteNavigation #selected a { /*should be #siteNavigation li#selected*/
margin: 0px;
padding: 0px 45px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
I also tidied up some of the CSS, like removing the unnecessary padding, the too-thick border-top for selected, and added this :
#siteNavigation #selected a{
color: #BDBFBE;
}
So the text color would be correct.
Check the JSFiddle for the detailed answer.
Here's a cleaned up version of your navigation:
Demo: http://jsfiddle.net/rxh17e3h/
Use float:left instead of display:inline-block
Use class="selected" istead of id
Control everything from the li. Don't assign hover to the a tag
a {
font-family: Armata;
}
body {
background-image: url(http://i.imgur.com/26DXP2k.png);
background-repeat: repeat;
background-position: fixed;
}
#siteNavigation {
width: 100%;
margin: 55px 0px;
padding: 0px 0px 0px;
text-align: center;
}
#siteNavigation ul {
margin-top: 0px;
color: inherit;
}
#siteNavigation li {
float:left;
margin: 0px;
padding: 0px 0px;
list-style: none;
border-bottom: 3px solid #E03A00;
border-top: 6px solid transparent;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: #BDBFBE;
color: #E03A00;
}
#siteNavigation li a{
padding: 10px 45px;
color:inherit;
text-decoration: none;
}
#siteNavigation li:hover, #siteNavigation li.selected{
color: #BDBFBE;
background-color: #E03A00;
border-top: 6px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
}
The problem is that quite simply you are putting an action on the tag and expecting it to behave in the same way as the same action on an tag. Quite simply the two tags hold a different space on your page. The contains your tag.
So apply the behaviour to one or the other.
Some just target the a tag with a:hover a:selected etc others will target li. Whenever I get problems like this I just comment out the dimension code and un comment until the error appears or just use firebug.
I'm starting out in HTML and CSS.
I have a div element on the page, which doesn't fill the whole page.
In it- there's a ul element and some list items in it.
I want to put the list 227px from the top of the div element, but I can't manage to accomplish this- it pushes it more.
Also- between the list items I want a margin of 40 pixels, but it also does more.
What's the problem?
Here's my code:
Html:
<body>
<div class="Hashta">
<div class="Menu">
<ul id="MenuItems">
<li><a href="#" >ONE</a></li>
<li><a href="#" >TWO</a></li>
<li><a href="#" >THREE</a></li>
<li><a href="#" >FOUR</a></li>
</ul>
</div>
</div>
</body>
CSS:
body {
background-color: Gray;
}
.Hashta{
width:874px;
height:650px;
background-color:black;
margin: auto auto 50px auto;
border-radius: 20px;
border: 3px solid darkgray;
moz-box-shadow: 2px 2px 10px black;
webkit-box-shadow: 2px 2px 10px black;
box-shadow: 2px 2px 10px black;
}
.Menu {
margin-top: 227px;
padding-right: 50px;
float:right;
}
#MenuItems {
list-style:none;
}
#MenuItems li {
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-bottom: 40px;
border:none;
}
#MenuItems li a{
width: 280px;
height: 70px;
background-color: green;
color:White;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
line-height: 70px;
}
If you want to measure the pixels- you can install this: http://www.mioplanet.com/products/pixelruler/
(click to rotate)
Thanks!
You should start your styling by resetting all elements so that each browser shows them identical.
You can check one of the many CSS reset libraries around there, but for starting something like this would be already good:
* {
margin: 0;
padding: 0;
}
This, appearing for first in your CSS stylesheet, will remove all margins and paddings for each element, so you can add them later only in the elements you want.
Update
If you want to restore some element margins or paddings after that code (for example in body) simply write a new rule after the one before, like
body {
padding:10px; /* Add 10px to body only */
}
The total height of every list item is height + padding + border + margin.
Change the padding of #MenuItems li into:
padding: 0 10px 0 10px;
See http://jsfiddle.net/NGLN/rBjrD/1/
Add margin:0; padding:0 for body
In #MenuItems li replace:
padding: 4px 10px 4px 10px;
with:
margin: 4px 10px 4px 10px;
This will make the distance equal to 40px between buttons.
Try absolute positioning:
.Hashta{
width:874px;
height:650px;
background-color:black;
margin: auto auto 50px auto;
border-radius: 20px;
border: 3px solid darkgray;
moz-box-shadow: 2px 2px 10px black;
webkit-box-shadow: 2px 2px 10px black;
box-shadow: 2px 2px 10px black;
position:relative;
}
.Menu {
position:absolute;
top:227px;
right:0;
padding-right: 50px;
float:right;
}
try this:
<style>
body {
background-color: Gray;
}
.Hashta{
width:874px;
height:650px;
background-color:black;
margin: auto auto 50px auto;
border-radius: 20px;
border: 3px solid darkgray;
moz-box-shadow: 2px 2px 10px black;
webkit-box-shadow: 2px 2px 10px black;
box-shadow: 2px 2px 10px black;
}
.Menu {
margin-top: 227px;
padding-right: 50px;
float:right;
}
#MenuItems {
list-style:none;
}
.secLi{
text-align:center;
position:relative;
padding: 0px 10px 0px 10px;
margin-right:30px;
margin-top: 40px;
border:none;
}
.firstLi{
text-align:center;
position:relative;
padding: 0px 10px 0px 10px;
margin-right:30px;
margin-top: -16px;
border:none;
}
#MenuItems li a{
width: 280px;
height: 70px;
background-color: green;
color:White;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
line-height: 70px;
}
</style>
<body>
<div class="Hashta">
<div class="Menu">
<ul id="MenuItems">
<li class="firstLi"><a href="#" >ONE</a></li>
<li class="secLi"><a href="#" >TWO</a></li>
<li class="secLi"><a href="#" >THREE</a></li>
<li class="secLi"><a href="#" >FOUR</a></li>
</ul>
</div>
</div>
</body>