The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to Make a Column Divider, How to add a divider between two columns of text
FBrack
post Mar 7 2010, 12:14 PM
Post #1





Group: Members
Posts: 5
Joined: 7-March 10
From: Raleigh, NC
Member No.: 11,310



I'm trying to make the transition from tables to straight HTML and CSS. I can't figure out how to place a vertical dividing line between two text columns on the screen - a visual separator, if you will. I would prefer not to hard-code the width of the window. My coding standard is XHTML 1.0 Transitional.

Basically I have the following code:

div id="container" ... min-width 800
div id="leftcol" ... which has positioning of float left, width 49%
div id="rightcol" ... which has positioning of float right, width 49%

The problem I'm running into is that the column lengths may be different, and I want the divider to run the length of whichever column is longest. Your help will be greatly appreciated! THANKS.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 7 2010, 12:34 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Well, it isn't straightforward. Maybe you can get some ideas here.
http://css-discuss.incutio.com/?page=AnyColumnLongest
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 7 2010, 01:37 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



How about making the divider a centered, tiling background image of the container element?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 7 2010, 02:01 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



There is an easy way actually. So easy that I'm surprised I've never seen it mentioned. But it only works under the following conditions: the left column must be floated left and the right column must not be floated but use a left margin (or vice versa).

I made the borders thick and in different colors so you can see how I mean more easily. If you give the right column a left margin that is as wide as the left column and any padding and left border it may have, but does NOT include the width of its right border, the right column's left border will be covered by the left column's right border, so no matter which column is longest there will always be a single-width border showing all the way down.

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<head>
<title>Shared column border</title>


<style type="text/css">
<!--
#left { width: 500px; float: left;
border-right: 8px solid #444 }
#right { margin-left: 500px;
border-left: 8px solid red }
-->
</style>

<div id="left">
<p>
When you modify a document, its little disk icon in the tab turns red. This visual cue makes it easy to identify documents that need saving if you want to preserve the changes. When you save the document, its disk icon becomes gray again. </p>
<p>
You will find many useful commands in the Modify menu that help you process your text. These commands make it easy to join or split lines, sort lines, indent or unindent lines, change alignment and character case, insert bullets or line numbers, strip HTML tags or convert text to HTML, etc.</p>
</div>

<div id="right">
<p>
When you modify a document, its little disk icon in the tab turns red. This visual cue makes it easy to identify documents that need saving if you want to preserve the changes. When you save the document, its disk icon becomes gray again. </p>
<p>
You will find many useful commands in the Modify menu that help you process your text. These commands make it easy to join or split lines, sort lines, indent or unindent lines, change alignment and character case, insert bullets or line numbers, strip HTML tags or convert text to HTML, etc.</p>
<p>
When you modify a document, its little disk icon in the tab turns red. This visual cue makes it easy to identify documents that need saving if you want to preserve the changes. When you save the document, its disk icon becomes gray again. </p>
<p>
You will find many useful commands in the Modify menu that help you process your text. These commands make it easy to join or split lines, sort lines, indent or unindent lines, change alignment and character case, insert bullets or line numbers, strip HTML tags or convert text to HTML, etc.</p>
<p>
When you modify a document, its little disk icon in the tab turns red. This visual cue makes it easy to identify documents that need saving if you want to preserve the changes. When you save the document, its disk icon becomes gray again. </p>
<p>
You will find many useful commands in the Modify menu that help you process your text. These commands make it easy to join or split lines, sort lines, indent or unindent lines, change alignment and character case, insert bullets or line numbers, strip HTML tags or convert text to HTML, etc.</p>
</div>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FBrack
post Mar 7 2010, 04:02 PM
Post #5





Group: Members
Posts: 5
Joined: 7-March 10
From: Raleigh, NC
Member No.: 11,310



Thank you for the prompt replies! I have printed and begun to study the referenced AnyColumnLongest articles, which will be very educational, I'm sure. I have also tried and modified the very nice piece of code you supplied, Pandy, adding padding, coloring the background with a container element, etc. Works great!

Questions, though: is this latter approach limited to a fixed-width left column? I assume so, because the left column width must equal the right column's left margin.

Christian J: I'm also experimenting with your idea about a centered tiling background image. Seems logical, but I'm having trouble with implementation -- still experimenting. I can get the image there behind a full-width column, but I can't get it to show up in the middle of two columns.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 7 2010, 07:11 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(FBrack @ Mar 7 2010, 10:02 PM) *

Christian J: I'm also experimenting with your idea about a centered tiling background image. Seems logical, but I'm having trouble with implementation -- still experimenting. I can get the image there behind a full-width column, but I can't get it to show up in the middle of two columns.

I was thinking of something like:

CODE
#c {
min-width: 800px;
overflow: auto;
color: #000;
background: #fff url(stripe.gif) repeat-y center;
}

#l, #r {width: 49%;}
#l {float: left;}
#r {float: right;}

<div id="c">
  <div id="l">left</div>
  <div id="r">right</div>
</div>


The "overflow: auto" stops the container height from collapsing due to the floats. This is not supported by IE6 unless you use an explicit width or height on the container. Instead you might add a clearing element after the floats. See also http://www.quirksmode.org/css/clearing.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 8 2010, 01:52 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE
Questions, though: is this latter approach limited to a fixed-width left column? I assume so, because the left column width must equal the right column's left margin.


