Welcome to WebmasterWorld Guest from 107.20.34.173

Forum Moderators: not2easy

Message Too Old, No Replies

floating positioning.

driving me mad

     

natty

10:15 am on May 4, 2006 (gmt 0)

10+ Year Member



hi all,

i should probably know this, and maybe i once did, and since forgot. trying to simply lay out a layout..

want a header bar
left sidebar - fixed width
main content lump - fluid to size with the browser window
footer - to sit at the bottom

however..

if i float the left sidebar, and then have an item in the main which needs to also float, and clear, the whole main content bit , slips down below the left hand nav. in IE of course, FF seems to work..

if i set to position absolute, the footer, doesnt sit at the bottom..
driving me spare..

im sure i always simply used to float left, margin left to do a 2 col layout, but itsa no work no more.. :(

anyhoo here is a page..

any help much appreciated..


<!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>#*$!#*$!xxxx</title>
<link rel="stylesheet" src="corners.css" />
<style type="text/css">
*{
margin:0;
padding:0;
font-family:'Trebuchet MS', verdana,serif;
/*border:1px solid #000;*/
}
body,html{
background-color:#fff;
}
#holder{
margin:5px 10px;
background-color:#ccc;
}
#header{
background-color:#666;
padding:20px;
font-weight:bold;
color:#fff;
font-size:150%;
}
#sidebar{
width:200px;
float:left;
margin-top:20px;
background-color:#eee;
height:100%;
}
#main{
margin-left:230px;
margin-top:20px;
margin-right:10px;
background-color:transparent;
}
#footer{
background-color:#666;
clear:both;
text-align:right;
font-size:90%;
padding:5px;
color:#fff;
}
/*----------------*/
#sidebar ul{
list-style-type:none;
}
#sidebar ul li{
padding:10px 10px;
}
/*----------------*/
#description{
background-color:#fff;
}
p{
margin-bottom:10px;
padding:5px;
}
/*----------------*/
#costbar{
background-color:#E03108;
color:#eee;
font-weight:bold;
}
/*----------------*/
.juicerItem{
background-color:#F0F0F0;
margin-bottom:10px;
}
img.itemImage{
width:90px;
height:90px;
background-color:#ddd;
display:block;
float:left;
margin:10px 10px 10px 30px;
border:2px solid #666;
}
/*----------------*/
a:link,a:visited{
color:#E03108;
text-decoration:underline;
}
a:active,a:hover{
color:#E03108;
text-decoration:none;
}
h1,h2{
padding-left:5px;
padding-bottom:10px;
padding-top:10px;
font-size:140%;
}
</style>
</head>
<body>
<div id="holder">
<div id="header">#*$!xxxxxxx</div>
<div id="sidebar">
<div style="background-color:#CC0000;padding:5px;color:#eee;font-weight:bold;">Types of Question</div>
<div style="background-color:#e03108;padding:5px;color:#eee;font-weight:bold;">Questions</div>
<ul>
<li><a href="#">#*$!xxxxx</a></li>
<li><a href="#">yyyyyyyy</a></li>
<li><a href="#">zzzzzzzz</a></li>
</ul>
<div style="background-color:#e03108;padding:5px;color:#eee;font-weight:bold;">Questions</div>
<ul>
<li><a href="#">xxxxxxxx</a></li>
<li><a href="#">yyyyyyyy</a></li>
<li><a href="#">zzzzzzzz</a></li>
</ul>
</div>
<div id="main">
<div class="rbcontent1">
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
</div>
<h1>So far:</h1>
<div id="costbar">
<p>Current cost: &pound;somecash</p>
</div>
<div class="juicerItem">
<img class="itemImage" src="test.gif" width="90" height="90" />
<h2>Question 1</h2>
<p><a href="#">Edit this question</a><br /><a href="#">Delete this question</a></p>
<div class="clear"></div>
</div>
<div class="juicerItem">
<img class="itemImage" src="test.gif" width="90" height="90" />
<h2>Question 2</h2>
<p><a href="#">Edit this question</a><br /><a href="#">Delete this question</a></p>
</div>
<div class="juicerItem">
<img class="itemImage" src="test.gif" width="90" height="90" />
<h2>Question 3</h2>
<p><a href="#">Edit this question</a><br /><a href="#">Delete this question</a></p>
</div>
<div class="juicerItem">
<img class="itemImage" src="test.gif" width="90" height="90" />
<h2>New Question</h2>
</div>
</div><!--END MAIN-->
<div id="footer">&copy;2006 xxxxxxxxx</div>
</div>
</body>
</html>

