CODEWITHSUNDEEP
htmlcss
vtambourine
vtambourine

Reputation: 2149

How to make overflow: hidden really hide content?

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.

Upvotes: 0

Views: 920

Answers (2)

hndcrftd
hndcrftd

Reputation: 3210

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;
}

Upvotes: 1

Brock Adams
Brock Adams

Reputation: 93643

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.

Upvotes: 1

Related Questions