10 replies [Last post]
Razmeth
Offline
newbie
Last seen: 12 years 35 weeks ago
Joined: 2009-01-11
Posts: 5
Points: 0

I'm currently working on a site for work/school and I have a slight graphic question. The site is http://cypher.db.cs.rpi.edu/search/searchA.jsp and I'm wondering, how can I get a border around and dividing the four sections (all variable length and within their own div statement and floated left)? I currently just have a border right and bottom on each, but that shows the problem of them being different heights and the borders being odd because of such.

rejamesuk
Offline
Regular
uk
Last seen: 12 years 28 weeks ago
uk
Joined: 2009-01-10
Posts: 38
Points: 0

I'm assuming you mean so you

I'm assuming you mean so you don't get a double border?

if so...ck_kids.css (line 212)

.search_section_sub {
border:2px solid #B0CFED;
float:left;
margin-left:-2px;
margin-top:-2px;
text-align:center;
width:300px;
}

I don't know how this will work cross browser but it's okay in firefox

good luck

Razmeth
Offline
newbie
Last seen: 12 years 35 weeks ago
Joined: 2009-01-11
Posts: 5
Points: 0

I tried that and you can see

I tried that and you can see the results: http://cypher.db.cs.rpi.edu/search/searchA.jsp . My issues is that the box on the left is shorter than the one on the right. That's the case now, but it may change and the reverse be true later. For that reason, I need a solution that works with variable size divs. Is there any other method to do this, or should I use a *shivers* table?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

so you want both sides to be

so you want both sides to be the same height?

Razmeth
Offline
newbie
Last seen: 12 years 35 weeks ago
Joined: 2009-01-11
Posts: 5
Points: 0

Yes, based on whichever is

Yes, based on whichever is the tallest.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

umm, to my knowledge, there

umm, to my knowledge, there isnt really a great way to do this. if you use borders, you'll need to make both sides the same fixed height. Or a better way would be to research Faux Columns.
This guy has an interesting way of doing this. I have not testing this.

Razmeth
Offline
newbie
Last seen: 12 years 35 weeks ago
Joined: 2009-01-11
Posts: 5
Points: 0

Ok, thank you, I can get

Ok, thank you, I can get that working now. One other issue though. I have a calendar whose bordering lines work only in IE, not in Mozilla and I'm not sure why. This is the one that doesn't work, but I tried just viewing the sidebar.jsp and it works fine in Mozilla. I've used web developer toolbar and looked at each of the parent divs, but can't find any that should be affecting it. Any suggestions?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

post a link

post a link

Razmeth
Offline
newbie
Last seen: 12 years 35 weeks ago
Joined: 2009-01-11
Posts: 5
Points: 0

http://cypher.db.cs.rpi.edu/s

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

You might want to get this

You might want to get this thing validated before going further.

rejamesuk
Offline
Regular
uk
Last seen: 12 years 28 weeks ago
uk
Joined: 2009-01-10
Posts: 38
Points: 0

in your markup for the

in your markup for the table, you have border="0" that'll be it