CSS - Problem After Removing Sidebar From Page Template In Wordpress.

It's a classic problem, but I was just wondering if anyone could give me some help on it.

Heres the link to the webpage (note, none of the links or owt work, it's just filler for the mo):
Code:

http://users.aber.ac.uk/jdg8/WebSiteHelp/

I want to the make the sidebars on each side stretch to the bottom of the page (Down to the footer) but it won't seem to go. I've tried following googles advice and it's not working either.
Here's the code:
Code:

body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background:#FFF;
	height: 100%;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #FFF;
}

a:link{color:#00B800;}
a:visited{color:#39F}
a:hover{color:white; text-decoration:underline; font-weight:bold;}

#container {
	width: 80%;  /* this will create a container 80% of the browser width */
	background: #666666; /* the auto margins (in conjunction with a width) center the page */
	border: 3px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	height: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
} 

#header {
	background: #999999;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	color: #390;
} 
IMG.ukdm {
	display: block;
	margin-left: auto;
    margin-right: auto;
}


/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width. 
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the "#sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/
#sidebar1 {
	float: left; /* this element must precede in the source order any element you would like it be positioned next to */
	width: 22%; /* since this element is floated, a width must be given */
	height:100%;
	background-color: #555555;
	background-image:url(backgroundshizzle.jpg);
	padding: 15px 0;  /*top and bottom padding create visual space within this div  */
}

#sidebar2 {
	float: right; /* this element must precede in the source order any element you would like it be positioned next to */
	width: 23%; /* since this element is floated, a width must be given */
	height:100%;
	background-color: #555555;
	font-size:14px;
	padding: 15px 0; /* top and bottom padding create visual space within this div */
	text-align:center;
	
}

IMG.albumom {
    display: block;
    margin-left: auto;
    margin-right: auto;
	font-weight:bold;}
	

#sidebar1breaker {
	width: 4%;
	height:680px;
}
#sidebar1 p, #sidebar1 h3, #sidebar2 p, #sidebar2 h3 {
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;
	
}

#navi{
	display:block;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	font-weight: bold;
	font-size: 17px;
}

#aom{
	font-style:italic;
}

/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
#mainContent { 
	 /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
	 font-size:12px;
	 margin-left: 3px;
	 



	
}

#footer { 
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#999999;
	text-align:center;
	font-size:9px;
} 
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

It should be noted that I'm not totally sure about CSS and most of it is either stolen from dreamweaver or rehashed together from old websites I made.

Any help I could get would be greatly appreciated.
Cheers.

i have created a new model for a 3 column layout, (left sidebar, main content, right sidebar)

i used yui 3.0 index.php page as an example to float the main column right. this is designed to put the main column to static so that it is liquid, with a min width.

im not working with a liquid layout however, so some adjustments are needing to be made. my site is 950 pixels wide. my sidebars are about 175 pixels each, when used.

i have 2 classes that i append to the main column style depending on wether a left sidebar will be used or not. so when i set the #mainColumn for class .marginForLeftNav then it will accomodate for the left nav bar to pop up into place. if no left sidebar, then i use #mainColumn . marginForNoLeftNav class.

The problem i am having is trying to accomodate the right sidebar, which will always be used.

my requirements a
1) that the side bar html code falls below the main column code on the html page. so essentially i need to leave room in teh mainColumn for these columns to pop up into place.
2) that the styles used to float the left sidebar, and the main column are left in tact if possible.

heres some code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#wrapper{ /* Wraps everything.  Glues header, centralContainer, and footer together */
	margin: auto;
	width: 950px;
	text-align: left;
    }
 #header {
	margin: 0;
	position: relative;
	background-color: #666;
    }
 #centralContainer { /* Glues left and right columns, and main area together */
	zoom: 1;
    }
