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 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Text aligned to left in div/container

    Alright, so I am having some problems figuring out how to get some text aligned to the very left of a particular div. The text in which I speak is inside <div id="left"> and says "Needs to be aligned at the very left!". The code is at http://pastebin.com/d11119766 I know the containter of the text has a 90px padding, but I want the text to be alinged to the very left and the vertical line there to always be 90px from the left hand side of the page.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Put - text-align:left; in the DIV,

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    Put - text-align:left; in the DIV,
    doesn't work

  • #4
    New Coder
    Join Date
    Jan 2008
    Posts
    42
    Thanks
    4
    Thanked 4 Times in 4 Posts
    It will if you do it right, post some code.

    EDIT: If there's 90px padding on the div then despite your text-align:left it's going to be 90px away from the left, obviously. So if it turns out to be the padding that's causing the problem then the solution is simple - remove the padding.

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AoR Zeta View Post
    It will if you do it right, post some code.

    EDIT: If there's 90px padding on the div then despite your text-align:left it's going to be 90px away from the left, obviously. So if it turns out to be the padding that's causing the problem then the solution is simple - remove the padding.
    Alright, well I can remove the padding and then of course the text will be aligned to the left, BUT I want the vertical line on the right border to always be 90px from the left hand side of the page. If I take the padding out to get the text to the left, the vertical line will always be right at the end of the text which isn't necessarily 90px. The code is at http://pastebin.com/d11119766 I figured using width would work but I guess not

    Thanks
    Last edited by Juicy; 01-13-2008 at 11:52 PM.

  • #6
    New Coder
    Join Date
    Jan 2008
    Posts
    42
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Do you have a live example of the site. There's usually always a solution. I'm not sure what the vertical line thing is but if it's an actual element (and not say a border or something) you could use relative positioning to move it 90px and put it back in place after you remove the padding.

    It's extremely hard to say without seeing your Website.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try this.

    Frank

    #left {
    float: left;
    height: 525px;
    padding-right: 90px; - adjust to suit.
    border-right:3px solid #E0E0E0;
    text-align:left;
    }
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    New Coder
    Join Date
    Oct 2007
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I got it. Thanks people.

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Width works for me also.

    Frank

    left {
    float: left;
    height: 525px;
    width:290px; - adjust as required.
    padding-right: 0px;
    border-right:3px solid #E0E0E0;
    text-align:left;
    }

    Using pixels for size is not always a good idea. Using ems or &#37;ages make it easier to write for different screen sizes. If you look at my site here, http://exitfegs.co.uk/Sources.html
    You will find that the three columns are sized in %ages. This was suggested to me by AeroSpace_Eng who largely re-wrote this for me. It survives and stays readable if you pull the sides around. If it were sized in pixels, it would break up and become a mess.

    Frank
    Last edited by effpeetee; 01-14-2008 at 12:23 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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