Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: left alignment

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    804
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default left alignment

    Hey all,

    I have an alignment issue, and feel rather stupid with it.

    Please have a look at the left bar at http://www.casalplanet.com.
    I would like to place the same bar under the left bar, as a new menu item. But when I just copy the same div of the left bar, it looks like this: http://www.casalplanet.com/testDD.php

    This is the css for that div:
    Code:
    .column1{
    background-image:url(images/bg1.gif);
    background-position:top left;
    background-repeat:repeat-y;
    width:247px;
    float:left;
    position:relative;
    margin:0 8px 0 10px;
    display:inline;
    }
    .item{
    width:200px;
    padding:14px 0 2px 25px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#5F5F5F;
    float:left;
    }
    .item img{
    float:left;
    border:1px solid #E2E2EA;
    margin:0 0 6px 0
    }
    .item p{
    float:left;
    width:86px;
    margin:0 13px 0 0;
    display:inline;
    text-align:center
    }
    .item a{
    color:#D8420D;
    text-decoration:none;
    display:block;
    margin:0 auto;
    }
    .item a:visited{text-decoration:none;}
    .item a:hover{text-decoration:none;}
    .items{
    float:left;
    padding:20px 0 0 0
    }
    .slice1{
    position:absolute;
    top:32px;
    left:-22px;
    Can anyone let me know what to change to have the two divs under eachother, and not next to eachother, please ? I tried by removing the float and position, but doesn't work.

    Thanks !!

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Here is my guess I think your using a float and didn't clear it on the second one. I can't open firebug the easy way though cause you blocked right clicking which is annoying so that's why it's a guess.

  3. #3
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    804
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    You can see the css above: what should be changed for the second div then ?

  4. #4
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    css doesnt show rendering or the html

  5. #5
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    804
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    I enabled the right click. Can that help to find the solution ?

  6. #6
    Join Date
    Sep 2008
    Location
    Seattle, WA
    Posts
    135
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Default

    It appears you're trying to put the copied <div> next to the current left column (column1) <div> which is causing a space issue and pushing the column2 <div>'s down. Not sure why you want to add another column when you could just keep adding items to the current column1 and it will expand downward, but, hey...not my site

    Basically you X amount of space and the two column divs can't be together like this:

    <div id="column1">Content</div>
    <div id="column1">Content</div>
    <div id="column2">Content</div>

    It would need to be like this:

    <div id="column1">Content</div>
    <div id="column2">Content</div> // assuming this is the last column2
    <div id="column1">Content</div>

    Then create this:

    #clear {
    clear: both;
    }

    And add it like this:

    <div id="column1">Content</div>
    <div id="column2">Content</div>
    <div id="clear"></div>
    <div id="column1">Content</div>

    That acts like a breaker and clears the float: left; declarations above it so you can have your new column1 aligned to the left.

    I didn't look through all your code but this is a start.

  7. #7
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    804
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    It appears you're trying to put the copied <div> next to the current left column (column1) <div>
    No, I wish to have div1 under div1, so that the appartment section is twice below eachother. So compared to the index, the change would be that there is a div added below the appartments. So your solution doesn't work.
    Last edited by chechu; 09-25-2009 at 07:41 PM.

  8. #8
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    804
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    In tables it should be like this:

    Code:
    <table><tr><td>
    <div for rent>
    <br>
    <div for rent>
    </td><td>
    <div safars>
    <br><div golf>
    <br>
    <div tours>
    ...
    </td><td>
    banners, links, testimonials, contact
    </td></tr></table>
    Wit the current css, I cannot get the two <div for rent> under eachother.

  9. #9
    Join Date
    Sep 2008
    Location
    Seattle, WA
    Posts
    135
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Default

    I told you how to do it. With <div>'s it's different than tables. I'll illustrate best I can.

    <---- width of area you can use includes left column1 and the column2 divs--->

    Your current setup has just 1 column1 div which stretches vertically and several column2's that spread horizontally and 'stack' one on top of the other vertically. If you put the new column1 div next to the current column1 div there's no room. Result is:

    <----column1 ---><---column1--->
    <---column2--------->

    Is your result. Right? Therefore, you have to put the NEW column1 AFTER the final column2 in the stack. But before you do that you have to 'clear' the column1 and column2 'floats' so that the NEW column1 doesn't try to stack itself to the right of column2.

    If you put 3 float: left; elements together in one wrapper div then they will try to align left to right unless there's no room. If you use clear: left; or clear: both; then that empties the 'floats' and allows the next div (your new column1) to exist in the next available free space.

    If you do it my way it should come out like so:

    <----column1----><---------column2's--------->
    <----column1----><--------empty space------->

  10. #10
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    <div class="column1">
    </div>
    <div class="column1" style="clear: both;">

  11. The Following User Says Thank You to bluewalrus For This Useful Post:

    chechu (09-26-2009)

Bookmarks

Posting Permissions

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