Reputation: 9583

div floating left

I work on a page where i want a lot of columns. The columns should float left, and there should never be a column under a column. (and if it's possible no scrollbar, just make the columns that exceed the screen impossible to access).

Atm, my second column goes under my first instand of next to it.

<div id="container">

    <div id="menu">
    </div>

    <div id="book">

        <div id="column1" class="column_n">
        </div>

        <div id="column2" class="column_n">
        </div>

    </div>

</div>

css:

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Verdana;
    font-size: 20px;

}

.column_n {
    width: 480px;
    margin: 20px;
    float: left;
}

Upvotes: 5

Answers (5)

maximumcallstack

Reputation: 2917

Position: relative, float left (for sorting columns left to each other) overflow: hidden; for hiding the overflow of the body; auto: for wrapping using same length dimension as child element.

Upvotes: 1

Joost

Reputation: 3209

So if I understand correctly, you have a given amount of columns and only the columns that fit in the browser window should be shown.

If you can set the heights of your columns (and its containers) you can use an overflow on the book div. Columns that don't fit are not shown at all (tried in chromium), if you make the browser wider they can come back. http://jsfiddle.net/rqdzK/1/

If you just want all columns to show on any size of screen you could relative widths. You make sure all widths add up to 100% (although I believe on IE 100% is too much, so take 99.5 or so). http://jsfiddle.net/MqFRB/2/

Upvotes: 0

almathie

Reputation: 731

There does not seems to be any problem with your code, apart from the width of the div : http://jsfiddle.net/XrY8U/

I like to put background-color to my css when I debug, or use chrome dev tools to see the size of the elements.

Most likely, you do not have 2*480 + 4*20 = 1040 px of width available for your columns. Usually websites are designed to be contained in 940 or 960 px.

Upvotes: 0