...

View Full Version : Positioning of div classes



gitbox
05-25-2009, 08:45 PM
I've been banging my head on this issue for several hours. I am using Dreamweaver CS3.

See below for the CSS and HTML.

The problem is that I have actually 3 nested div classes in the the content div (.left1, .left2, and .right). The .left1 and .left2 are behaving nicely but the .right is not nesting right in the content div... plus as I look at it in Dreamweaver, in properties, it is showing grayed out, like it is not an option.

I am sure there is a simple solution (there always is), but my poor feebled mind is not picking it up.

CSS below:
* {
padding: 0;
margin: 0;
}

body {
background: #fff;
background-repeat: repeat-x;
font-family: Verdana, Arial, sans-serif;
font-size: .74em;
}

a {
color: #B22037;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

#header
{
margin: 0 auto;
width: 800px;
height: 150px;
background: #fff url('header.jpg');
background-repeat: no-repeat;

}

#header h1 { padding-left: 30px; padding-top: 15px; font-size: 18px; color: #CC9900; }
#header h1 a { font-size: 1.4em; color: #FFF; text-decoration: none;}
#header h2 { padding-left: 30px; padding-top: 0px; font-size: .8em; color: #FFF;}

#wrap {
margin: 0 auto;
width: 800px;
background: #eee url('midwrap.jpg');
background-repeat: repeat-y;
}

#topwrap {
background: #eee url('topwrap.jpg');
background-repeat: no-repeat;
width: 800px;
height: 40px;
margin: 0 auto;
}

#botwrap {
background: #eee url('botwrap.jpg');
background-repeat: no-repeat;
width: 800px;
height: 40px;
margin: 0 auto;
}

#content {
padding: 0 30px 0 30px;
width: 780px;
}

#content h1 {padding-left: 30px; padding-top: 15px; font-size: 18px; color: #CC9900;}

#content h2 {font-size: 1.4em; color: #CC9900; text-decoration: none;}

.right {
float: right;
width: 500px;
margin: 0 5px;
font-size: 1em;
color: #fff;

}
.right h2 {color: #B22037; font-size: 14px; margin-bottom: 10px;}

.left1 {
float: left;
width: 150px;
margin: 0 10px 0 10px;
}

.left1 ul {
padding: 0px 0px 15px 0px;
margin:0;
}

.left1 li {
margin-bottom:5px;
list-style-type: none;
color: #CC9900;
background: #CC9900;
padding: 5px;
font-size: .9em;
}

.left1 li a{ color: #01210e; }

.left2 {
float: left;
width: 150px;
margin: 0 10px 0 10px;
left: 32px;
top: 337px;
}

.left2 ul {
padding: 0px 0px 15px 0px;
margin:0;
}

.left2 li {
margin-bottom:5px;
list-style-type: none;
color: #FF0099;
background: #CC9900;
padding: 5px;
font: 18px;
}

.left2 li a{ color: #01210e; }




#clear {
display: block;
clear: both;
width: 100%;
height:1px;
overflow:hidden;
}

#footer {
margin: 0px auto 0 auto;
text-align: center;
padding: 10px 0 10px 0;
color: #666;
background: #eee;
}

img { border: none;}

HTML below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RDC</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>

<div id="header">
<!-- Just and example how to put some banner in the header -->
<div style="float: right; padding-top: 15px; padding-right: 32px;"><!-- End of example -->
<img src="../images/RDClogo_NEW_on green.jpg" alt="" width="120" height="115" /></div>
<h1>Richards Design Concepts</h1>
<p>&nbsp;</p>
</div>

<div id="topwrap"></div>

<div id="wrap">

<div id="content">

<table width="150" border="0" cellpadding="10">
<tr>
<td> <div class="left1">

<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">THE RDC SERVICE TOUCH</a></li>
<li><a href="#">ABOUT RDC</a></li>
<li><a href="#">ORDER INFO</a></li>
</ul>
</div></td>
</tr>
<tr>
<td height="13">&nbsp;</td>
</tr>
<tr>
<td height="31"><h2>Products</h2></td>
</tr>
<tr>
<td><div class="left2">
<ul>
<li><a href="#">Executive Gifts</a></li>
<li><a href="#">Plaques</a></li>
<li><a href="#">Crystal Awards</a></li>
<li><a href="#">Picture Frames</a></li>
</ul>
</div></td>
</tr>
</table>


<div class="right">
<h2>ome lorem ipsum...</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia dictum massa. Vivamus fermentum. Curabitur congue purus at sem. Proin tincidunt lorem in nibh. Fusce vitae arcu ut ligula viverra auctor. Maecenas nonummy lorem sed erat. Ut id eros id tortor varius eleifend. Aliquam erat volutpat. Sed augue. Ut a ligula at sapien dignissim sollicitudin. Vestibulum lorem tellus, fermentum nec, posuere et, lacinia id, velit. Sed condimentum tincidunt quam. Suspendisse eget lectus. In hac habitasse platea dictumst. Vivamus volutpat. Ut pellentesque quam ac dui. Sed interdum. Suspendisse faucibus arcu. Integer id nisi nec odio laoreet cursus. Sed fermentum accumsan leo.
<br /><br />
Vestibulum accumsan, velit sed scelerisque lobortis, magna lectus imperdiet quam, non ultricies enim nibh sit amet felis. Quisque feugiat. Sed tristique enim in neque. Cras velit. Duis erat dui, dignissim quis, nonummy egestas, semper quis, nisi. Donec cursus posuere arcu. Pellentesque malesuada. Sed odio. Maecenas rutrum urna vel neque fringilla mollis. Ut scelerisque rhoncus lorem.
<br /><br />
Aenean aliquet varius enim. In mi enim, cursus ac, molestie id, molestie sit amet, urna. Nunc eu magna. Phasellus turpis felis, feugiat vel, congue vel, ullamcorper quis, tortor. Maecenas tristique. Nunc et diam. Cras sagittis ligula vel elit. Donec ut augue. Quisque lorem neque, eleifend in, vestibulum sit amet, faucibus placerat, tortor. Morbi pharetra augue quis lorem. Vestibulum venenatis porta ipsum. Mauris tellus arcu, euismod non, auctor eu, dictum eget, dui. Morbi purus. Nam vitae elit. Cras felis. Fusce vel nunc.
</div>

</div>

<div id="clear"></div>

</div>

<div id="botwrap"></div>

<div id="footer">
Design by #####
</div>

</body>
</html>

abduraooft
05-26-2009, 11:06 AM
I'd recommend you to check http://bonrouge.com/2c-hf-fixed.php, to see how to make a good 2 column layout.


plus as I look at it in Dreamweaver, in properties, it is showing grayed out, like it is not an option. Never trust DW's design view. It's not a browser, so it can't render the styles that you have used in your CSS. Instead test your document in standards browsers like FF.

Don't you know why tables for layout is very bad (http://www.hotdesign.com/seybold/)?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum