Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts

    HTML and CSS problem

    Hello,

    I have been coding a layout and came to a problem in which the bit on the right is half the size of the same bit on the left whereas it should be the same size.

    The link is - http://www.extremehabbo.com/extremev2habbo

    The HTML is
    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>ExtremeHabbo</title>
    </head>
    <body>
    <div id="container">
    <div id="banner"><img src="http://www.freewebs.com/habbo-planet-sg/unofficial.gif" /></div>
    <div id="floatleft">
    <div id="left">
    <div id="side_main_top"></div>
    <div id="side_main_mid"><br /><br /></div>
    </div></div>
    <div id="floatright">
    <div id="right">
    <div id="mover">
    <div id="side_main_top"></div>
    <div id="side_main_mid"><br /><br /></div>
    </div></div></div>
    <div id="center">
    Hi
    </div>
    </div>
    </body>
    </html>
    The CSS is
    Code:
    body {
    	background: url(images/bg.gif);
    	margin: 20px 0px 0px 0px;
    }
    
    #floatleft {
    	float: left;
    }
    
    #floatright {
            float: right;
    }
    
    #container {
    	width:1000px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #left {
    	width: 228px;
    	height: auto;
    }
    
    #center {
    	width: 448px;
    	height: auto;
    }
    
    #right {
    	width: 228px;
    	height: auto;
    }
    
    #mover {
            margin-left: -98px;
    }
    
    #banner {
    	background: url(images/eh.png);
    	background-repeat: no-repeat;
    	width: 902px;
    	height: 151px;
    	padding-top: 35px;
    	padding-left: 30px;
    }
    
    #side_main_top {
    	background: url(images/eh_r3_c2.png);
    	width: 228px;
    	height: 15px;
            margin-top: -35px;
    }
    
    #side_main_mid {
            background: url(images/eh2.png);
            width: 228px;
            height: auto;
    }
    what is the problem and how can i fix it?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    If you are trying to make a 3 column layout, refer http://bonrouge.com/3c-hf-fluid.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Ryan55,
    ab is right, that bonrouge link is a good 3 column. Here is another, very simple 3 column example.

    Your code has issues with the box model, and other problems as well.
    Your #right is 228px wide but you put 326px width of content in it. The box model shows your content cannot exceed the width of it's container - margin and padding count when figuring that total width.
    Even your negative margin counts, which may seem counterintuitive.

    Not sure why the negative margin...


    Try making your CSS look like this -
    Code:
    body {
    	background: #fc6; /*because that snow was driving me nuts*/
    	margin: 20px 0px 0px 0px;
    }
    #container {
    	width:1000px; /*might work better at 902px?*/
    margin: 0 auto;
    background: #ff0; /*for demonstration only*/
    overflow: auto; /*to clear the floats*/
    }
    #banner {
    	background: url(images/eh.png);
    	background-repeat: no-repeat;
    	width: 902px;
    	height: 151px;
    /*padding-top: 35px;
    padding-left: 30px;*/
    }
    #floatleft {
    width: 228px; /*because floats neeed a width*/
    	float: left;
    }
    
    #floatright {
    width: 228px; /*because floats neeed a width*/
            float: right;
    }
    #right {
    	width: 228px;
    	height: auto;
    }
    /*#mover {
            margin-left: -98px;
    }
    #side_main_top {
    	background: url(images/eh_r3_c2.png);
            width: 228px;
    	height: 15px;
            margin-top: -35px;
    }*/
    
    
    #left {
    	width: 228px;
    /*height: auto;*/
    }
    
    #center {
    height: 400px;
    margin: 0 228px;
    background: #fff;
    /*width: 448px;
    height: auto;
    position: relative;*/
    }
    
    #inner_container {
            /*padding-bottom: 80px;*/
    }
    (the /* ... */ are comments that stop the bits of CSS they surround. I commented out a lot of your CSS instead of just removing it, that way you can see the bits that are causing your problems.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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