*
The moose likes HTML, CSS and JavaScript and the fly likes How to achieve this markup Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How to achieve this markup" Watch "How to achieve this markup" New topic
Author

How to achieve this markup

Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

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?


[Thumbnail for Screen Shot 2011-11-29 at 10.24.01 PM.png]



GenRocket - Experts at Building Test Data
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
One idea: Make it a 3 column layout instead of two with the 2nd column just being the dividing line.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

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

Joined: Nov 08, 2001
Posts: 15376
    
    6
Wouldn't setting margins for top and bottom fix that issue?

Eric
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
It might be possible to do it with a bg image, does it line up with the content in any way?
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: How to achieve this markup
 
Similar Threads
putting images in java applet using swing, which is coded in netbeans IDE.
Resizable swing elements
Inclined Text of JLabel
Column Layout Problem Using iText
How would I do this in Java? Union to split unsigned int into two signed short's.