How do you make images 2x2 in CSS?

i'm on step 8

http://docs.google.com/gview?a=v&q=cache:plVsgQ2tx...

and here is my CSS code. all i need to do is get them 2x2, but i don't know how.

/*

New Perspectives on HTML and XHTML 5th Edition

Tutorial 4

Review Assignment

Online Scrapbooks Style Sheet

Author:

Date:

Filename: screen.css

Supporting Files: back.jpg, marker.gif

*/

body {margin: 0px; color: black;

background: white url(back.jpg) repeat-y}

h1, h2, h3 {font-family: Arial, Helvetica, sans-serif; color: black; margin: 0px}

h3 {font-size: 10pt}

h1 {border-bottom: 2px solid orange; background-color: white; margin: 0px;

padding: 0px}

ul {margin-top:0px}

img {width: 150px; height: 193px;border:0}

#sample1 a { top:0; left:0;width:450px}

#sample2 a { top:170; left:0;width:450px}

#sample3 a { top:0; left:220;width:450px}

#sample4 a { top:170; left:220;width:450px}

#outer_container {width: 780px}

#head {text-align: right}

#links {float: left; width: 200px}

#links li.newGroup {margin-top:20px}

#links li.sub {margin-left:20px}

#links ul {list-style-type: none; margin-left: 15px; padding-left: 0px;}

#links a:link {text-decoration:none}

#links a:visited {text-decoration:none}

#links a:hover {background-color:white; color:black;text-decoration:underline;}

#links a:active { text-decoration:none}

#content {margin-left: 200px; list-style-image: url(marker.gif)}

address {text-align: center; font-style: normal; font-variant: small-caps;

border-top: 2px solid orange; color: orange; padding-bottom: 50px;

}

i have the pics the right size, i just need the 2 by 2, like this:

[pic1][pic2]

[pic3][pic4]

1 Answer

Relevance
  • 1 decade ago
    Favorite Answer

    < div id="content" >

    ...

    <img style="clear:left;float:left;margin:1em;" ... >

    <img style="float:left;margin:1em;" ...>

    <img style="clear:left;float:left;margin:1em;" ... >

    <img style="float:left;margin:1em;" ...>

    ...

    < /div >

    (It's worth noting that your #sample addresses with their widths of 450px won't fit side-by-side in a 780px container! Or you run the risk of overlay, with the positioning you've specified!)

Still have questions? Get your answers by asking now.