#mainColumnWrapper {
	margin-left: -195px;
	overflow: hidden;
	float: right;
 	}
 #mainColumn {
	margin-left: 195px;
	background-color: #999;
	position: relative;
	width: 560px;
 	}
 #mainColumn .marginForLeftNav {

 	}
 #mainColumn .marginForNoLeftNav {
	left: 0px;
	width: 755px;
	margin-right: 195px;
 	}
 #leftColumn {
	float: left;
	width: 175px;
	position: relative;
	margin: 0;
	padding: 0;
	background-color: #CCC;
    }
 #rightColumn {
	width: 175px;
	margin-left: 775px;
	background-color: #CCC;
	position: relative;
 	}
 #footer {
	color:  #666666;
	font-size: 80%;
	border-top: 1px solid #333333;
	clear: both;
	padding-top: 10px;
	background-color: #FFF;
    }
body {
	background-color: #333;
}
-->
</style>
</head>
    <body>
        <div id="wrapper">
            <div id="header">header</div><!-- end header -->
          <div id="centralContainer">
                <div id="mainColumnWrapper">
               	  <div class="marginForLeftNav" id="mainColumn" >
               	    <p>main column, with class narginForLeftNav</p>
               	    <p>&nbsp;</p>
               	    <p>&nbsp;</p>
               	    <p>test</p>
               	  </div><!--end <div id="mainColumn" class="marginForLeftNav">  -->
                </div><!--end <div id="mainColumnWrapper"> -->
          <div id="leftColumn">left column area</div>
                <div id="rightColumn">right column area</div><!-- end rightColumn div -->
            </div><!-- end centralContainer -->
            <div id="footer">footer</div><!-- end footer -->
        </div><!-- end wrapper -->
	</body> 
</html>

ive adjsuted the background colors to help see what is going on

this is as close as i have gotten it so far. NOTICE, how the main column overflows behind the right sidebar, which makes the content in the right sidebar begin AFTER the bottom of the main column. this is obviously the main problem.
I need the main column to obey the right sidebar, depending on wether theres a left sidebar or not.

The site is question is: http:// w ww.stolen-bikes.org/index4.php


The CSS is: http:// w ww.stolen-bikes.org/css/non_ie.css

Basically I want the sidebar (blue div), to line up on the side as it is but up flush against the top as you would expect a floated content area with a floated sidebar next to it. If I take out the #sidebar in the css it DOES align right up at the top as I want it to. The minute you as a float:left or width or anything it jumps down to the end of the #masthead div and beginning of the #content div. Im pretty sure I have everything lined up correctly I just cant figure out why this is doing that! Please help!

..never mind!

IE CSS Problem. sidebar getting pushed to bottom...



I'm working on my new blog. Moding a template from wpdesigner.com

http://www.mymovetoeurope.com/

The sidebar menu that is suppose to be on the right gets slipped to the bottom, but it's only for IE 6.0, don't have 7.0 installed.

I tried using absolute positioning for the right bar, but it didn't do anything.

When there were a lot of content in the sidebar and I increased the container size, it did push the menu back up, but the menu started at the edge of the header. I want to have it so the first right sidebar is under the header.

Can someone tell me what's wrong?

Thanks.

Hi All,

I have my site that uses CSS, however at times I want certain parts of it to not use the CSS. Not whole pages, just a section of a page.

Is there anyway to remove all CSS formating in a section?

So eg:

<div style='none'>
Some HTML
</div>


TIA Charlie

I am presently creating a website for a friend of mine who's a model and wants her own website, I have decided to make it using xhtml and css.
The problem that I am having is that I would like to have a footer which is at the very end of the page no matter how much content there is to the page.
I have uploaded the code to here

When this page is viewed in IE the footer is displayed at the bottom of the screen although the content carries on after the footer.
When this page is viewed in Firefox the footer is displayed just below the bottom of the screen although again the content carries on after the footer.

I have Googled this and tried out a couple of the suggested ways of getting the page to work and it just doesn't appear to want to work, so I am obviously doing something wrong :s

Does anyone have any idea how I would be able to get the footer to stay at the very bottom of the webpage?

Also if you look at the website you will see that the navigation sidebar only goes down as far as its content, I would prefer it if the sidebar went down to the footer (which will hopefully be at the bottom of the webpage).

Again does anyone have any idea how I would be able to get it to do this.

