having a problem with left alignment

Forum Moderators: not2easy

Message Too Old, No Replies

having a problem with left alignment

Blelisa

3:21 pm on Feb 5, 2004 (gmt 0)

I am working on my companies site and am having a problem getting my left CSS "column" to line up along the left hand side. If anyone thinks they can help please email me and I will send the address of my page and the code, so you can take a look.

photon

3:48 pm on Feb 5, 2004 (gmt 0)

There are several approaches to this. You could use

float:left

, or

margin-left:0

, just to name two.

If you could post the relevant part of your CSS we'll be able to better help you.

Blelisa

4:46 pm on Feb 5, 2004 (gmt 0)

Main page Code:<body>
<script language="JavaScript1.2">mmLoadMenus();</script>
<p align="center"> <img src="title.jpg" alt="MagneForce Software Systems" width="100%" height="65" hspace="0" vspace="0"/><div align="center">
<center>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122105046_0,0,21,null,'image1')" onmouseout="MM_startTimeout();"><img src="cbutt.png" name="image1" width="103" height="20" border="0" id="image1"></a>
<a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122105158_0,0,21,null,'image2')" onmouseout="MM_startTimeout();"><img src="pbutt.png" name="image2" width="103" height="20" border="0" id="image2"></a>
<a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122105252_0,0,20,null,'image3')" onmouseout="MM_startTimeout();"><img src="sbutt.png" name="image3" width="103" height="20" border="0" id="image3"></a>
<a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122105423_0,0,20,null,'image4')" onmouseout="MM_startTimeout();"><img src="dbutt.png" name="image4" width="103" height="20" border="0" id="image4"></a>
<a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122105610_0,0,20,null,'image5')" onmouseout="MM_startTimeout();"><img src="subutt.png" name="image5" width="103" height="20" border="0" id="image5"></a>
<a href="javascript:;" onmouseover="MM_showMenu(window.mm_menu_0122112135_0,0,20,null,'image6')" onmouseout="MM_startTimeout();"><img src="nebutt.png" name="image6" width="103" height="20" border="0" id="image6"></a>
</td>
</tr>
</table>
</center>
<div class="left">
<img src="loginbutton.png">
</div>
<div class="middle">
<p>bbbbbbbb</p>
</div>
<div class="left">
<div align="right"><img src="subutt.gif"></div>
</div>
</body>
</html>

First Style Sheet Code:
@import url("http://www.magneforcess.com/demo2/style111.css");

body {background-image: url('bluegrey.gif');
background-repeat: repeat;
Background-color: transparent;
color: #000080;
font-family: times, courier;
font-size; 11pt;
margin-left: 40px; font-size}

input {width: 110px;}

SECOND STYLE SHEET CODE:
div#header {align: center;
height: 100px;
width: 900px;
padding: 0px 3px 2px 3px;}

.left {background-image: url('bluegrey.gif')
color: #000;
float: left;
width: 25%;
border: none;
margin-top: 2em;}

.middle {background-image: url('bluegrey.gif')
color: #000;
float: left;
width: 50%;
margin-top: 2em;
margin-bottom: 0;}

photon

6:22 pm on Feb 5, 2004 (gmt 0)

If I'm reading this right--

You've got a left margin of 40px on your

<body>

. Your left column will inherit this margin from the body, so it too should line up 40px from the left side of the window.

Is the issue that you want the left column to be flush against the side of the window? If so, you can change your body margin to 0 (or just delete the

left-margin:40px

). If you need to keep the body margin, but want the column all the way to the left, you could add

left-margin:-40px

to the

left

class.

Blelisa

6:40 pm on Feb 5, 2004 (gmt 0)

That helped a little bit: but my log in button is still too far to the right, I would like it flush to the left underneath my header.

photon

8:30 pm on Feb 5, 2004 (gmt 0)

Hmmmm... Maybe the button image has a transparent background that's accounting for the additional space?

You could also try adding the following to your CSS to see if it helps:


div.left img {margin:0; padding:0;}

Another question: what kind of DOCTYPE are you using?

Blelisa

8:47 pm on Feb 5, 2004 (gmt 0)

Hey Photon, thanks for your help, I finally got it to work. I had to align my <p> inside of my <div> to get it placed where I wanted.

photon

9:47 pm on Feb 5, 2004 (gmt 0)

Good job! Glad to help.