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 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    23
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Div alignment wrong (validating things)..!

    Hi All,

    I was validating my website: Here;

    If you check that website you can see the "Home" Div isnt next to the "Last Updated" Div But its below it.

    For HTML and CSS check the source (look at the source);

    Any Idea's?
    Thanks In Advance,

    Jamie.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello Jamie2993,
    .content_b will have to be floated to put .content_i beside it. Have a look at a basic 2 column layout here.
    Another thing to pay attention to is to make sure the widths of .content_b and _i both fit inside 50em wide .content. See how the box model works here.

    These changes might get you started -
    Code:
    * {
    	
    	padding: 0;
    	font-family: arial;
    	}
    .content {
    	width: 50em;
    	background-color: #900000;
    	padding-bottom: 5px;
    margin: 0 auto;
    overflow: auto; /*to clear the floats*/
    	}
    .content_b {
    	width: 10em;
    	margin-left: 5px;
    	margin-right: 5px;
    	padding-top: 5px;
    float: left;
    	}
    .content_i {
    	width: 38.9em;
    	background-color: white;
    	margin-top: 5px;
    	border: 1px solid black;
    	padding-bottom: 0.3em;
    float: right; /*because it's imposible to margin-left since em and px are both used*/
    	}
    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

  • Users who have thanked Excavator for this post:

    Jamie2993 (11-28-2009)

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    23
    Thanks
    2
    Thanked 0 Times in 0 Posts
    But float: left;

    makes the borders disappear.

  • #4
    New Coder
    Join Date
    Nov 2009
    Posts
    23
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ok ignore that last bit;

    i cant get it to go left and right they are currently overlapped :S

  • #5
    New Coder
    Join Date
    Nov 2009
    Posts
    23
    Thanks
    2
    Thanked 0 Times in 0 Posts
    actually i love you :P


  •  

    Posting Permissions

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