evo81

1:24 pm on May 7, 2006 (gmt 0)

5+ Year Member



Hey there,

try this:

<!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>#*$!#*$!#*$!x</title>
<link rel="stylesheet" src="corners.css" />
<style type="text/css">
*{
margin:0;
padding:0;
font-family:'Trebuchet MS', verdana,serif;
/*border:1px solid #000;*/
}
body,html{
background-color:#fff;
}
#holder{
margin:5px 10px;
background-color:#ccc;
}
#header{
background-color:#666;
padding:20px;
font-weight:bold;
color:#fff;
font-size:150%;
}
#sidebar{
width:200px;
float:left;
margin-top:20px;
background-color:#eee;
height:100%;
}
#main{
margin-left:230px;
margin-top:20px;
margin-right:10px;
background-color:transparent;
}
#footer{
background-color:#666;
clear:both;
text-align:right;
font-size:90%;
padding:5px;
color:#fff;
}
/*----------------*/
#sidebar ul{
list-style-type:none;
}
#sidebar ul li{
padding:10px 10px;
}
/*----------------*/
#description{
background-color:#fff;
}
p{
margin-bottom:10px;
padding:5px;
}
/*----------------*/
#costbar{
background-color:#E03108;
color:#eee;
font-weight:bold;
}
/*----------------*/
.juicerItem{
float:left;
width:100%;
background-color:#F0F0F0;
margin-bottom:10px;
}
img.itemImage{
width:90px;
height:90px;
background-color:#ddd;
display:block;
float:left;
position:relative;
margin:10px 10px 10px 30px;
border:2px solid #666;
}
/*----------------*/
a:link,a:visited{
color:#E03108;
text-decoration:underline;
}
a:active,a:hover{
color:#E03108;
text-decoration:none;
}
h1,h2{
padding-left:5px;
padding-bottom:10px;
padding-top:10px;
font-size:140%;
}
</style>
</head>
<body>
<div id="holder">
<div id="header">#*$!xxxxxxx</div>
<div id="sidebar">
<div style="background-color:#CC0000;padding:5px;color:#eee;font-weight:bold;">Types of Question</div>
<div style="background-color:#e03108;padding:5px;color:#eee;font-weight:bold;">Questions</div>
<ul>
<li><a href="#">#*$!xxxxx</a></li>
<li><a href="#">yyyyyyyy</a></li>
<li><a href="#">zzzzzzzz</a></li>
</ul>
<div style="background-color:#e03108;padding:5px;color:#eee;font-weight:bold;">Questions</div>
<ul>
<li><a href="#">xxxxxxxx</a></li>
<li><a href="#">yyyyyyyy</a></li>
<li><a href="#">zzzzzzzz</a></li>
</ul>
</div>
<div id="main">
<div class="rbcontent1">
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
</div>
<h1>So far:</h1>
<div id="costbar">
<p>Current cost: &pound;somecash</p>
</div>
<div class="juicerItem">
<img class="itemImage" src="test.gif" width="90" height="90" />
<h2>Question 1</h2>
<p><a href="#">Edit this question</a><br /><a href="#">Delete this question</a></p>
<div class="clear"></div>
</div>
<div class="juicerItem">
<img class="itemImage" src="test.gif" width="90" height="90" />
<h2>Question 2</h2>
<p><a href="#">Edit this question</a><br /><a href="#">Delete this question</a></p>
</div>
<div class="juicerItem">
<img class="itemImage" src="test.gif" width="90" height="90" />
<h2>Question 3</h2>
<p><a href="#">Edit this question</a><br /><a href="#">Delete this question</a></p>
</div>
<div class="juicerItem">
<img class="itemImage" src="test.gif" width="90" height="90" />
<h2>New Question</h2>
</div>
</div><!--END MAIN-->
<div id="footer">&copy;2006 xxxxxxxxx</div>
</div>
</body>
</html>

 

Featured Threads

Hot Threads This Week

Hot Threads This Month