PDA

View Full Version : CSS problems, divisional layout

cg9com
03-15-2003, 07:10 AM
im assuming not only the CSS is relavent, but also the order in which the html is placed in the document.
IE6 renders this how i want it, my Opera and Moz. render different.
heres the relavent CSS:

#navigation {
float:left;
width:140px;
padding:5px;
}
#content {
float:right;
padding-left:10px;
width:auto;
}
#header {
clear:both;
}
#footer {
clear:both;
}

now here is the HTML, in this order.

<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
</div>
<div id="footer">
</div>

my problem is that the footer keeps going above the content and navigation, in op. & moz.
what i want is for the boxes to stay in the order i place them in, with navigation and content beside eachother.

if you need me to prepare a working demo then say the word.
but i dont have time to make it @ the moment.


any ideas CF'ers?
redhead
03-15-2003, 10:08 AM
methinks getting rid of float: right; in your #content style should help that... :thumbsup:

edit: example (http://www.geocities.com/joncaws/dvis.html)
cg9com
03-15-2003, 03:32 PM
thanks, but i used float:right; to keep #content in a seperate column from #navigation.
without float:right; my #content text will go under the #navigation if it goes past its height.
i dont know a work around
brothercake
03-15-2003, 03:36 PM
:confused: It works just fine for me - IE6, Phoenix (moz1.3b) and Opera 7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Table</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">

#navigation {
float:left;
width:140px;
padding:5px;
border:1px solid blue;
}

#content {
float:right;
padding-left:10px;
width:auto;
border:1px solid blue;
}

#header {
clear:both;
border:1px solid blue;
}

#footer {
clear:both;
border:1px solid blue;
}

</style>

</head>

<body>


<div id="header">header</div>
<div id="navigation">navigation</div>
<div id="content">content</div>
<div id="footer">footer</div>


</body></html>
cg9com
03-15-2003, 04:21 PM
in stripping my code to make this demo ive somehow solved the stacking problem, but in my moz. and opera the #content and #navigation wont stay beside eachother.
Demo (http://www.cg9com.web1000.com/demo.html)
brothercake
03-15-2003, 04:33 PM
Specify a width for both columns (left could be px,em or % and right could be em or %), then float both columns left.
cg9com
03-16-2003, 12:47 AM
aha, thank you.
me no thinky.
the both of you were correct. :D:o
thats what i get for staying awake so late.