CODEWITHSUNDEEP
css
Gavin
Gavin

Reputation: 21

CSS pushing content down?

See any page on kranedesign.com

If you decrease the size of your browser horizontally, the main content drops below the navigation. I'm not sure where or how in the CSS to fix this. Ideally, I would like it to scale to fit...but even just a horizontal scroll bar would be better.

Upvotes: 0

Views: 1210

Answers (2)

Niels
Niels

Reputation: 49929

You should have a container div. Like:

<div id="container">
    <div id="nav"></div>
    <div id="content"></div>
</div>

Then give the container class a overflow : hidden (stretch the container div) and give the container div a width. I think your navigation and content are floated?

Upvotes: 1

Strelok
Strelok

Reputation: 51451

Your #outer container div should have the following CSS:

#outer {
    width: 1160px;
    position: relative;
    overflow: hidden;
}

Your #aside and #primary are floated with fixed widths, but their container #outer has a width of 100% which means the width changes. So when the browser window width changes to a value less than the width of #aside and #primary combined, then #primary will drop below the #aside div.

Upvotes: 2

Related Questions