...

View Full Version : Text aligned to left in div/container



Juicy
01-13-2008, 10:17 PM
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.

effpeetee
01-13-2008, 10:30 PM
Put - text-align:left; in the DIV,

Frank

Juicy
01-13-2008, 10:38 PM
Put - text-align:left; in the DIV,

doesn't work :(

AoR Zeta
01-13-2008, 10:39 PM
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.

Juicy
01-13-2008, 10:45 PM
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

AoR Zeta
01-13-2008, 10:56 PM
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.

effpeetee
01-13-2008, 11:00 PM
Try this.

Frank

#left {
float: left;
height: 525px;
padding-right: 90px; - adjust to suit.
border-right:3px solid #E0E0E0;
text-align:left;
}

Juicy
01-13-2008, 11:07 PM
I got it. Thanks people.

effpeetee
01-13-2008, 11:15 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum