CSS Forum

**sameer** · 08-02-2006, 06:27 AM

i am trying to create vertical line with a DIV
code is

Code:

.vLine{
width:1px;
height:200px;
float:left;
overflow:hidden;
background-color:#818181;
position:relative;
}

now the problem is
i want it to have full height instead of just 200px
the content of the container div in which the vLine is placed is having variable height.

is there any way around it?

**Minaki** · 08-02-2006, 07:41 AM

height: 100%;

?

**gringo** · 08-02-2006, 09:13 AM

Could you put a border-left (or border-right) 1 pixel thick on the container div?

**sameer** · 08-02-2006, 09:22 AM

there are 4 columns ,
and i am trying to put a vertical line between them
the height of columns differ,
so if i put left/right border, around each div, the border will have height of the columns, which is not same for all columns.
so the border is not going to work for sure

is there any other solution?

**saadatshah** · 08-02-2006, 09:51 AM

Post your HTML code

**sameer** · 08-02-2006, 10:01 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
    <div id="base">
        
        <div id="main">
            <div class="sideBox">
                <div class="verticalMenu"><img src="images/ar3.gif" class="imgDownArrow"><a href="#">link</a></div>
                <div class="verticalMenu"><img src="images/ar3.gif" class="imgDownArrow"><a href="#">linkfsd</a></div>
                <div class="verticalMenu"><img src="images/ar3.gif" class="imgDownArrow"><a href="#">linkdsfg sdds</a></div>
                <div class="verticalMenu"><img src="images/ar3.gif" class="imgDownArrow"><a href="#">linkdfds fg</a></div>
                <div class="verticalMenu"><img src="images/ar3.gif" class="imgDownArrow"><a href="#">lindsfdsfds</a></div>
            </div>
            <div class="vLine" height="100%"></div>
            <div class="box">
                <div class="infoBox"></div>
                <div class="infoBox"></div>
            </div>
            <div class="vLine"></div>            
            <div class="box">
                <div class="infoBox"></div>
                <div class="infoBox"></div>
                <div class="infoBox"></div>
            </div>
            <div class="vLine"></div>
            <div class="sideBox">
                <div class="sBox"></div>
            </div>        
        </div>
        
    </div>
</body>
</html>

i want all the three vLine to have height of the content
i will also like to know any other solution to display such lines

**LadynRed** · 08-02-2006, 04:18 PM

An alternative solution is called "faux columns". You would use a background image on your content container that already has the vertical lines in it that you want. It will APPEAR that you have 4 columns will varying content and the background will stretch based on the longest column if you set it up right.

There are several methods for column layouts here:
Front Page - css-discuss

**sameer** · 08-03-2006, 01:33 AM

thanks all,
i think fauxed columns will work as a solution,
thanks LadynRed.

**jumpenjuhosapha** · 08-03-2006, 02:13 AM

Also, something I noticed about height:100% attributes, they work fine in FF, but IE see's 100% not as in relation to your viewport, but as in relation to the elements of your page. In other words, if your page extends halfway down the viewport, then 100% will only be halfway. So in FF if your viewport is 450px high, then 100% would be equal to 450px. In IE, 100% starts at the top of your viewport and ends where the body of the html ends. I don't know if there is a way to find out what the viewport size is on each visitors browser, but it would sure be handy in this case.