CODEWITHSUNDEEP
htmlcssbox
Suat Hyusein
Suat Hyusein

Reputation: 605

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

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

Upvotes: 0

Views: 110

Answers (3)

Danziger
Danziger

Reputation: 21171

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:

Upvotes: 0

mihutz
mihutz

Reputation: 305

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/

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

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.

Upvotes: 0

Related Questions