Solved

How can I have vertical lines on my site

Posted on 2010-09-14
10
332 Views
Last Modified: 2012-05-10
At www.groenerekenkamer.nl I have multiple columns with differing length. There are vertical lines between them but they are limited by the text length. I would like to be line 1, 4 and 5 to be just as long (and starting at the same height) as 2 and 3 now. Can this be done?

Thanks
0
Comment
Question by:TheoRichel
  • 3
  • 3
  • 2
  • +1
10 Comments
 
LVL 3

Expert Comment

by:wuff
ID: 33672715
i had a quick look at your html code and css. I suggest you add an extra <div> surrounding your right column parts. Put border on the left and right side of it and remove the borders of div with <div id="rightwide">
0
 

Author Comment

by:TheoRichel
ID: 33672778
Thank you, but that is not unsimilar as to how its done now. If I put divs around these columns, they will only go as deep as the containing text, while I want the middle, main, column to dictate that length.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 33672878
Actually for your website that's particularly easy. Since the .centerpage element already has overflow:hidden, yours is a perfect page to abuse an equal column technique with a padding/margin combination! See more: http://www.positioniseverything.net/articles/onetruelayout/equalheight

Example, add the following:
#left {
margin:0 0 -5000px;
padding:0 5px 5005px;
}

As you can see I kept the padding 5px larger than the negative margin, this is to keep the existing padding of 5px...
0
 
LVL 3

Expert Comment

by:wuff
ID: 33672978
Sorry, I misunderstood you. Never scrolled down. I thought the problem was something else.
Now I know what you mean.

Maybe if you have a container under the header which covers your left, center and right columns and then set all the outer columns div height to 100% with a top and bottom margin to get some space up and down.
0
 
LVL 17

Expert Comment

by:Thomas4019
ID: 33673751
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:TheoRichel
ID: 33675893
@mreuring
Thanks: I managed to create the left line, but on the right side it is more complicated. I tried:

#right2 {
  background: #FFFFFF;
  color: #000000;
  float: left;
  padding: 0px 5px 5px;
  border-right: 1px solid #006600;
  font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
  font-size: 1em;
  margin: 0;
  width: 158px;
  overflow: hidden;
}
  #right2 {
margin:0 0 -5000px;
padding:0 5px 5005px;
}


But it didnt produce anything.
0
 
LVL 17

Expert Comment

by:Thomas4019
ID: 33676324
You don't have an element with and ID of right2 in your site's theme.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 33677643
Well, since you have no single right-hand element, picking up the first element and performing the same trick worked for me, in FF3.something, using firebug on OSX...
#right1 {
border-right:1px solid black;
margin:0 0 -5000px;
padding:0 0 5005px 5px;
width:325px;
}

Open in new window

0
 

Author Comment

by:TheoRichel
ID: 33682390
@mreuring: Thanks but  applying this setting also sets the block in region right1 at another  width (right1 is supposed to be 150, not the 325 you set here, right2 158)..
I have applied the setting to right2 where it works. Only on long pages it doesnt go to the bottom, not even after I change it to 15.000px and even 2500px (after clearing the cache). See www.groenerekenkamer.nl/windenergie

If I use the setting you supplied for right1 with its regular width (150px) than this is interpreted as the right end of the page (nothing thereafter is shown anymore).

So to summarise I manage line 1,2,3 and 5, though the latter is not long enough and how about line 4?

0
 
LVL 17

Accepted Solution

by:
mreuring earned 500 total points
ID: 33685175
Well, I had a look at your page, you are sure trying to create a complicate layout :) Perhaps you should wait for CSS3 grid support!
On the short term, there is a practical limit to how much margin/padding you can supply (too much of a good thing makes the browsers belly hurt), the limit for your site (including the 5px padding) would be as follows:
[code]
#right2 {
   margin:0 0 -32762px;
   padding:0 5px 32767px;
}
[/code]

What I do not yet comprehend is what is this 'line 4'? And perhaps your salvation lies in a little cheating? Using faux-columns to generate that extra line by abusing the background of 'centerpage' and a repeating 1px gif?
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now