...

View Full Version : 3 column layout



michaelwall
12-02-2005, 03:44 PM
When I try this 3 column layout it works fine without the image
<div style="width:100%"><img src="/images/slider.jpg" /></div> in the content div., but when it's included it pushes the content div down the page in IE (seems to work fine in Opera and FF),
any ideas?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout</title>
<style type="text/css">
body {
margin: 1px 0 0 0;
padding:0;
background-color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}

#topnavigation
{
padding: 0;
margin: 4px 0 14px 0;
background-image:url("/images/newnavbar.jpg");
border-color: #8CA5CE;
text-align:center;
height:22px;
}

#container
{
width: 100%;
margin: 0;
background-color: #fff;
position:absolute; top:90px;
}

#leftnav
{
float: left;
width: 130px;
margin: 0;
padding: 0.3em;
background:#EEF3FB;
border:2px solid #8CA5CE;
}

#rightnav
{
float: right;
width: 140px;
margin: 0;
padding: 1em;
background:#EEF3FB;
border:2px solid #8CA5CE;
}

#content
{
margin-left: 200px;
margin-right: 200px;
}

#base
{
padding: 1px;
margin-left:0;
padding-left:0;
list-style-image: url(/images/Button.gif);
list-style-position: inside;
}


img { border:0;}

</style>
</head>

<body>
<div style="margin:2px;">
<div style="position:absolute; left:10px; top:5px; width:216px; height:81px;">
<a href="/index.asp"><img src="/images/logo.gif" alt="logo" /></a>
</div>
<div style="position:absolute; right:10px; top:5px; width:468px; height:60px;"><a href="/index.asp">
<img src="/images/banner.gif" alt="Banner" /></a>
</div>
</div>

<div id="container">

<div id="topnavigation">
<img src="uk.jpg" alt="navigation bar" height="22" /><img src="uk.jpg" alt="navigation bar" height="22" /><img src="uk.jpg" alt="navigation bar" height="22" /><img src="uk.jpg" alt="navigation bar" height="22" /><img src="uk.jpg" alt="navigation bar" height="22" /><img src="uk.jpg" alt="navigation bar" height="22" /><img src="uk.jpg" alt="navigation bar" height="22" /></div>
<div id="leftnav">
<ul id="base">
<li><a href="test.asp">Search</a></li>
<li><a href="test.asp">Contact</a></li>
<li><a href="test.asp">Add URL</a></li>
<li><a href="test.asp">Advertise</a></li>
<li><a href="test.asp">Partners</a></li>
</ul>

<img src="/images/Logo.gif" alt="Logo" />
<img src="/images/125x125.gif" alt="image" />
</div>
<div id="rightnav">
<ul id="base">
<li><a href="test.asp">Item 1</a></li>
<li><a href="test.asp">Item 1</a></li>
<li><a href="test.asp">Item 1</a></li>
<li><a href="test.asp">Item 1</a></li>
<li><a href="test.asp">Item 1</a></li>
</ul>
</div>
<div id="content">
<div style="width:100%"><img src="/images/slider.jpg" /></div>
<div style="background:#EEF3FB;border:2px solid #8CA5CE;padding:5px;">

test test

</div>
</div>
</div>

</body>
</html>

_Aerospace_Eng_
12-02-2005, 04:47 PM
Loose the 100% width in that div. Divs will expand to fit the their containers.

michaelwall
12-02-2005, 06:46 PM
the only problem with that is the image is indented slightly in IE not FF.
It should be aligned with the top of the div directly below.

_Aerospace_Eng_
12-03-2005, 01:04 AM
Can you post a link to your site?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum