• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

How to achieve this markup

 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The image I'm attaching to this is just that, an image that the designer drummed up in Adobe. There is this gray vertical separator between the left and right columns. The left and right columns are SECTION elements (basically DIVs for all you HTML4 folks). The trick here is the following:

The separator doesn't go all the way to the top of the SECTION nor to the bottom.
It is different heights depending on how much content there is on a particular page.

Because of these 2 facts I don't think a simple border will do the trick. Anyone know of a good way to achieve the designed effect?
Screen Shot 2011-11-29 at 10.24.01 PM.png
[Thumbnail for Screen Shot 2011-11-29 at 10.24.01 PM.png]
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
One idea: Make it a 3 column layout instead of two with the 2nd column just being the dividing line.
 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric Pascarello wrote:One idea: Make it a 3 column layout instead of two with the 2nd column just being the dividing line.


That's probably the route I am going to take. The tricky part is making that column shorter than the other 2 and centering it vertically.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Wouldn't setting margins for top and bottom fix that issue?

Eric
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It might be possible to do it with a bg image, does it line up with the content in any way?
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic