Table Layout using CSS

Question

I was trying to use table layout with my div. Everything is fine with my config. But, there is a problem with setting min-width. I was trying to use this in forms. Here is the Demo.

When, the divleft label size gets increases, then it should not wrap to the next line until the maindiv width reaches the limit. so it means setting left div min-width as 25% and if the left div content grows, then it should extend the width to fit to the content until it reaches main div width. Pls suggest me how can i do this.

Css Code

.divmain
{
display: table-row;
padding: 12px;
}
.divleft
{
display: table-cell;
vertical-align: top;
padding: 1px;
width: 25%;
}
.divright
{
display: table-cell;
vertical-align: top;
padding: 1px;
}

tip : why you add .divmain before each CSS property? remove that — xkeshav
– xkeshav, Commented May 20, 2013 at 9:54

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

add two property

.divmain { width:100% }

.divleft { min-width: 25%; }

Note : I also have changed your CSS declaration : see the DEMO

Update

Note: you have missed divright class on first row in your updated demo. now see

.divleft
{
    display: table-cell;
    vertical-align: top;
    padding: 1px;
    min-width: 35%;
}
.divright
{
    display: table-cell;
    vertical-align: top;
    padding: 1px;
}

Updated DEMO

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 20, 2013 at 9:53

xkeshav

54.2k47 gold badges183 silver badges256 bronze badges

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

2 Comments

UniqueChar Over a year ago

Seems min-width for divleft is not working. When the labels are too small, the divleft should use min-width as 25% to allow start of divright elements.

UniqueChar Over a year ago

I have to provide a min-width for divleft element (say 25%). If my divleft element label is so small like No., Name, Dept then also divleft should take min-width as 25%. see the demo again. I updated.

Collectives™ on Stack Overflow

Table Layout using CSS

1 Answer 1

Update

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related