CSS and DIV help! [Archive]

raminia

05-08-2005, 06:37 AM

Hi folks,
I know I can go through tutorials and sneak through lines of codes to find out how to do this but I need some directed help to the point :)

as you see here in pepper template
http://www.raminia.com/temp/ppz.jpg

the two field of image note and exif information are residing side by side. I want to do so with CSS and div tags. I know how to do it with tables but I want to learn doing such stuff with DIV.

(I'm going to design my personal template ;) )

Connie

05-08-2005, 08:17 AM

Raminia,

did you take a look into the CSS of pepper's template?

Things like this are done by <div>s, which have the attribute "float:left" or "float:right"

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>two boxes for Ramin</title>
<style type="text/css">
#number_one {
border: 1px solid #000000;
width: 200px;
float: left;
margin-right: 10px;
background-color:white;color:black;
margin-bottom:10px;
}
#number_two{
border: 1px solid #000000;
width: 200px;
float: left;
background-color:white;color:black;
margin-bottom:10px;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<div id="number_one">number one </div>
<div id="number_two">number two</div>
</body>
</html>

so this example gives you the basics for two boxes, side by side

test it with this example-page

raminia

05-08-2005, 07:22 PM

Thanks Connie. That was very helpful:)