Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2010
    Chicago, IL
    Thanked 0 Times in 0 Posts

    Question CSS Position Issue

    I am working on correcting the css positioning for http://www.buggalove.com. The css code was written by someone else and includes css positioning code that I do not have not used very much in the past.

    The left navigation section appears below the main text area. The float elements were overlapping and I managed to move the content div block to the right, thinking that would allow the navigation div block to move up where it should be. As you can see when you view the web site, the navigation block remains to the left of and below the content block.

    I am not a css expert and have no idea where the problem might be. Please help.

    Here is the css code (css code is on-page and can be seen on the Web site link):
    <style type="text/css">
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-weight: inherit;
    	font-style: inherit;
    	font-size: 100%;
    	font-family: inherit;
    	vertical-align: baseline;
    /* remember to define focus styles! */
    :focus {
    	outline: 0;
    body {
    	line-height: 1;
    	color: black;
    	background: white;
    ol, ul {
    	list-style: none;
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    	border-collapse: separate;
    	border-spacing: 0;
    caption, th, td {
    	text-align: left;
    	font-weight: normal;
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: "";
    blockquote, q {
    	quotes: "" "";
    strong { font-weight: 700; }
    html > body {
        color: #151515;
        font-family: Arial, sans-serif;
        background: url('%DOMAIN%/images/background.png') repeat center top;
    body > #wrap {
        background: url('%DOMAIN%/images/bg_flowers.png') no-repeat center bottom;
    #page {
        width: 723px;
        margin: 20px auto 0;
        background: url('%DOMAIN%/images/bg_page.png') repeat-y;
    #header { width: 723px; height: 186px; background: url('%DOMAIN%/images/bg_header.png') no-repeat center top; }
    	#header #logo { width: 330px; float: left; }
        #header #logo a { display: block; margin: 26px 0 0 8px; width: 330px; height: 116px; background: url('%DOMAIN%/images/logo.png') no-repeat; text-indent: -10000px; }
        #header #socialmedia { margin: 26px 0 0 7px; width: 381px; height: 116px; float: left; position: relative; background: url('%DOMAIN%/images/bg_socialmedia.png') no-repeat; }
        	#socialmedia a { display: block; position: absolute; }
    		#socialmedia a.twitter { width: 54px; height: 46px; top: 57px; left: 62px; background: url('%DOMAIN%/images/btn_twitter.png') no-repeat; text-indent: -10000px; }
    		#socialmedia a.blogspot { width: 42px; height: 54px; top: 22px; left: 182px; background: url('%DOMAIN%/images/btn_blogspot.png') no-repeat; text-indent: -10000px; }
    		#socialmedia a.facebook { width: 52px; height: 44px; top: 79px; left: 312px; background: url('%DOMAIN%/images/btn_facebook.png') no-repeat; text-indent: -10000px; }
    #nav { margin: 2px 6px; width: 714px; height: 42px; background: url('%DOMAIN%/images/bg_nav.png') repeat-x; border-top: 3px solid #f77c1f; border-bottom: 3px solid #f77c1f;}
    	#nav ul { margin-left: 0; margin-right: 30px; }
        #nav li { float: left; font-family: Occidental, Times New Roman, serif; }
        #nav li a { display: block; padding: 9px 24px; color: #fff; font-size: 25px; text-decoration: none; }
        #nav li a:hover { background: url('%DOMAIN%/images/btn_nav.png') no-repeat 0 6px; }
        #nav li a.current { background: url('%DOMAIN%/images/btn_nav.png') no-repeat 0 6px; }
    #content { position:relative; left: 30px; padding: 10px 30px 0 10px; float: left; width: 454px; }
    	#content h2 {  margin: 0.5em 0; font-weight: 700; font-size: 26px; text-align: center; }
        #content p { left:80px; margin: 1.5em 0; font-size: 16px; text-align: center; line-height: 20px;}
    #sidebar { padding: 10px 0 0; float: left; width: 218px; }
    	#sidebar form { margin: 20px 0 -10px; }
    	#sidebar h3 { margin-top: 40px; padding: 6px 0 0 20px; width: 202px; height: 39px; background: url('%DOMAIN%/images/bg_sidebar.png') no-repeat; font-family: Occidental, Times New Roman, serif; font-size: 26px; color: #843181; }
    	#sidebar #menu { margin-top: 6px; padding-right: 25px; text-align: center; }
            #sidebar #menu li { padding: 4px 0; }
            #sidebar #menu a { color: #f77c1f; font-size: 22px; font-family: Occidental, Times New Roman, serif; text-decoration: none; }
            #sidebar #menu a:hover { color: #843181; border-bottom: 1px dotted #f5d6bf; }
    	#sidebar #cart { margin: 2em 0 3em 20px; padding: 6px 100px 0 0; width: 108; height: 60px; background: url('%DOMAIN%/images/bg_cart.png') no-repeat 118px 0; }
        	#sidebar #cart li { margin-bottom: 4px; text-align: center; }
            #sidebar #cart li a { display: block; padding: 2px 0; border: 2px solid #edfae0; background-color: #f3fcfd; color: #83d926; font-weight: 700; text-decoration: none; }
            #sidebar #cart li a:hover { border: 2px solid #83d926; }
    #footer { margin: 32px 6px 0; padding: 8px 0 0; width: 711px; height: 29px; background: url('%DOMAIN%/images/bg_nav.png') repeat-x; border-top: 2px solid #f77c1f; border-bottom: 3px solid #f77c1f; text-align: center; color: #fff; }
    	#footer a { margin: 0 6px; font-family: Occidental, Times New Roman, serif; font-size: 20px; color: #fff; text-decoration: none; }
    #footer_btm { margin: 0 auto; padding: 25px 0 20px; width: 723px; min-height: 15px; background: url('%DOMAIN%/images/bg_footer.png') no-repeat center top; }
    	#footer_btm p { color: #bbb; text-align: center; font-size: 14px; }
    Thank you!
    Last edited by WingsDove; 02-09-2010 at 04:51 AM.

  2. #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,874 Times in 1,858 Posts
    Hello WingsDove,
    To get your to columns working right again, make the CSS for #content look like this -
    #content { 
    /*left: 30px;*/
    padding: 10px 30px 0 10px; 
    float: right; 
    width: 454px; 
    You can't mix positioning and float together, it's either/or.

    A more robust two column layout can be seen here. Notice how only one column is floated. The other is margined over enough to allow for the floated column and, with no width specified, takes all the room left to it.

    You should definitely have a look at the links in my sig about validation. The validators will help you a lot.

    One last thing, when posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    You can go back and edit your original post to add them.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  3. #3
    New to the CF scene
    Join Date
    Feb 2010
    Chicago, IL
    Thanked 0 Times in 0 Posts
    Excavator: Thank you so much for your fast response as well as all the helpful links you gave me. Your correction to the css code work (as I am sure you know). I am learning CSS bit by bit, don't know all the rules and very much appreciate the help.

    The optional coding is something I will try very soon. Your finished web page may not be as pretty as mine but it works!!!

    Thank you again.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts