• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1103
  • Last Modified:

CSS Vertical Rule display issue

I've created a dashed vertical rule that has a height of 100%. If you take a look at the protoytype i set up @ [url]www.whatismyip.ie/beta/beta2.html[/url] you'll see that there is a dashed VR between the nav area and the main content, however, i have the same exact code placed to the right on the main content area and it's not displaying at all.

The CSS i'm using to create the dashed look is
<div style="border-right: 2px; color: #000000; height: 100%; witdh: 1px; padding: 0; display:block; border-style: dashed; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px;     border-right-width: 1px; ">

The code above displays the dashed VR on the left side perfectly.

If i change the height from 100%; to 500px; on the div to the right of the main area then the VR will appear with a height of 500px but if i change it the same code as featured above (use 100% instead of 500px) it doesn't display at all.

I have no idea why this is happening :confused:
0
blaadom
Asked:
blaadom
  • 3
1 Solution
 
brunoCommented:
put a height on the table cell that contains the div, like you did for the one of the left.
0
 
brunoCommented:
btw, that's a whole lot of nested tables for a simple layout - you should be able to accomplish that in CSS without using tables.
0
 
blaadomAuthor Commented:
thanks, can't believe i missed that. I'll be converting to div's once i have the layout contrived. Thanks again
0
 
brunoCommented:
no problem - 100% for height or width on a div means 100% of it's containing element, so no height on the containing table cell means no height for the div.  :-)  glad i could help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now