CSS is kicking my butt

HTML & CSS
1

Hey All,

I am getting stuck on this super simple problem, I just cannot figure it out.

If you look at

http://wolphewebdesign.com/Clients/Caddy/test.html

You can see the images are on separate lines. I need them to be on the same line.

Like


http://wolphewebdesign.com/Clients/Caddy/

I know this is something stupid I am missing. If you can look at these codes and just push me in the right direction I would be thankful

Index Page

<html>
<head>
<title>TWO-COLUM FIXED LAYOUT WITH FIXED BOXES</title>
<link ref="stylesheet" type="text/css" href="http://wolphewebdesign.com/Clients/Caddy/style.css" />
</head>
<body>
<div id="div1">
<div id="image1"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_01.jpg" /></div>
<div id="image2"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_02.jpg" /></div>
<div id="image3"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_03.jpg" /></div>
</div>
<br>
<div id="image4"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_04.jpg" /></div>
<div id="image5"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_05.jpg" /></div>
<div id="image6"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_06.jpg" /></div>
<br>
<div id="image7"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_07.jpg" /></div>
<br>
<div id="image9"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_09.jpg" /></div>
<div id="image10"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_10.jpg" /></div>
<div id="image11"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_11.jpg" /></div>
<div id="image12"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_12.jpg" /></div>
<div id="image13"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_13.jpg" /></div>
<div id="image14"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_14.jpg" /></div>
<br>
<div id="image15"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_15.jpg" /></div>
<div id="image16"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_16.jpg" /></div>
<div id="image17"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_17.jpg" /></div>
<br>
<div id="image18"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_18.jpg" /></div>
<div id="image19"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_19.jpg" /></div>
<div id="image20"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_20.jpg" /></div>


<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

CSS


#div1 {
width:520px;
}



#image1 {
  float: left;
 cellpadding: 0px;
  width: 208px;
  height: 75px;
}

#image1 {
  float: left;
 cellpadding: 0px;
  width: 104px;
  height: 75px;
}
#image3 {
  position: absolute;
  top: 0px;
  left: 312px;
  width: 208px;
  height: 75px;
}
#image4 {
  position: absolute;
  top: 75px;
  left: 0px;
  width: 208px;
  height: 75px;
}
#image5 {
  position: absolute;
  top: 75px;
  left: 208px;
  width: 104px;
  height: 75px;
}
#image6 {
  position: absolute;
  top: 75px;
  left: 312px;
  width: 208px;
  height: 75px;
}
#image7 {
  position: absolute;
  top: 137px;
  left: 0px;
  width: 14px;
  height: 301px;
}
#image9 {
  position: absolute;
  top: 438px;
  left: 0px;
  width: 14px;
  height: 38px;
}
#image10 {
  position: absolute;
  top: 438px;
  left: 14px;
  width: 92px;
  height: 38px;
}
#image11 {
  position: absolute;
  top: 438px;
  left: 106px;
  width: 81px;
  height: 38px;
}
#image12 {
  position: absolute;
  top: 438px;
  left: 187px;
  width: 125px;
  height: 38px;
}
#image13 {
  position: absolute;
  top: 438px;
  left: 312px;
  width: 92px;
  height: 38px;
}
#image14 {
  position: absolute;
  top: 438px;
  left: 404px;
  width: 92px;
  height: 38px;
}
#image15 {
  position: absolute;
  top: 476px;
  left: 0px;
  width: 14px;
  height: 152px;
}
#image16 {
  position: absolute;
  top: 476px;
  left: 14px;
  width: 258px;
  height: 152px;
}
#image17 {
  position: absolute;
  top: 476px;
  left: 272px;
  width: 248px;
  height: 152px;
}
#image18 {
  position: absolute;
  top: 628px;
  left: 0px;
  width: 14px;
  height: 102px;
}
#image19 {
  position: absolute;
  top: 628px;
  left: 14px;
  width: 258px;
  height: 102px;
}
#image20 {
  position: absolute;
  top: 628px;
  left: 272px;
  width: 248px;
  height: 102px;
}
2

Your <img>s are inside <div>s. A <div>, being a block level element, will extend to the full parent width, <body> in your case.

In the “correct” example, you have <img>s inside <td>s, which are kind of… inline-blocks :slight_smile:

You have many ways to tackle this. If you absolutely need to keep <div>s as wrappers for <img>s, I suggest you start by floating some <div>s. For example “image1”, “image2”, “image3”.

But you should also know that you don’t need to wrap every <img> in a <div>. Even more, a <div> is not equal to a <td>.

In fact, not using <div>s to wrap every <img> will make your solution work w/o any other CSS help :slight_smile: That because <img> are inline level.

3

I am kinda lost on the

Your <img>s are inside <div>s

Can you show me a quick example using a line from this code?

<div id="image1"><img src="http://wolphewebdesign.com/Clients/Caddy/images/images_01.jpg" /></div>

I see the whole image inside the div, but am lost on how I can change it up.

4

Try this:

<div id="div1">
<img src="http://wolphewebdesign.com/Clients/Caddy/images/images_01.jpg" />
<img src="http://wolphewebdesign.com/Clients/Caddy/images/images_02.jpg" />
<img src="http://wolphewebdesign.com/Clients/Caddy/images/images_03.jpg" />
</div>
5

Well that lines them up, but there is a space between them.

Like Image (space) Image 2 (space) Image 3

6

You need a DTD on the top of your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

And you need a CSS reset. And you need to float left the <img>s so that they will glue together. And since you’re getting rid of tables in favour of divs, I believe the way you’ve sliced the images is useless now.

A bit of an idea:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Form</title>

  <style type="text/css">
    #div1, #div2 {
      overflow:auto;
    }

    #div1 img, #div2 img {
      float:left;
    }
  </style>
</head><body>

  <div id="div1">
    <img src="http://wolphewebdesign.com/Clients/Caddy/images/images_01.jpg">
    <img src="http://wolphewebdesign.com/Clients/Caddy/images/images_02.jpg">
    <img src="http://wolphewebdesign.com/Clients/Caddy/images/images_03.jpg">
  </div>

  <div id="div2">
    <img src="http://wolphewebdesign.com/Clients/Caddy/images/images_04.jpg">
    <img src="http://wolphewebdesign.com/Clients/Caddy/images/images_05.jpg">
    <img src="http://wolphewebdesign.com/Clients/Caddy/images/images_06.jpg">
  </div>

</body></html>

Let’s pretend we don’t see the wrong coding for the <img> tags. There are too many for me to even bother and, this is not the right approach: transforming <td>s in <div>s.

But from what I gather, you have a lot to learn :slight_smile: I’m sure this is not the way to go for your design. I don’t know if you can see that.

There is an overwhelming number of wrong concepts and techniques with the approach you’ve taken and with the actual coding you have so far.