CODEWITHSUNDEEP
htmlcss
Xeen
Xeen

Reputation: 7003

How to margin bottom without float?

I have a list of links for a menu and those links should be centered when the window size isn't big enough to hold them all in one line. So I made this CSS:

.aboutLevel2,
.centerLevel2 {
  float: left;
  width: 100%;
  text-align: center;
  display: inline;
}
.centerLevel2 a {
  margin-right: 10px;
  margin-bottom: 25px;
  padding: 7px 10px 6px 15px;
  background: #595959;
  color: #fff;
}

And it centers the links fine, but margin-bottom: 25px doesn't work. How could I make the links have that kind of a margin when they have been centered because the window size isn't big enough to let them all stay in one line?

Edit http://jsfiddle.net/rvwzcjzq/

Upvotes: 1

Views: 193

Answers (5)

frenchie
frenchie

Reputation: 51937

Margins won't work because you're using float and so the container that contains those elements won't have the expected height. There are 3 solutions: a) use padding instead of margin (not always possible) or b) add an empty clearing div after the floated elements, something like this: <div style="clear:both;"></div> or c) add overflow:hidden; to the container. You can read more about the issue you're discussing by Googling for "clearing div after float"

Edit: now that you've added a jsFiddle, you can fix your problem like this:

.aboutLevel2, .centerLevel2 {
    float: left;
    width: 100%;
    text-align: center;
}
.centerLevel2 a {
    margin-right: 10px;
    display:inline-block;
    margin-bottom:20px;
    padding: 7px 10px 6px 15px;
    background: #595959;
    color: #fff;
    text-decoration: none;
}

Upvotes: 1

ketan
ketan

Reputation: 19341

You have to use display: inline-block; to anchor tag for giving margin.

.centerLevel2 a {
    margin-right: 10px;
    margin-bottom: 55px;
    padding: 7px 10px 6px 15px;
    background: #595959;
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

Check Updated Fiddle

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

You have to give display:inline-block to .centerLevel2 > a not for .centerLevel2 like this: Demo

.centerLevel2 > a {
    margin: 0px 10px 55px 0;
    padding: 7px 10px 6px 15px;
    background: #595959;
    color: #fff;
    text-decoration: none;
     display: inline-block;
}

Upvotes: 0

freewheeler
freewheeler

Reputation: 1356

You can use line-height property

JSFiddle

.centerLevel2 a {
margin-right: 10px;
line-height: 35px;
padding: 7px 10px 6px 15px;
background: #595959;
color: #fff;
text-decoration: none;
}

Upvotes: 0

Antoine Pointeau
Antoine Pointeau

Reputation: 399

I fix your problem with add display: block; to your links :

.centerLevel2 a {
display: inline-block;
margin-right: 10px;
margin-bottom: 55px;
padding: 7px 10px 6px 15px;
background: #595959;
color: #fff;
text-decoration: none;}

Upvotes: 0

Related Questions