How can I create div elements which are like a table with border

Question

I was wondering.. how can I make my div elements like boxes but without using the element "table" for border draw. So far I was using the table element, but when I was having longer sentences, the box itself widened, which messed up with my design:

http://postimg.org/image/qjp8u01ox/

Usually, the center column widens as well, when texts overgo the width of the column. I've tried the overflow attribute to be hidden, but then again, the text the rest of the text is cut, instead of going for a new line.

I would like it to be like the e107 CMS side menus. Example:

http://clanwebs.co.uk/images/codww.jpg

But I guess they are using some images, and write text through this image.

Edit: My code: jsfiddle.net/Xz8x4

mihutz · Accepted Answer · 2014-06-15T15:15:36.757

1

You should put the all the content into a div with a specified width. I write a little example to show you how it works.

css:

.body{
    text-align:center;
    width:80%;
}

.left{
    float:left;
    width:20%;
}

.right{
    float:left;
    width:20%;
}

.center{
    float:left;
    width:60%
}

html:

<div class="body">
    <div class="left">
    test test test test test test test test test test test 
    </div>
    <div class="center">
    test test test test test test test test test test test 
    </div>
    <div class="right">
    test test test test test test test test test test test 
    </div>
</div>

demo: http://jsfiddle.net/mihutz/ba2eA/1/

You need a max-width:

#leftmenu td, #centercol td, #rightmenu td {
    color: #FFFFFF;
    text-align:center;
    overflow:hidden;
    max-width:1px;
}

demo: http://jsfiddle.net/mihutz/Xz8x4/2/

edited Jun 15 '14 at 15:15

answered Jun 15 '14 at 14:47

mihutz

195
1
3
11

I've done it in a similar fashion, but still not working, here is the fiddle: http://jsfiddle.net/Xz8x4/ – Suat Hyusein Jun 15 '14 at 14:54
the box is fixed, thanks a lot, but only the text problem is left, it still continues outside the container, how can I make it go for a new line it it exceeds its limit?(I've removed the overflow attribute because it cuts the text otherwise.. ) – Suat Hyusein Jun 15 '14 at 15:23

score 0 · Answer 2 · answered Jun 15 '14 at 14:38

0

The problem is you're not setting the width property at all.

Set width: 100px and it would stay in its limits. Otherwise it is auto and the browser would try to elongate it untill all of the text is wrapped or the far right side is met.

answered Jun 15 '14 at 14:38

Afzaal Ahmad Zeeshan

15,669
12
55
103

I've tried this a couple of times, still no result. – Suat Hyusein Jun 15 '14 at 14:40

score 0 · Answer 3 · answered Jun 15 '14 at 15:43

The problem is that the rightmost column text is longer than the space it has, so you can set word-break: break-all; to break that text into multiple lines, although it has no spaces.

If the real text that goes in that column fits well in it or has spaces so that it can be broken up into multiple lines, then there would be no problem.

This 3-column layout is called the Holy Grail layout. Maybe this can be of help to you:

How can I create div elements which are like a table with border

3 Answers3