How can I get my array of Images to take you want available?

I am creating a web page as part of my learning of html and css, it's a page of bookmarks with the sites I visit most often. The main section of the page is a table of images that are related to their respective sites, the table is of 4 columns of 3 rows. My problem is when in the design window, it appears as it should, but when I press the live button and when I saw in a browser it all the images are in a column on the left side of the page. How can I fix this?

Any help is greatly appreciated.web page help2.pngWeb page help1.png

Thank you.

The tables are a bad choice in Responsive Web Design.  Best option, use CSS floats.

Add this to your CSS:

.myIcons {

overflow: hidden; / * float containment * /.

}

IMG {}

Padding: 2%;

margin: 0.50%.  / * the space between images * /.

float: left;

border: 1px solid #CCC;

Max-width: 100%;

vertical-align: baseline;

}

Replace your table with this:

http://www.Google.com">".

http://www.BBC.co.UK' > '.

http://www.codeacademy.com">."

http://www.NBA.com' > '.

http://www.Facebook.com"> http://www.espn.com" > "

http://www.Twitter.com' > '.

http://www.celticfc.NET/mainindex">."

http://www.YouTube.com' > '.

http://www.collegehumour.com">."

http://www.skysports.com' > '.

http://www.nbcnews.com/ID/3032619/">."

Nancy O.

Tags: Dreamweaver

Similar Questions

Maybe you are looking for