No, you can use % or other units as long as it all adds up. In fact, it works with quite a few other layout methods too, but you have to do it differently. The trick is to get the borders on top of eachother. For example if you float both columns left you can do it by nudging the right column to the left with a negative margin, the width of the border (the total width is of no importance with this method).
CODE
#right  { width: 500px; float: left; margin-left: -8px;


You can do it with absolute positioning.
CODE
#left   { width: 500px; position: absolute; top: 0; left: 0; width: 40%;
           border-right: 8px solid #444 }
#right  { position: absolute; top: 0; left: 40%;
           border-left: 8px solid red }


It's just math. Add some padding in the left column and you have to change the numbers for the right column. Also, it won't work with one column floated left and the other one right as you have it. That's why I said only one column must be floated, but I didn't mean that really. I should have expressed it differently to start with. Sorry. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FBrack
post Mar 8 2010, 03:16 PM
Post #8





Group: Members
Posts: 5
Joined: 7-March 10
From: Raleigh, NC
Member No.: 11,310



Christian - OVERFLOW did it! And I learned about another CSS element in the process, which is great. Actually, I did some more reading on this element, and I ended up adding WIDTH 100% as an additional option (I didn't try MIN-WIDTH), and I changed the OVERFLOW parameter from AUTO to HIDDEN, as I read that was better for MACs. Seems to work OK with IE8 and Firefox 3.6.

Thanks so much for your help. I'll get to Pandy's suggestions next.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 8 2010, 04:12 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It isn't a suggestion really. Haven't tested it much, but I don't see why it shouldn't work. The worst that can happen is that you end up with two borders in some odd browser. If nothing else it's a good exercise in how margin, padding, borders and all that work. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 9 2010, 08:51 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(FBrack @ Mar 8 2010, 09:16 PM) *

I changed the OVERFLOW parameter from AUTO to HIDDEN, as I read that was better for MACs.

If you're thinking of IE5/Mac it's hardly in use anymore (neither is IE5/Win).

Be very careful that "overflow: hidden" doesn't hide any content (this applies to current browsers too). Long text strings will become cut off in narrow windows and/or large zoom/text size.

I'd much rather sacrifice IE5/Mac, especially if the content is still readable in it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FBrack
post Mar 9 2010, 01:36 PM
Post #11





Group: Members
Posts: 5
Joined: 7-March 10
From: Raleigh, NC
Member No.: 11,310



OK, all is well. I have implemented both Christian's and Pandy's methods, after experimenting a lot with things like backgrounds and padding. Frankly, I don't really understand the padding issues, but I did find what works and what doesn't, and the "overflow: auto" along with a width property in the container is the key to both approaches. Rather than post my final code here, I have put it on a page for anyone interested. BOTH approaches are shown on the same page.

http://bracksco.com/html/centered_divider_columns.html

Thanks again for your help with this project -- very educational.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 9 2010, 01:45 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Credits... that's a first. Thank you. smile.gif

You shouldn't need to use overflow with my idea. If the issues you have with padding are with my concept, it's just a matter of adding things up. Total width = content width ('width') + padding + borders. So if you have 'width: 500px; padding: 0 20px; border: 5px solid blue' the total width is 500 + 2*20 + 2*5 = 550.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 9 2010, 01:53 PM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Sorry, now I see how you have done it. Odd, I would have thought that a negative left margin on the right column, as wide as the padding on the left column would do it, but it doesn't. The shift is much less than the width of the padding. Must think.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 9 2010, 01:58 PM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Ha! I managed to confuse myself with all my babbling. blush.gif tongue.gif

The padding is of no consequence at all. It's the right border on the left column you must compensate for. All the simpler. Just shift the right col 2px to the left. You already do that, so why did you need the overflow? Am I missing something?

CODE
#right2 {
   float: left;
   width: 49%;
   border-left: 2px solid red;
   padding-left: 5px;
   margin-left: -2px
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 9 2010, 02:16 PM
Post #15


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Wait, you actually say why. For the background color, to make the container contain the float. But why do you need a width for container?

Jesus. I'd better go to bed now.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
FBrack
post Mar 9 2010, 06:45 PM
Post #16





Group: Members
Posts: 5
Joined: 7-March 10
From: Raleigh, NC
Member No.: 11,310



QUOTE(pandy @ Mar 9 2010, 02:16 PM) *

... But why do you need a width for container?


You'll probably shake your head at the answer, Pandy! Because in each case, Microsoft Expression Web doesn't display the result properly, even though IE and Firefox do! I would like to see the proper result in my design tool, so I seem to have to compensate this way.

For Method 1 (background image), if I leave the width off the container, the divider (image) doesn't propagate down the display. For Method 2 (common border), the right column gets shifted down the page, below the left column.

Sigh... sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 9 2010, 07:29 PM
Post #17


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Remove it before you upload then. Why bother with the rendering of a "browser" no one will see your page in?

As confused as I am today, I should say no more, but that wouldn't be like me. I think it's better to do one's previewing in real browsers, or, as you have found, you may end up designing around bugs that doesn't matter in the real world and you may miss things that do matter.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 02:25 PM