Trying to build a CSS Page Centered Template, where content autostretches containers height, as opposed to setting absolute heights. If one column is longer than the others the others should auto stretch to same height.

Also trying to work in a Footer that sits automatically at the bottom. Heres where I am at...as usual different story in every browser.

page
----
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0"><table><tbody ><tr><td><div class="container">
<!--*******page content start*******-->
<div class="top">top</div>
<div class="main1">main1</div>
<div class="main2">main2</div>
<div class="main3">main3</div>
<!--*******page content end*******-->
</div></td></tr></tbody></table></body></html>

CSS Sheet
----------
table {
width: 100%;
height: 100%;
}
td {
text-align: center;
vertical-align: top;
}
div.container {
position: relative;
margin: 0 auto;
width: 780px;
text-align: left;
height: 100%;
}
div.top {
position: absolute;
top: -3px;
left: 0px;
width: 780px;
height: 203px;
background-color: #CCC;
}
div.main1 {
position: absolute;
top: 200px;
left: 0px;
width: 200px;
height: 100%;
background-color: #BBB;
}
div.main2 {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 100%;
background-color: #DDD;
}
div.main3 {
position: absolute;
top: 200px;
left: 400px;
width: 380px;
height: 100%;
background-color: #AAA;
}

I'm using a free template that is utilizing a custom font called "chewy" I have custom font "Fortuna dot" that I'd like to use instead, however the only way I've found online to edit this is using a plugin. There must be a way to do it without a plugin because the template is doing so. Can any one help?

Also I would like to remove the categories from the page and move the navigation bar there instead.

Please please help me. I have the CSS for dummies book and I still can't figure it out.

SITE: havenhart[dot]com

if you look at my web page

http://www.invalidheart.org/index.php

when i have two or more entries my layout looks totally messed up, when i just have one entry, everything is fine. I can't for the life of my figure out what's going wrong with my template when i have 2+ posts.

this is my index.php which is the template for wordpress: Code:

<?php 
/* Don't remove this line. */
require('./wp-blog-header.php');
?>
<!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" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/1">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Invalid Heart - The Portfolio</title>
	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

	<style type="text/css" media="screen">
 @import url( <?php wp_stylesheet("default"); ?> );
	</style>
	
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="http://www.invalidheart.org/ie7-standard.js" type="text/javascript">
</script>
<![endif]-->

	<link rel="stylesheet" type="text/css" media="print" href="<?php echo get_settings('siteurl'); ?>/print.css" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
	
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>

</head>

<body id="sectionone">
<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>
<div id="wrap">
<div id="header"></div>
<div id="container">
<div id="menu"><?php include ("menu.php"); ?></div>

<div id="extra">
<h3>Navigation</h3>
<div class="line"></div>
<div class="item">
<ul class="nav">
<?php include ("navigation.php"); ?>
</ul>
</div>

<h3>Change Style</h3>
<div class="line"></div>
<div class="item">
<ul class="nav2">
<?php wp_style_switcher(0); ?>
</ul>
</div>

<h3>Recent Posts</h3>
<div class="line"></div>
<div class="item">
<ul class="nav2">
<?php get_recent_posts(); ?>
</ul>
</div>

<h3>Archives</h3>
<div class="line"></div>
<div class="item">
<ul class="nav2">
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>

<h3>Links</h3>
<div class="line"></div>
<div class="item">
<ul class="nav2">
<?php include ("links.php"); ?>
</ul>
</div>
</div>

<div id="main">
<h3>News & updates</h3>
<div class="line"></div>
<div class="item">
<?php the_date('','<h4>','</h4>'); ?>
<?php the_content(); ?>
<p>Thanks: <?php comment_plugger(); ?></p>
      
	        <p><?php wp_link_pages(); ?>
            <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?></p>

	<!--
	<?php trackback_rdf(); ?>
	-->

<?php include(ABSPATH . 'wp-comments.php'); ?>
<br style="clear:both;" />
<?php endforeach; else: ?><br style="clear:both;" />
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?><br style="clear:both;" />
<div id="center"><div class="break"></div></div>

