Using floats - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Using floats

dauricejordan

3:51 pm on Sep 14, 2006 (gmt 0)

10+ Year Member

I am trying to creat a web page consister of an advertising banner, Logo banner, and 3 columns. I am using float but I am unable to get the 3 columns to align next to each other. My desired layout is:

--------------------------------------
Ś************************************Ś
Ś************Advertisement***********Ś
--------------------------------------
Ś************************************Ś
Ś**************Logo******************Ś
--------------------------------------
Ś**************Ś************Ś********Ś
Ś**************Ś************Ś********Ś
Ś**************Ś************Ś********Ś
Ś****Main******Ś**Content2**ŚContent3Ś
Ś**************Ś************Ś********Ś
Ś**************Ś************Ś********Ś
Ś**************Ś************Ś********Ś
Ś**************Ś************Ś********Ś
Ś**************Ś************Ś********Ś
--------------------------------------

This seems to be pretty simple and common layout. Here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#canvas
{
background: #FF0000;
width: 1024px;
}
#TopAdvBanner
{
background: #9c3;
}
#LogoBanner
{
background: #cc9;
}
#content
{
background: #361;
}
#MainContent
{
background: #999;
width: 410px;
float: left;
margin: 0px;
padding: 0px;
}
#Content2
{
background: #234;
width: 350px;
float: right;
}
#Content3
{
background: #123;
width: 264px;
float: right;
}
</style>
</head>

<body>
<div id="canvas">
Canvas
<div id="TopAdvBanner">
<h1>Top Banner</h1>
</div>

<div id="LogoBanner">
Logo Banner
</div>

<div id="content">
Content
<div id="MainContent">
Main Content
</div>

<div id="Content2">
Content 2
</div>

<div id="Content3">
Content 3
</div>

</div>

</div>
</body>
</html>

Please help!

icantthinkofone

4:09 pm on Sep 14, 2006 (gmt 0)

10+ Year Member

Just change your content floats to float:left instead of right.

dauricejordan

4:30 pm on Sep 14, 2006 (gmt 0)

10+ Year Member

I tried this. All of the elements overlap.

icantthinkofone

4:37 pm on Sep 14, 2006 (gmt 0)

10+ Year Member

They do? It works for me. You are talking about maincontent content2 and content3?

dauricejordan

4:47 pm on Sep 14, 2006 (gmt 0)

10+ Year Member

Yes. I am talking about those. I am using IE6. Another funny thing that I am noticing is when I used an example copied directly from the web it does not render properly in IE6. I also have Opera on my computer and it renders fine. Is there something wrong with IE6?

icantthinkofone

4:50 pm on Sep 14, 2006 (gmt 0)

10+ Year Member

IE6 and IE7 are the most screwed up browsers in the history of mankind. They are old, buggy and non-standard to the point of laughable. If it's working in Opera but not IE, then IE is the problem and we have to adjust the code for it. However, I have it working in IE on my machine.

icantthinkofone

4:51 pm on Sep 14, 2006 (gmt 0)

10+ Year Member

Here is your code modified as I have it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#canvas
{
background: #FF0000;
width: 1024px;
}
#TopAdvBanner
{
background: #9c3;
}
#LogoBanner
{
background: #cc9;
}
#content
{
background: #361;
}
#MainContent
{
background: #999;
width: 410px;
float: left;
margin: 0px;
padding: 0px;
}
#Content2
{
background: #89a;
width: 350px;
float: left;
}
#Content3
{
background: #567;
width: 264px;
float: left;
}
</style>
</head>

<body>
<div id="canvas">
Canvas
<div id="TopAdvBanner">
<h1>Top Banner</h1>
</div>

<div id="LogoBanner">
Logo Banner
</div>

<div id="content">
Content
<div id="MainContent">
Main Content
</div>

<div id="Content2">
Content 2
</div>

<div id="Content3">
Content 3
</div>

</div>

</div>
</body>
</html>

dauricejordan

5:03 pm on Sep 14, 2006 (gmt 0)

10+ Year Member

You are correct. I apologize for the oversite. My code works in IE6 with your suggestion. I am also using Dreamweaver 6. I hear the CSS is screwed up in DW6. That was the source of my oversite.

However, the following code does not work in IE6 (but does in Opera):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>A frame document with CSS 2.1</TITLE>
<STYLE type="text/css" media="screen">
BODY { height: 8.5in } /* Required for percentage heights below */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header"> ... </DIV>
<DIV id="sidebar"> ... </DIV>
<DIV id="main"> ... </DIV>
<DIV id="footer"> ... </DIV>
</BODY>
</HTML>

This code was the example from the web I spoke of. It's using fixed positioning.

Would you recommend another method for for my layout? I was looking to use floats but I am open to other methods if they are better.

Thanks!

icantthinkofone

5:58 pm on Sep 14, 2006 (gmt 0)

10+ Year Member

I have to leave but I'll look at this tonight. You should use a strict doctype, too. Change your current one to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Archer74

8:11 pm on Sep 14, 2006 (gmt 0)

10+ Year Member

I downloaded FF and Opera to see if im missing something with the problem. So i tested this in FF v1.5.0.6, Opera 9.01 build 8552, IE v6.0.29 and they all came out looking exactly the same. the only difference is that i didnt include any <!DOCTYPE>. this may sound stupid but why is!doctype important?

I assumed you wanted no-scrolling and auto resizing from your original code since you where using height/width percentages. FF and Opera render borders funky.

<HTML>
<HEAD>
<TITLE>A frame document with CSS 2.1</TITLE>
<STYLE type="text/css" media="screen">
body{margin:0}
div{background-color:gray;}
#header, #footer{width:100%; height:10%; background-color:green}
#sidebar{width:10%; height:80%}
#main{width:90%; height:80%}
.line{float:left;}

</STYLE>
</HEAD>
<BODY>
<DIV id="header" class=line> header </DIV>
<DIV id="sidebar" class="line"> sidebar </DIV>
<DIV id="main" class="line"> main </DIV>
<DIV id="footer" class=line> foot </DIV>
</BODY>
</HTML>

icantthinkofone

11:05 pm on Sep 14, 2006 (gmt 0)

10+ Year Member

The doctype is critical to web page design and is necessary in all modern web pages. The doctype tells the browser, essentially, which set of rules you are using. Without any doctype, IE goes into quirks mode and doesn't render correctly at all, almost like 1998 all over again. Transitional doctypes are treated differently by browsers than strict types.

dauricejordan

1:25 pm on Sep 15, 2006 (gmt 0)

10+ Year Member

Thank you so much for your help. You are have been most helpful!