Im just learning CSS so hopefully you can be patient with me the following is for a WP Theme. Im using #header{ background: #73a0c5 url('images/imagename.jpg')anything else here? } To place a header image. Then im going for a 3 column theme, the main content then 2 sidebars (side by side) to the right hand side. Ok now you know what im trying to do i would like to know if there is anything i need to add after the above CSS for the header, for any reason? And secondly im getting confused about how to use float to achieve the layout explained above, i had the 2 sidebars in place and to the right, but adding the header forced those to the bottom. Back to the header, ive also added this as part of the above CSS, hopefully thats normal? width: 900px; height: 250px;
Assuming you wanted your content on the left and the sidebars on the right: CSS #container { [B]width: 900px;[/B] } #header { background: #73a0c5 url('images/imagename.jpg') [B]no-repeat[/B]; width: 900px; height: 250px; } #content { float: left; width: 500px; } #sidebar1 { float: left; width: 200px; } #sidebar2 { float: left; width: 200px; } Code (markup): HTML <div id="container"> <div id="header"> header stuff </div> <div id="content"> content </div> <div id="sidebar1"> sidebar1 </div> <div id="sidebar2"> sidebar2 </div> </div> Code (markup): Most times, depending on the browser, the reason for a div floating underneath is because the width of the divs within a container exceeds the actual width of the container, since there is no room it is pushed down. In this case if i set #sidebar2 a width of 205px there would be no room left for it because i have set #container width to 900px and #content + #sidebar1 + #sidebar2 = 905px, 5px extra so there is no room for #sidebar2 and it goes underneath. Also, if an element within #sidebar2 is more than 200px it can stretch it out and cause #sidebar2 to go underneath again. Adding no-repeat to your background: will make it so the background image does not get repeated either vertically or horizontally. repeat-y is the image repeating vertically, repeat-x is the image repeating horizontally, leaving out all of those 3 will result in the background image repeating both vertically and horizontally. Hope that helps you out.
Hi MoT, firstly let me thank you for a detailed explanation, ive done as you said but some how im not getting the result still, ive added all my CSS here, maybe you can see something obvious that im not understanding yet? body, h1, h2, h3, h4, h5, h6, block,blockquote, p{ margin: 0; padding: 0; } body{ margin: 0; font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px; text-align: center; vertical-align: top; background: #ffffff; color: #000000; } h1{ font-family: Georgia, Sans-serif; font-size: 24px padding: 0 0 10px 0; } a:link, a:visited{ text-decoration: underline; color: #D1A964; } a:hover{ text-decoration: none; color: #C82F1E; } p{ padding: 10px 0 0 0; } #wrapper{ margin: 0 auto 0 auto; width: 900px; text-align: left; } #header { background: #D1A964 url('images/headerimage.jpg') no-repeat; width: 900px; height: 250px; } } #container{ float: left; width: 500px; } .post{ padding: 10px 0 10px 0; } .post h2{ font-family: Georgia, Sans-serif; font-size: 18px; } .entry{ line-height: 18px; } p.postmetadata{ border-top: 1px solid #ccc; margin: 10px 0 0 0; } .navigation{ padding: 10px 0 0 0; font-size: 14px; font-weight: bold; line-height: 18px; } .rsidebar{ float: left; width: 200px; background: #240604; margin: 0 0 0 0; color: #FFFFFF; } .rsidebar ul{ list-style-type: none; margin: 0; padding: 0 10px 0 10px } .rsidebar ul li{ padding: 10px 0 10px 0; } .rsidebar ul li h2{ font-family: Georgia, Sans-serif; font-size: 14px; } .rsidebar ul ul li{ padding: 0; line-height: 24px; } .lsidebar{ float: left; width: 200px; background: #D1A964; } #footer{ clear: both; float: left; width: 900px; background: #992317; padding: 10px; color: #ffffff; } Code (markup):
could you post the html? it'd be much easier then also #header { background: #D1A964 url('images/headerimage.jpg') no-repeat; width: 900px; height: 250px; } [COLOR="RED"]}[/COLOR] <--shouldn't be there in your css Code (markup):
Hi MoT, i deleted that extra } in the CSS and its sorted it how embarrassing, i cant believe i didn't notice that. I am including my HTML anyway, just incase you see anything that im doing wrong and may spot. Sorry for not including the HTML in the first place <!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"> <head profile="http://gmpg.org/xfn/11"> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <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> <div id="wrapper"> <div id="header"> </div> <div id="container"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <div class="post"> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> <div class="entry"> <?php the_content(); ?> <p class="postmetadata"> <?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br /> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?> </p> </div> </div> <?php endwhile; ?> <div class="navigation"> <?php posts_nav_link(); ?> </div> <?php else : ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2><?php_e('Not Found'); ?></h2> </div> <?php endif; ?> </div> <div class="rsidebar"> <ul> <li id="search"> <?php include(TEMPLATEPATH .'/searchform.php'); ?> </li> <li id="calendar"><h2><?php _e('Calendar'); ?></h2> <?php get_calendar(); ?> </li> <?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?> <li><h2><?php _e('Categories'); ?></h2> <ul> <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?> </ul> </li> <li><h2><?php _e('Archives'); ?></h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> </li> <?php get_links_list(); ?> <li><h2><?php _e('Meta'); ?></h2> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <?php wp_meta(); ?> </ul> </li> </ul> </div> <div class="lsidebar"> test text<br> test text </div> <div id="footer"> <p> Copyright © 2008 <?php bloginfo('name'); ?> </p> </div> </div> </body> </html> Code (markup):
With DIV's and CSS, does it matter in which order DIV's are placed in the HTML and what order that CSS is in the CSS file?
HTML <!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"> <head profile="http://gmpg.org/xfn/11"> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <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> <div id="wrapper"> <div id="header"> asd </div> <div id="container"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <div class="post"> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> <div class="entry"> <?php the_content(); ?> <p class="postmetadata"> <?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br /> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?> </p> </div> </div> <?php endwhile; ?> <div class="navigation"> <?php posts_nav_link(); ?> </div> <?php else : ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2><?php_e('Not Found'); ?></h2> </div> <?php endif; ?> </div> <div class="rsidebar"> <ul> <li id="search"> <?php //include(TEMPLATEPATH .'/searchform.php'); ?> </li> <li id="calendar"><h2><?php _e('Calendar'); ?></h2> <?php get_calendar(); ?> </li> <?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?> <li><h2><?php _e('Categories'); ?></h2> <ul> <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?> </ul> </li> <li><h2><?php _e('Archives'); ?></h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> </li> <?php get_links_list(); ?> <li><h2><?php _e('Meta'); ?></h2> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <?php wp_meta(); ?> </ul> </li> </ul> </div> <div class="lsidebar"> test text<br> test text </div> <div id="footer"> <p> Copyright © 2008 <?php bloginfo('name'); ?> </p> </div> </div> </body> </html> Code (markup): CSS body, h1, h2, h3, h4, h5, h6, block,blockquote, p{ margin: 0; padding: 0; } body{ margin: 0; font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px; text-align: center; vertical-align: top; background: #ffffff; color: #000000; } h1{ font-family: Georgia, Sans-serif; font-size: 24px padding: 0 0 10px 0; } a:link, a:visited{ text-decoration: underline; color: #D1A964; } a:hover{ text-decoration: none; color: #C82F1E; } p{ padding: 10px 0 0 0; } #wrapper{ background: url('http://img340.imageshack.us/img340/1756/wrapperbgjp5.jpg') repeat-y; margin: 0 auto; width: 900px; text-align: left; } #header { background: #D1A964 url('images/headerimage.jpg') no-repeat; width: 900px; height: 250px; } #container{ float: left; width: 500px; } .post{ padding: 10px 0 10px 0; } .post h2{ font-family: Georgia, Sans-serif; font-size: 18px; } .entry{ line-height: 18px; } p.postmetadata{ border-top: 1px solid #ccc; margin: 10px 0 0 0; } .navigation{ padding: 10px 0 0 0; font-size: 14px; font-weight: bold; line-height: 18px; } .rsidebar{ float: left; width: 200px; margin: 0 0 0 0; color: #FFFFFF; } .rsidebar ul{ list-style-type: none; margin: 0; padding: 0 10px 0 10px } .rsidebar ul li{ padding: 10px 0 10px 0; } .rsidebar ul li h2{ font-family: Georgia, Sans-serif; font-size: 14px; } .rsidebar ul ul li{ padding: 0; line-height: 24px; } .lsidebar{ float: left; width: 200px; } #footer{ clear: both; width: 880px; background: #992317; padding: 10px; color: #ffffff; } Code (markup): That should be what your after. Yup it does matter which order you place your divs, unless each div uses position: absolute which places the div at the pixels you provide. CSS can be in any order. I've setup an image for the wrapper background (http://img340.imageshack.us/img340/1756/wrapperbgjp5.jpg) so it looks as if each column is stretching to the bottom, its called Faux Columns and can check out more info @ www.alistapart.com/articles/fauxcolumns/ Also when you had the #footer width set at 900px with padding: 10px. The padding will add to the divs width, so 10px on the left and 10px on the right is an extra 20px, thats why I've taken 20px of the footer width (880px).
MoT, thanks very much for all this help, its making more sense to me, thanks for taking the time to do those various alterations, im going to read through that Faux Columns info too. Added Text: Regarding Faux Columns, it worked in IE but not in firefox unfortunately.
If it didn't work in FF, then it's becuase IE is incorrectly wrapping the floats (no modern browser automatically wraps floats). You can get the others to wrap the floats by giving (is it #wrapper that has the background image? Sorry, I be lazy and didn't look at any code : ) the container overflow: hidden (which, if there's no set height on that container, will just make it extend until it wraps its floats). That should at least make the background reach to the bottom of the longest float. It will not make the background go all the way to, say, a footer, unless footer is right after the longest float. Also, I wanted to say that while it's true in general that it doesn't matter what order your CSS is, as far as when you mention various boxes, it actually does matter as far as the Cascade is concerned. Meaning, if you have this: a { color: #f00; } other stuff a { color: #0f0; } Code (markup): The second overrides the first just because it's second. It's not a great example, but if you have two things that reference the same thing, then the browser takes the last-mentioned one. So, you can really reduce code by having some "defaults" at the beginning of the sheet to let other things inherit from (if they're inheritable).
Stomme poes, thanks MoT advised me that i had left in float: left; in the footer, once i removed that i extends all the way down in both browsers. Thanks for the additional information too. I still have a minor problem, now showing in IE, its not on the hompage but when i click comments, about, archives etc it pushes both side bars out a bit and stops the calendar from showing properly when its in that state. Heres 2 screenshots, showing top and bottom: [/URL][/IMG] [/URL][/IMG]
In both IE's? Cause it's possible that after you click something, a width changes, or the text inside something changes with. IE6 will let a box stretch to accommodate the content... IE7 doesn't. So where is that "2" coming from? That's in place of the calendar? It looks like it can be clicked on. Has the generated content changed after you click on something?
Ive only checked in IE6, the 2 is part of the calendar its a clickable date on the WP calendar in that sidebar, when its like that it seems to darken the rest of the calendar and you only see the 2. On the homepage its fine but once you click to go to a page thats when its showing like it currently does. Added Text: Ive just installed IE7 and it shows the same problem.
Check your comments.php source and css for that page, something is a little too wide. An easy way to find which element is causing the problem is temporarily put a border: 1px solid red; to see how wide it is. Just go through each id and class one by one adding the border, checking and removing it. until you come across the culprit.
I cant seem to figure out whats causing it, it happens when visiting the About page, a post title also when visting category or comments link and archives. Purely just in IE though.
Fixed Hello i want to update that i got it fixed, the problem in the post above this. While creating the header i had CSS for h1: h1{ font-family: Georgia, Sans-serif; font-size: 24px; padding: 0 0 10px 0; } Eventually near completion of the theme i placed a header image, not needing the h1 CSS above but i forgot to delete it, so i deleted the above CSS went and checked in IE and the problem is gone, all fixed. Just want to inform incase it helps anyone else in the future, its a daft mistake i know but still learning.