0

Please, look at this example. I intend making horizontal layout with pure html/css, don't bother of old browsers. I made it with display: table technique. But displaying main text containers (light-yellow) became a problem. Each of this has overflow: hidden to prevent vertical scroll. Later, I intend adding some shadow effect at the bottom. Now, I want to make in, for example, 80% height with 10% margin top and bottom. But what I get is container with larger text stretching all parents container (light-green), so 80% of it became too much.

Is there any way to avoid it without javascript?

Maybe I can get text container any height, but with some margin at the bottom. I will appreciate any solution.

Improve this question
3
  • To use overflow: hidden on content within a table cell I believe that you have to wrap that content within a div and apply overflow:hidden to that div, not the table-cell/td. Commented Jun 9, 2010 at 22:16
  • @Brock Adam, I mean I want to make div.article-content 80% of screen, not 80% of parent container. I believe this can be achieved by forcing parent div#content be exactly 100% of screen, not more. But I don't know how. Commented Jun 10, 2010 at 6:34
  • @ricebowl, yes, there is div.content-wrapper inside div.content which is as table-cell. It doesn't work. Commented Jun 10, 2010 at 6:34

2 Answers 2

Reset to default
1

Do not use table layouts, table cell divs have a problem setting their width/height and thus will not be able to follow overflow rules.
update the following css properties in your layout.css, this will get you started:

#content{ display:block; height:90%; overflow:hidden; vertical-align:top; } #content-inner{ display:block; height:100%; vertical-align:top; } .article{ display:inline-block; }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

All parent containers have height: 100%. Width different.
1

It's still not clear what you want; maybe post a quick sketch?

Anyway, I'd want to avoid the horizontal scrollbar. To do that set #content { width: 61%;} (based on the rest of the CSS). Currently, in layout.css, #content width is set to 305%.

RE:

@Brock Adam, I mean I want to make div.article-content 80% of screen, not 80% of parent container. I believe this can be achieved by forcing parent div#content be exactly 100% of screen, not more. But I don't know how.

div.article-content currently appears 5 times in the page. Setting it to 80% of the screen will give a page that's at least 400% wider than what the user can see.

Questions:

  1. The first div is ID'd as "header", but it's floated left and only 39% wide. Is this a header (bar at top of of page) or a left, side-bar?
  2. Are the articles supposed to be in 5 tiny columns, on the same row, or are they supposed to be one after another, scrolling down the page?

Again, statements and the semantics of the example page are unclear. Posting a quick sketch of the desired layout will help us help you.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.