Trending News
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
- fjpoblamLv 71 decade agoFavorite 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!)