</div>
</div><br style="clear:both;" /></div>
<div id="copyright"><?php include ("copyright.php"); ?></div></div>
<br style="clear:both;" />
</body>
</html>

and my css is he http://invalidheart.org/wp-style/default/style.css

any suggestions?

I was wondering if someone could give me a hand on a CSS problem I am having. This is for my personal site that my wife and I use to update people on our lives. I have the page at a temporary location right now as I am moving the site between servers.

Anyhow, I am working with WordPress and redoing the stylesheet. I am about half way done and am having a very strange problem.

You can view the page here.

The CSS is located below:

Code:

body,html {
	margin: 0;
	padding: 0;
	font: 10pt/15pt arial;
	background: #800000 url(images/topback.jpg) repeat-x top;
	text-align: center;
}
hr,h1,.description {
	display: none;
}
h2 {
	margin: 0;
	padding: 0;
}
#page {
	width: 843px;
	text-align: left;
	background: url(images/mainback.jpg) repeat-y;
}
#header {
	background: url(images/header.jpg) no-repeat;
	height: 275px;
}
#content {
	float: left;
	width: 300px;
	padding-left: 100px;
}

#sidebar {
	float: left;
	width: 200px;
	font-size: 8.5pt;
}
#sidebar li {
	list-style-type: none;
}
#footer {
	clear: both;
}

Here's the problem. In IE the width of the 'content' div is 509 pixels as can be seen by the red border (put in there to show the borders of the div). I am not defining the width to be 509 pixels, it is just defaulting to that width.

You need to look at the page in IE...in Firefox it works fine.

Hi, I'm having a little trouble positioning something on my header. Here's my site: http://ne-yofan.com/test/. I'd like to position the blog in the header to the left without divs. How would I?

Also my header looks different in Firefox and Internet Explorer. How can I fix that?

Please and thank you.

I am constructing my very first website using a freeCSS template..Embouteillage.


When I upload it to my webhost (agilityhoster) everything appears to work OK..but the header colour and some of the graphic images don't apear. I've even uploaded the template without making any changes to the original..but the same result. Can anyone help me solve the riddle, Many thanks.

Boo

Hi I'm building a new site in php & css. Im new to php yet seems fine so far. CSS I have had a little experience with due to my other site (thornapple.co.nz) yet I would still class myself as a eager learner.
You can view the test site as it currently is at -
darkasylum.org/site/template.php

grrr wont let me post the link!

Im just making up the template for the site. Its spilt into a few separate php files-
*Header/Top Nav
*Content
*Right Nav
*Footer

All is going fine yet I have came across a wee stumbling block.
There is a grungy flame bar that runs under the top nav and then again above the footer - framing the content. Im wanting to move these two bars- top one down say 18px and bottom up say 18px so it overlaps/layers over the content box and rightnav.

Can't seem to figure it out after much time trying a few things and a bunch of choice words spoken.... the computer hasn't had flying lessons(yet) but im a little frustrated knowing it's something simple and seeing I have positioned things over the top of others in the past.
Once done the image will be converted to black but this should really matter I guess...

As you can tell by looking at the site im still in the first building stages - getting the template set before we start to move on from there.


Sooo I have been looking around for a forum to ask on that's supportive and helpful. This forum seems a great place with many queries answered.

You can check out my style sheet here - darkasylum.org/site/style.css

Please ANY questions or if you need any part of my code just let me know.
I desperately need to get this project rolling as I'm now way behind and have articles etc coming in.

Help me Obi-Won kenobi your our only hope! (let's put your name there not Obi-Wons!)

How many posts do I need to do before I can post a link? Better go check now...

Thanks so much.

Warmest Wishes
Alex

Help! I've been holding my head on this one for a couple days.

I have a wordpress theme that works fine in IE7, but in Firefox the header and navigation aligns left instead of center. I have not tested in IE6 yet. I can't, for the life of me, figure out what's causing it.

Any help would be greatly appreciated!

www dot sccustomfacade dot com slash site


Thank you!