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
    May 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Alignment issue help required

    Hi all!,

    The site I am currently working on contains a 20px high x 980px wide strip that I am having difficulty aligning with a left hand vertical panel that is next to a photo - see attachment below to indicate what I'm talking about. The black strip at the base is supposed to align left with the left hand vertical panel, OR align right with the main image.

    Any assistance regarding what I am doing wrong would be appreciated. Likewise if there is anything else contradictory, awkward or unnecessary in the coding below, then please offer your advice. Many thanks.

    This is the current HTML...
    Code:
    <div id="wrapper">
    
    <div id="sidebar"></div>
    
    <div id="main_image"><img src="images/main.jpg" width="779" height="584">
    
    <div id="bottom_strip"></div>
    
    </div>
    And this is my current CSS...
    Code:
    #wrapper { 
        margin: 0 auto;
        padding-top: 25px;
        width: 980px;
    }
    
    #sidebar {
        float: left;
        width: 186px;
        height: 584px;
        background: #000000;
        margin-top: 5px;
    }
    
    #main_image {
        margin-top: 5px;
        margin-left: 201px;
        width: 779px;
        height: 584px;
    }
    
    #bottom_strip {
        margin-top: 5px;
        width: 980px;
        height: 20px;
        background-color: #000000;
    }
    Attached Thumbnails Attached Thumbnails Alignment issue help required-home-page.jpg  
    Last edited by David.W.S; 06-10-2010 at 04:33 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    First off, you are missing a closing </div> on your div #main_image. That's causing #bottom_strip to be out of alignment.

    The gap to the left of your image occurs because you have a margin-left on #main_image of 201px, but your #sidebar is only 186px wide - leaving a gap of 15px between them.

    Rather than having an extra div just for the black strip you could, if the rest of your design allows it, achieve the same thing by adding this to #wrapper:

    Code:
    padding-bottom:5px;
    border-bottom: 20px solid #000000;

  • #3
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Many thanks for that SB65 - the closing </div> on the div #main_image fixed the bottom black strip perfectly.

    I actually want the 15px gap between the side panel and the main image, so there are no problems there.

    I'll leave the black bottom strip as a separate div I think as I've got a line of text below i (some aligned left and some aligned right on the same line) stating copyright, address, company registered number and VAT number.

    Many thanks again.


  •  

    Posting Permissions

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