homepage Welcome to WebmasterWorld Guest from 184.73.52.98
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
floating positioning.
driving me mad
natty




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

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




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

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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved