Removing white space between inline DIV

[KungPaoKitties]

Hello, so I am very much a NOVICE in web design. I am using one of the standard templates in Dreamweaver CS6 and simply modifying it. Anyways my goal is to like a block of images, in 4 rows, 4 columns. I have an uneven amount of images so I want the final row to have two images and have them be centered to look all nice and pretty. I don’t even wanna get into having some padding in between each image and such so I’ll just stick with no spaces at all in between them. SO in order to get these last two images centered on the final row, side by side, I researched and created a DIV with
text-center:align;

Presto bingo that worked. HOWEVER there is a honkin white space between this final row and the previous and everything I have tried just has not worked. I’ll post a link to the full code, which is extremely and embarrassingly messy, but oh well.

Thanks.

[KungPaoKitties]

http://pastebin.com/u6BdMtxn

[KungPaoKitties]

The test website is here:
http://mftest.web44.net/

[chrisburton]

@KungPaoKitties Give the p tag a class and set the font-size to 0 and it’s fixed.

[wolfcry911]

Remove the div around the last two images. Place all the images in the same p. Set that p to text align: center; Done!

[chrisburton]

Yep, I agree with @wolfcry911 (would also help if I didn’t skim the paragraph). Additionally, if you want to remove the spacing and set your own, just add font-size:0; on the p tag. You would need to give it a class name so it doesn’t interrupt your other p tags on the page.

and your CSS would be:

.something {text-align: center; font-size: 0;}

[KungPaoKitties]

Awesome! Thank you so much guys. It’s probably incredibly basic knowledge, but my experience in coding is only with the aid of Dreamweaver and some skims around w3schools :P

[wolfcry911]

I wouldn’t rely on either of those sources to learn CSS!

[nichodiaz]

Hey congrats on starting to learn. I would like to help you.
Here are a few things that will help you be designing in no time.

First of all you need to learn how to design a page from top to bottom. instead of thinking of this as a nice looking site think of it as putting boxes in different places. once you can control where things go then you can decide what things to put there later on.

Also you need to understand the file structure. This mainly to start out with will help you with your styles.css

I am going to post you a link to a you tube video that will show you step by step how to make out a template for a website and your an external css file in order to do so. Once you go through this it will change your perspective completely and probably leap you light years ahead of where you are today.

http://www.youtube.com/watch?v=W0w-2V1fhbA

http://www.youtube.com/watch?v=qOaDqhZLTrM

Just watch these videos. take point of the use of externals files. then create something basic. Once you have done this and you become bored of html and css pick a new language and start learning it. I think PHP is a great way to start once you get a good understanding of html and css. Then php and jquery.

[Author]

Posts