How to make left border for Div

HTML & CSS
1

Hey
This is my html code :

  				<div id="content">

						<h2>About MRT TEAM</h2>
						<p>My text goes here !!!</p>
							<div id="greenmenu">
								<img src="images/green0.png" />
								<img src="images/green1.png" />
								<img src="images/green2.png" />
								<img src="images/green3.png" />
								<img src="images/green4.png" />
								<img src="images/green5.png" />
							</div>
					</div>

and this is my css code which i wrote for this HTML CODE:

#wrap Content {
float:left;
height:405px;
background:#000 url(images/bg-sub.png) repeat center top;
}
#wrap Content h2{
color:#d1d1d1;
font-family:tahoma;
font-size:17px;
margin-left:285px;
margin-top:90px;
}
#wrap Content p{
font-family:tahoma;
color:#656565;
font-size:12px;
margin-top:12px;
margin-left:285px;
margin-right:300px;
line-height:150%;
}
#wrap Content #greenmenu{
float:left;
margin-top:70px;
margin-left:350px;
}

and also live demo : http://www.hamidoffice.com/kar/reza/

I like to make a left border like this pictures but i cant and it doesn’t work the same as this picture :

thank you . :slight_smile:

2

well now there are separate from each other you can see the url : http://www.hamidoffice.com/kar/reza/

3

for connecting both border remove top margin


#wrap #content p{
font-family:tahoma;
color:#656565;
font-size:12px;
[COLOR="Red"]margin-top:12px;[/COLOR] /*remove this */
[COLOR="Red"]padding-top:10px;[/COLOR] /* add this */
margin-left:285px;
margin-right:300px;
line-height:150%;
border-left:1px solid #FF0000;
padding-left:5px;
}

vineet

4

Solved !
Thanks a lot for your helpful replies mate

5

also for the heading in h2


#wrap #content h2{
color:#d1d1d1;
font-family:tahoma;
font-size:17px;
margin-left:285px;
margin-top:90px;
border-left:1px solid #FF0000; /* left border */
padding-left:5px;
}
6

it works for P what about h2 tag ? can i do the same way for it ? if yes how to connect this 2 border to each other?

7

try this


#wrap #content p{
font-family:tahoma;
color:#656565;
font-size:12px;
margin-top:12px;
margin-left:285px;
margin-right:300px;
line-height:150%;
border-left:1px solid #FF0000; /* left border */
padding-left:5px;
}
8

Hey vinpkl, it doesn’t work, the border stick to the left side the page :frowning:

9

try this


#wrap #content {
float:left;
height:405px;
background:#000 url(images/bg-sub.png) repeat center top;
border-left:1px solid #ff0000; /* for left border */
}

vineet