CSS question

Could somebody take a look at the html @ html_test.aspx and tell me why border-bottom is displaying at the top of the div in Firefox and Chrome?

It looks like putting the border on the individual divs worked. Thanks for your help.

You could do something like

.left {width: 30%}
.right {width: 68%}

for width, but for height, it’s better to let the boxes expand with their content, so just don’t set fixed heights on them. 100% height is a trickier topic.

Is there anyway for this design to expand to the whole width and height?

The only border-bottom I am using is on the ui_container which is the div that contains all the other elements.

Yes, that’s a better way to do it.

No, you don’t have bottom borders set on the bottom divs.

You could change

.bottom {
  height: 380px;
}

to

.bottom {
  height: 380px;
  border-bottom: 1px solid #000000;
}

You could have the left column at 30% width and then unfloat the right column (but give it margin-left:30%) and that will expand the right column to fill the rest (note, the margin value on .right has to match the width on .left)

:slight_smile:

So you see the bottom two squares has a bottom border? I do get the border in IE but not in Firefox or Chrome.

It isn’t. :slight_smile: Each div that has border-bottom is showing the border at the bottom.