Div overflow not working

Question

Can someone please tell me why overflow:hidden; is not working,it has been rattling my brain and have tried all sorts unless it is the layout I have done it by.

Thanks in advance.

#RightContent {
    min-height: 90%;
    background-color: #0A0A0A;
    border-top: 2px solid #2D2D2D;
    border-left: 2px solid #2D2D2D;
    border-right: 2px solid #2D2D2D;
    border-top-right-radius: 25px;
    width: 41%;
    margin: 0 auto;
    position: absolute;
    top: 20px;
    left: 404pt;
    overflow: hidden;   
}

#RightFooter {
    min-height: 30px;
    background-color: #0A0A0A;
    border-bottom: 2px solid #2D2D2D;
    border-left: 2px solid #2D2D2D;
    border-right: 2px solid #2D2D2D;
    border-bottom-right-radius: 25px;
    width: 41%;
    margin: 0 auto;
    position: absolute;
    bottom: 20px;
    left: 404pt;
    overflow: hidden;   
}

See example at posturads.com

Thanks in advance.

could you please isolate the problem and recreate it in a jsfiddle — Eric Goncalves
– Eric Goncalves, Commented Jan 23, 2013 at 18:13
There is no reason that your footers are positioned absolute. It would be much better to have for each column a wrapper and put content and footer inside it. That is the reason that your footer positions are so messed up. And by the way, get rid of the tables in the right column. There is no reason for tables. — Sven Bieder
– Sven Bieder, Commented Jan 23, 2013 at 18:13

technophobia · Accepted Answer · 2013-01-23 19:10:35Z

1

You haven't set the height on the element or any of its ancestors.

Try setting the height on that #RightContent element.

Updated

I've created a quick html layout sample to help you get started: http://jsfiddle.net/Zdaaj/

Please study the sample and experiment.

I highly recommend you get familiar with using floats, clears, and margins to get your layout where you want it and reduce your frustration.

edited Jan 23, 2013 at 19:10

answered Jan 23, 2013 at 18:13

technophobia

2,6291 gold badge23 silver badges30 bronze badges

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

6 Comments

BoxyGILLETT Over a year ago

Hmmm have tried, all I want is for the footer to be pushed down as the Right Content expands.

technophobia Over a year ago

Try to avoid absolute positioning. Instead, try floating your elements - there are plenty of great examples out there.

technophobia Over a year ago

Also, try wrapping your markup into proper sections. Example: Have a container that centers the content of the page. Then have two nested containers for the upper section and the footer. Keep diving your markup into sections that make sense and you'll find styling them becomes much easier.

technophobia Over a year ago

I hope you find the attached jsFiddle helpful - that's as far as I can help you.

BoxyGILLETT Over a year ago

That has worked perfectly thanks Technophobia, I have styled it to how I want it, I have made the #page min height min-height: 73%; only problem I have now is the footers at in middle of page I can't get them to stay at the bottom they just sit and the end of content in the right content. other than that it has worked wonderfully. :D

|

Collectives™ on Stack Overflow

Div overflow not working

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related