I am still working on improving my first website project. One issue that is repeatedly causing me a headache is that some sections keep overflowing into those above. When I say overflow, I mean that when I click on the element in brackets, when hightlighted in the live preview, it is showing the margins to actually be around other content above (as shown in picture). This is happening with various sections of my website an I cannot understand why. I am a total beginner here so i'm sure theres a simple reason as to why and how to fix it universally across the website.
Overflow issue in this image
For some sections I can overcome this with the 'overflow: none" property but ideally i'd like to solve this without the need to repeatedly use it. Note, the overflow none property isnt working for all sections, in particular the one I have shown an image of. Could anyone give some clarity here please?
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #f6f8fa;
color: #4E6E9B;
font-family: 'Signika', sans-serif;
font-weight: 'E';
}
/* END GENERAL STYLES -----------*/
.one-third-container {
float: left;
width: 100%;
overflow: hidden;
}
.about-one-third {
width: 33.3333%;
padding: 2% 0;
float: left;
text-align: center;
background-color: #0066B2;
color: #f6f8fa;
}
.about-one-third i {
font-size: 8rem;
padding-bottom: 5%;
}
/* END ONE THIRD SECTIONS ------*/
.services-offered {
padding-left: 0;
margin: 2% 5%;
-webkit-padding-start: 0;
list-style-type: none;
overflow: none;
}
.services-offered li {
display: inline-block;
width: 20%;
vertical-align: top;
padding: 0 0 0 1.8rem;
text-align: justify;
}
.services-offered li:before {
content: "\f00c";
font-family: FontAwesome;
width: 1.8rem;
margin-left: -1.8rem;
margin-right: 0.5rem;
}
/* END SERVICES OFFERED ---------*/
<!DOCTYPE html>
<html>
<head>
<title>W Gooderham Gas Services</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:200,700|Signika:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>[enter image description here][1]
<div class="one-third-container">
<section class="about-one-third">
<td>
<i id="third-border" class="fa fa-calendar"></i>
</td>
<h2>Routine Servicing</h2>
</section>
<section class="about-one-third" id="centre-third">
<td>
<i id="third-border" class="fa fa-wrench"></i>
</td>
<h2>Installation</h2>
</section>
<section class="about-one-third" id="breakdown">
<td>
<i class="fa fa-snowflake-o"></i>
</td>
<h2>Breakdowns</h2>
</section>
</div>
<! END ONE THIRD SECTION --------------------->
<ul class="services-offered">
<li>
Installation and commission of natural gas central heating systems.
</li>
<li>
Routine servicing of all natural gas appliances including warm air units.
</li>
<li>
If any of your gas appliances breakdown, we provide a 7 day a week callout service to get them back up and running.
</li>
<li>
We can provide gas safety landlord certification for all gas appliances in your properties.
</li>
</ul>
The reason the elements "overflow" to the elements above is because you used float: left; on the class one-third-container (which is fine!). But if the element below doesn't have any float you get the unwanted result of the element getting pushed higher than intended. If you add float:left; to the ul (or the class services-offered) you can prevent this issue.
Edit: Removing the float:left would also work in this case, as the element doesn't need to be floated.
Edit 2: Floats are indeed not that much of the go-to-choice as they were a few years ago. Uncleared elements are a common issue when using floats, which is why flexbox is considered to be better. Flexbox has alot of use cases that simplify many layout problems, that are a little trickier to solve without flexbox. However using flexbox on every element without paying any thought to it can produce unwanted results like for example this:
.container {
height: 500px;
display:flex;
}
<div class="container">
<img src="http://via.placeholder.com/350x150">
</div>
In the code snippet the image is skewed. You can fix this pretty easily by adding align-items to the .container, but the point is, that using flexbox on all elements can possibly cause issues, where they are unneccessary.
That said, using flexbox is definitely a good thing as long as you are paying attention to the elements you're applying it to.
Related
ETA: Thanks for all the help, everyone! These all worked beautifully. Thanks so much for your time!
I'm coding a newsletter (live preview here and my goal for it here) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. When I try top-margin in the navButtons class I'm not seeing any success. I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help.
<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>
<style>
div
{
display: inline;
}
a
{
text-decoration: none;
}
p
{
text-align:left;
margin-left: 130px;
margin-right: 130px;
max-width: 600px;
}
#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
position:relative;
}
#navButtons
{
position:relative;
right:-240px;
}
#announcementImage
{
margin-left: 120px;
margin-right: 120px;
}
a.joinButton
{
margin-left:40%;
color:white;
background-color: #f7853e;
font-size: 30px;
}
a.navButton
{
color:#494541;
font-size: 22px;
}
</style>
</head>
<body>
<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>
<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url"> Meet </a>
<a class = "navButton" href="url">Learn </a>
<a class = "navButton" href="url">Support </a>
</div>
<br>
<br>
<br>
<br>
<br>
<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>
<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by
showing how making art and making money don't have to conflict.
Have a comment on a workshop you've attended or a session you'd like to see in our remaining
Design and Launch weeks? Galen would love to hear from you!</p>
</div>
</body>
Try this
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I think what your looking for is:
#logo {
vertical-align: middle;
}
Try adding bottom of something like 60px to div with id nav buttons.
Since this element is position: relative, it's placement can be controlled with left, right, top, bottom, like so:
#nav#buttons {
bottom: 50px;
}
Floating the logo left, and adding margin to the #nav will do the trick.
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
You're almost there. Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on.
Then try this:
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}
I have a <h2 class="landing-panel-title> with a <span class="landing-panel-icon-right ion-ios-search-strong> nested inside. The second class on the span comes from a custom icons font called ionicons and is probably not relevant.
This is a header accompanied by an icon. I want to put a margin between the icon and the title (I want the icon on the far right when after text, and the text on the far right when the icon is on the left of the text), that auto expands as much as it can. I tried achieving this with text-align, but so far haven't been able to get it to work.
http://jsfiddle.net/eakfsLr3/
HTML:
<div class="landing-panel">
<h2 class="landing-panel-title">Site Reviews<span class="landing-panel-icon-right ion-ios-search-strong"></span></h2>
<p class="landing-panel-text">I have been searching for different PTC sites, collecting knowledge and data, testing the theories, and made a general collection of what I found useful and relevant.</p>
</div>
<div class="landing-panel">
<h2 class="landing-panel-title"><span class="landing-panel-icon-left ion-erlenmeyer-flask"></span>Methodical Approach</h2>
<p class="landing-panel-text">We have collected data and tested the relevant info through my partner in crime, and he's using our guides and the knowledge to build his career in PTCs.</p>
</div>
<div class="landing-panel">
<h2 class="landing-panel-title">Results<span class="landing-panel-icon-right ion-clipboard"></span></h2>
<p class="landing-panel-text">We won't serve you bullshit, we give you relevant information that our staff has deemed legit and working. Enjoy the read!</p>
</div>
CSS:
.landing-panel {
background-color: #d5f5e3;
padding: 0.5em;
margin-bottom: 0.5em;
}
.landing-panel-title {
width: 100%;
}
.landing-panel-icon-right, .landing-panel-icon-left {
color: #913D88;
font-size: 3em;
}
.landing-panel-icon-right {
text-align: right;
}
.landing-panel-icon-left {
text-align: left;
}
.landing-panel-title, .landing-panel-icon, .landing-panel-text {
margin: 0;
padding: 0;
}
Any help is appreciated.
If I understood correctly, you want this? http://jsfiddle.net/sergdenisov/yv2xazjh/1/
.landing-panel {
background-color: #d5f5e3;
padding: 0.5em;
margin-bottom: 0.5em;
}
.landing-panel-title {
display: table-cell;
width: 100%;
}
.landing-panel-icon {
display: table-cell;
color: #913D88;
font-size: 3em;
}
.landing-panel-title, .landing-panel-icon, .landing-panel-text {
margin: 0;
padding: 0;
}
.landing-panel-icon + .landing-panel-title {
text-align: right;
}
<div class="landing-panel">
<h2 class="landing-panel-title">Site Reviews</h2>
<span class="landing-panel-icon ion-ios-search-strong">Icon</span>
<p class="landing-panel-text">I have been searching for different PTC sites, collecting knowledge and data, testing the theories, and made a general collection of what I found useful and relevant.</p>
</div>
<div class="landing-panel">
<span class="landing-panel-icon ion-erlenmeyer-flask">Icon</span>
<h2 class="landing-panel-title">Methodical Approach</h2>
<p class="landing-panel-text">We have collected data and tested the relevant info through my partner in crime, and he's using our guides and the knowledge to build his career in PTCs.</p>
</div>
<div class="landing-panel">
<h2 class="landing-panel-title">Results</h2>
<span class="landing-panel-icon ion-clipboard">Icon</span>
<p class="landing-panel-text">We won't serve you bullshit, we give you relevant information that our staff has deemed legit and working. Enjoy the read!</p>
</div>
Make your span class as display:inline-block
span {
display:inline-block; /*this enables margins to work*/
margin: 0 10px;
}
Try
.landing-panel-title>span{
width:..px /*set as much required */
display:inline-block;
text-align:center;/* left/right */
}
or if You just want a small margin between them, then put before span element
or if you just want icon to be on the right of the header then-
.landing-panel-title>span{
position:absolute;
right:0;
/* This would make icon always at right */
}
I’m trying to recreate this sort of layout:
This is the code I’m currently using to accomplish it:
<table style="border:0px;">
<tbody>
<tr style="border:0px;">
<td><img src="twophones.jpg" alt="" /></td>
<td>
<table style="border:0px;">
<tbody>
<tr width="100%" style="border:0px;">
<td width="100%">
<center>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br>
<h33>Coming soon to the App Store and Google Play.</h33>
<table style="border:0px; width:410px;">
<tr style="border:0px;"><td style="border:0px;"><img src="dot.png"></td></tr>
<tr style="border:0px;" width="410">
<td style="border:0px;"><img src="app.jpg" alt="" /></td>
<td><img src="android.jpg" alt="" /></td>
</tr>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Unfortunately, I’m sick of maintaining this table gunk. How can I maintain the same layout, but using standard CSS techniques?
Here are a couple of my attempts:
<div id="parent"> <div id="viewport">
<a href="#">
<img src="twophones.jpg" style="float:left;> <img src="twophones.jpg" alt="" />
<h11 style="width:100%;float:right; display: table-cell; vertical-align: middle;">DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<span><h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11><br>
<h33>Coming soon to the App Store and Google Play.</h33>
<br>
<h33 style="width:100%;float:right; display: table-cell; vertical-align: middle;">Coming soon to the App Store and Google Play.</h33>
</span>
</a>
</div> </div>
<div id="parent"> <div id="parent">
<img src="twophones.jpg" style="float:left;"> <img src="twophones.jpg" style="float:left;>
<div style="width:65%;float:right;"> <div style="width:65%;float:right;">
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br> <br>
<h33>Coming soon to the App Store and Google Play.</h33>
<h33>Coming soon to the App Store and Google Play.</h33>
</div> </div>
First thing you want do to when doing a layout with CSS is, well, not touching the CSS and dealing purely with the content. How best could we represent this content? I think this includes all the content rather semantically:
<section>
<img src="twophones.jpg" alt="">
<h2>Discover the brands and styles designed for you</h2>
<p>Coming soon to the App Store and Google Play</p>
<ul>
<li class="iphone">
<a href="#">
Available on the
<strong>App Store</strong>
</a>
</li>
<li class="android">
<a href="#">
Available on the
<strong>Android Market</strong>
</a>
</li>
</ul>
</section>
It contains all the content, but it doesn’t look great. It looks sort of like this:
(picture of two phones)
Discover the brands and styles designed for you
Coming soon to the App Store and Google Play
Available on the App Store
Available on the Android Market
Your layout doesn’t quite look like that. First big difference is that nothing’s centered here, but that’s trivial to fix: (take a look)
section {
text-align: center;
}
And what about those buttons? Well, each one functions sort of as a blocky part of the page, but we still want it to be inline, so we’ll apply a display of inline-block. Furthermore, we want the bolded part to be on another line, so we’ll set its display to block, which should force that. Lastly for now, we know it’s got a orangish background and border, and looks like it’s got a little shadow on the text, so putting all this together:
section li a {
display: inline-block;
background: orange; /* fallback for browsers that
don't support gradients */
background: linear-gradient(#f9a60d, #f37111);
color: white;
text-shadow: 0 0 -1px 0 black;
border: 1px solid #e79d48;
border-top-color: #ffe37d;
border-radius: 5px;
box-shadow: 0 5px 0 #a95511;
padding: 8px;
text-decoration: none; /* no underlines on our link, please */
text-align: left; /* within the button, left-aligned */
}
section li a strong {
display: block;
}
Nice buttons! But we could still use some icons on them—fortunately, that’s easy: just add a little more padding on the left and apply a background image: (try it)
section li a {
padding-left: 50px;
}
section li.iphone a {
background: orange url(iphone-icon.png) no-repeat 10px 10px;
background: linear-gradient(#f9a60d, #f37111), url(iphone-icon.png) no-repeat 10px 10px;
}
/* similar for Android */
Now how do you get the buttons to appear in a line? Fortunately, that’s simple. First, remove any margins and padding on the list, then make each item inline-block (try it):
section ul {
margin: 0;
padding: 0;
}
section li {
display: inline-block;
}
Now how about that image on the side? It turns out CSS has us covered. We just tell it we want to float it to the left. As a common trick, we’ll also set an overflow: hidden on the container, so the float is entirely contained within the container. (You can’t see it standalone, but you may see the effect if you try to embed it in a larger web page.)
section {
overflow: hidden;
}
section img {
float: left;
}
Try it. Then we have just one minor visual tweak: we want the header to be uppercased. Fortunately, CSS has us covered there, too! Just apply
section h2 {
text-transform: uppercase;
}
And we’re done. Of course, there’s more you could do: adjust the margins and/or padding to change the spacing; change the font if necessary, etc., etc., but I’ve explored a few techniques that are generally applicable:
Floats are used and abused all the time in CSS. They’re useful.
Changing display can be useful to force elements to display in or out
of a line.
Playing with background can put icons on things.
I don’t mean for this to be a huge code dump; rather, I’d hope you’d learn something out of it, and be able to do similar things yourself.
I don't think I can go any more in-depth or explain anything better than the fantastic answer by icktoofay, but here is a simple layout that could also get you started.
Here is the demo.
Let's start with the basic HTML layout:
<div class="wrap">
<div class="image">
<img src="http://www.placehold.it/400X500" />
</div>
<div class="information">
<h1>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h1>
<h2>Coming soon to the App Store and Google Play.</h2>
<a class="storeLinks">Play store</a>
<a class="storeLinks">APP store</a>
</div>
</div>
Now let's add in some CSS to layout your HTML elements. In this example:
display: table-cell; can be used to vertically align our content in conjunction with vertical-align: middle; and place our image to the left of the text.
html,body { height: 100%; } allows us to give our wrapping .wrap div a height of 100% so that all the content contained within <div class="wrap"> can be vertically centered.
.wrap > div will target only the divs that are directly after <div class="wrap">.
margin: 0 auto;, along with a fixed width, keep all our content horizontally centered.
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.wrap {
display: table;
height: 100%;
width: 900px;
margin: 0 auto;
}
.wrap > div {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
width: 400px;
}
.information {
width: 500px;
text-align: center;
}
h1 {
text-align: center;
padding: 10px;
margin: 10px;
}
h2 {
padding: 10px;
margin: 10px;
}
.storeLinks {
display: inline-block;
padding: 20px;
background: #DDD;
padding: 10px;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am creating a three column style webpage to describe my experience and a bit about me. I want the left and right columns to have borders, but not the middle one. I don't want anything to overlap, and it needs to look good on all screen sizes. (With obvious ridiculous exceptions e.g. Smart watches). My HTML and CSS are below, and are linked together. I am new to web programming, and any metaphor to Objective-C would be helpful.
HTML : http://pastebin.com/QJ5VkJGF
CSS : http://pastebin.com/qCcuHiXq
Here is the revised code:
CODEPEN
HTML,
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>About Me</title>
<meta http-equiv="refresh" content="1" > <!--TEMPORARY-->
</head>
<body>
<div class="container">
<div class="left">
<h2 class=tableheader>About Me:</h2>
<ul>
<li>I am a 16 year old boy from East Norriton, PA.</li>
<li>I am currently attending Norristown Area High School.</li>
<li>Next year, I will be attending Montgomery Technical school for networking.</li>
<li>I have been programming since I was 11.</li>
<li>I am fluent in HTML5/CSS, and am currently in the process of learning Javascript and Objective C.</li>
<li>Social Plug:
<br></br><br></br>
<a class="links" href="http://www.twitter.com/AlexNoyle">Twitter</a><br></br>
<a class="links" href="http://instagram.com/alexnoyle">Instagram</a><br></br>
<a class="links" href="https://www.youtube.com/user/alexnoyle">Youtube</a><br></br>
<a class="links" href="http://stackoverflow.com/users/3366059/alex-noyle">Stack Overflow</a>
</li>
</ul>
</div>
<div class="middle">
<h2>Alex Noyle</h2>
<h4>My Vision</h4>
<h4>Contact</h4>
<p>You can e-mail me # alexnoyle#icloud.com. I reply quickly and have a self-proclaimed good sense of design with a bias to minimalism and simplicity.</p>
</div>
<div class="right">
<h2 class="tableheader">Experience:</h2>
<ul>
<li>Avid member of the IOS Jailbreaking community since 2009.</li>
<li>Advanced Linux command line user / ESN flasher.</li>
<li>UNIX Filesystem reverse-engineering since 2012.</li>
<li>Undisclosed and EXITING projects coming in the near future. *Hint: Modifying IOS*</li>
<li>Your project here! As a freelance developer I can do almost anything you request.</li>
<li>Open Source is the future. Get the source code for this website here:
</li>
<br></br><br></br>
<!--Add proper download links below-->
<a class="links" href="www.google.com">Mirror 1</a> |
<a class="links" href="www.twitter.com">Mirror 2</a>
</ul>
</div>
</div>
</body>
</html>
CSS,
* {
font-family: Verdana;
box-sizing: border-box;
}
li {
padding-top: 30px;
padding-right: 20px;
}
body {
width: 100%;
min-width: 1024px;
}
.container {
display: table;
width: 100%
}
.left,
.middle,
.right {
display: table-cell;
padding: 10px
}
.left {
height: 750px;
width: 300px;
margin-top: 5px;
padding-top: 10px;
text-align: left;
border: 1px solid black;
background-color: white;
position: relative;
}
.tableheader {
text-align: center;
}
.links {
text-decoration: none;
}
.right {
height: 750px;
width: 300px;
margin-top: 5px;
padding-top: 10px;
text-align: left;
border: 1px solid black;
background-color: white;
position: relative;
}
.middle {
width: 500px
}
tip to beginner:
use *{box-sizing: border-box} this is the CSS magic for width property that separates you from other beginners.
use reset.css to get rid of unwanted default behavior style
use display: table and display: table-cell for containers. It makes life much easier.
dude, your code is very messy. misplaced tags, wrong indentation, wrong practice of css selectors, and more...
practice practice and practice :) you will get there eventually
UPDATE #2: I have solved almost all my issues bar the one major one. With the same structure and CSS IE7/6 displays each a with 100% width of it's container. I need this to no happen. Besides that everything else is fine. Can anyone enlighten me?
UPDATE: Should Look Like This
I have the following html page (detailed below). It simply renders 2 styled buttons from the links. My problem is IE6 & 7 renders it differently than Firefox, Safari, IE8 and Chrome that all render it correctly.
I have been banging my head against the wall for a day now trying to make it work in IE6/7. Can anyone offer advice as to what I am doing wrong?
Thanks
<html>
<head>
<style>
.niw-button {
background: #1f81c0 url(niw-btn-gradient-normal.png) repeat-x;
border: none;
color: #fff;
display: inline-block;
font-weight: bold;
margin-right: 6px;
min-width: 95px;
padding: 2px;
text-decoration: none;
}
.niw-button:hover {
background: #5e698f url(niw-btn-gradient-hover.png) repeat-x;
}
.niw-button > .niw-button-contents {
border: 1px solid #73b1da;
}
.niw-button > .niw-button-contents:hover {
border: 1px solid #99a1bc;
}
.niw-button .niw-button-icon {
background-position: center;
background-repeat: no-repeat;
float: right;
height: 25px;
width: 27px;
}
.niw-button .niw-button-text {
height: 25px;
line-height: 1.5em;
padding-left: 5px;
padding-right: 27px;
text-align: center;
text-transform: uppercase;
}
.right-align {
float:right;
}
.niw-icon-cancel {
background-image: url(niwater_cancelIcon.png);
}
</style>
</head>
<body>
<a class="niw-button right-align" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
<a class="niw-button" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
</body>
</html>
EDIT: Now that I understand your image:
Just make your <a> elements block elements with display:block and put some kind of span inside of them to hold the icon. Or you could make the whole thing an image...
IE6/7 doesn't support display: inline-block, IE6 doesn't support the child (parent > child) selector. So you probably should look into those points in your css...
Edit: I actually don't get correct rendering in IE8, which is what I address below:
For a start, you should put the <a> elements inside the elements rather than the other way round. Block level elements shouldn't really exist within inline elements. e.g.
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button right-align" href="#">Cancel</a></div>
</div>
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button" href="#">Cancel</a></div>
</div>
This fixes the positioning for me but there is a subsequent loss in styling. I haven't tinkered with the CSS to correct that yet but it should be straightforward. Secondly, you have an awful lot of classes to deal with a straightforward issue. Arguably you should only need one class in the outer div to identify what's happening inside, and then your CSS can descend from there.
Just one tip for a resource to the button/link problem in general:
http://mezzoblue.com/archives/2008/09/17/anchor_butto/
I'm actually confused myself. How are they supposed to look? If you don't let us know what you're intending to do, it's very difficult to fix the problem.