CSS, html two columns auto length

Question

How do I make those columns to be same width? Not the fix way. I want to do it automatically. It means when one will contain more text it will be longer so the second one will be equally long. CSS

    article.leftnews {
    float: left;
    border-radius: 30px;
    width: 43%;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    overflow: auto;
    border:5px solid #0000CC;
}
article.rightnews {
    border-radius: 30px;
    margin-left: 52%;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    overflow: auto;
    border:5px solid #000066;
}
section{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width: 700px;
    text-align: justify;
}

My demo here

Are you saying you want these columns to always have equal heights? Also, this part of your question seems very contradictory to me: ``when one will contain more text it will be longer but the second one will be as long as the first one``. Judging by the first half of this excerpt I would assume you mean that the columns can have different heights. But after reading the second part, it sounds like that is not the case. — Jeff, Mar 06 '15 at 19:10
Also, when talking about dimensions in css, try to use the words ``width`` and ``height`` only — Jeff, Mar 06 '15 at 19:12
I *think* this is a duplicate of (and closed the question as such, but then I re-read the question and discovered I don't really understand what's being asked for): http://stackoverflow.com/q/2114757/82548 — David Thomas, Mar 06 '15 at 19:14

Stickers · Answer 1 · 2015-03-06T19:34:56.813

1

The best way to me is using CSS table and table-cell

http://jsfiddle.net/2d9917o7/

Update: for rounded corners style, additional <div> inside each table cell is needed.

http://jsfiddle.net/2d9917o7/1/

HTML

<div class="container">
    <article class="leftnews">left<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>end</article>
    <article class="rightnews">right</article>
</div>

CSS

.container {
    display: table;
    width: 100%;
}

.leftnews,
.rightnews {
    display: table-cell;
    width: 50%;
    background: pink;
}

.leftnews {
    background: lime;
}

edited Mar 06 '15 at 19:34

answered Mar 06 '15 at 19:06

Stickers

75,527
23
147
186

i know it could be good ...but i cant use table. Tables are for "table things". – tprieboj Mar 06 '15 at 19:09
@TomP Since there is no elegant way to do what you want to do with pure CSS, you are going to have to do 'Table Things' to get it to work. Either that or change your layout. This is the best way to achieve what you want. – robabby Mar 06 '15 at 19:12
1

@TomP as you can see, it's not using `` as markups.
– Stickers Mar 06 '15 at 19:13

CSS, html two columns auto length

1 Answers1