html/css columns

Question

I keep reading that you can use html/css columns without using them in a table. The www.w3schools.org site shows that you can, but I can't get it to work out at all in my code. basically I have this idea.

      <div container="name">
         <dl>item 1 </dl>
         <dd>explain</dd>
         <dl>item 2 </dl>
         <dd>explain</dl>
         ...
      </div>

What I need is for the container to have three columns and the section with the detailed list to be two columns than I will put the info for the third column in its own column. I know the column span is the best way to keep that separate, but I can't find any good explanations for this. And I can't get it to work out of my css page or html page.

boz · Accepted Answer · 2012-10-23 10:05:57Z

2

I think you're going about it the wrong way. Try this.

html:

<div id="container">
    <div id="left-col">
        <!-- left column -->
    </div>
    <div id="content-col">
        <!-- content column -->
    </div>
    <div id="right-col">
        <!-- left column -->
    </div>
</div>

css:

#container { overflow: hidden; width: 940px; }
#left-col { float: left; width: 200px; margin-right: 20px; }
#content-col { float: left; width: 500px; }
#right-col { float: right; width: 200px; }

demo - http://jsfiddle.net/gk5vD/

FYI - you misunderstood what a dl is, have a look at http://www.htmldog.com/reference/htmltags/dl/

answered Oct 23, 2012 at 10:05

boz

4,9045 gold badges45 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mr.j05hua Over a year ago

i used one div container as the container is to have three columns inside it. And the dl list is really just a place holder, it will have a small image, name, and comment per "list item". There is two side columns of those then a third column on the right that will act like page nav. I am trying to use columns to hold it into one div container as page sizes change and I want them to stay centered.

mr.j05hua Over a year ago

I ended up putting them each in the container. Then making the container wide enough to hold them all, and making two float lefts, and a float right. THANK YOU for the help.

Nimantha · Accepted Answer · 2021-11-14 12:16:19Z

0

Firstly, please don't use w3schools. </rant>

CSS3 has columns built in. Have a read about it here and here.

edited Nov 14, 2021 at 12:16

Nimantha

6,5476 gold badges32 silver badges78 bronze badges

answered Oct 23, 2012 at 11:03

Labu

2,57230 silver badges34 bronze badges

Collectives™ on Stack Overflow

html/css columns

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related