• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 313
  • Last Modified:

Divs alignment and CSS

Hi  

Apologies this is probably very simple :/

There is a main page on my site, as I post new articles I list them on the main page. each listing is in its own div controlled by a class defined in css.
.HomeArticle {
	text-align:left;
	height:71px
}

Open in new window

My problem is, I would like to put some spacing after each one because sometimes they sit to close together like so;
Spacing in chromeSpacing in FirefoxSpacing in IE
I have tried adding both padding and margin to the HomeArticle class, both result in the following,

Spacing Broken
I'm making a schoolboy stupid error, but I don't know what it is :( Can someone point me on the right direction?

Pete
0
Pete Long
Asked:
Pete Long
  • 2
2 Solutions
 
Pete LongConsultantAuthor Commented:
link so you can see what I mean

PL
0
 
Scott Fell, EE MVEDeveloperCommented:
See line 122 in  your css and add margin-bottom

.HomeArticle {
text-align: left;
height: 71px;
margin-bottom: 30px;
}

Open in new window

0
 
Chris StanyonCommented:
Couple of issues here. You are floating the content of the DIV so it effectively collapses. You can stop this by adding overflow:hidden to the DIV and then adding your margin. You then get a problem of the text disappearing if it's deeper than the 71px. Remove that and let the DIV expand to fit the content:

.HomeArticle {
    margin-bottom: 20px;
    overflow: hidden;
    text-align: left;
}

Open in new window

0
 
Pete LongConsultantAuthor Commented:
padas - That had the same effect.

ChrisStanyon - Spot on that's what I needed ThanQ!, I dropped the margin to 5px but that's exactly what I needed :)

Regards,

Pete
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now