Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-02-2005, 02:44 PM   PM User | #1
michaelwall
New Coder

 
Join Date: Nov 2005
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
michaelwall is an unknown quantity at this point
3 column layout

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>

Last edited by michaelwall; 12-02-2005 at 02:46 PM..
michaelwall is offline   Reply With Quote
Old 12-02-2005, 03:47 PM   PM User | #2
_Aerospace_Eng_
Supreme Master coder!


 
_Aerospace_Eng_'s Avatar
 
Join Date: Dec 2004
Location: In a place far, far away...
Posts: 19,292
Thanks: 2
Thanked 1,044 Times in 1,020 Posts
_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light
Loose the 100% width in that div. Divs will expand to fit the their containers.
_Aerospace_Eng_ is offline   Reply With Quote
Old 12-02-2005, 05:46 PM   PM User | #3
michaelwall
New Coder

 
Join Date: Nov 2005
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
michaelwall is an unknown quantity at this point
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.
michaelwall is offline   Reply With Quote
Old 12-03-2005, 12:04 AM   PM User | #4
_Aerospace_Eng_
Supreme Master coder!


 
_Aerospace_Eng_'s Avatar
 
Join Date: Dec 2004
Location: In a place far, far away...
Posts: 19,292
Thanks: 2
Thanked 1,044 Times in 1,020 Posts
_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light
Can you post a link to your site?
_Aerospace_Eng_ is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 01:01 AM.


Advertisement
Log in to turn off these ads.