CODEWITHSUNDEEP
cssborder
user188276
user188276

Reputation:

border for containing element in css when it contains float elements

In this 2-column layout, I want to put a border over the whole page. I thought if I put 'border:solid' inside the <body> tag would do the work, but it didn't. It only put a border over the heading <h1>. Could somebody help? Thanks!

http://jsfiddle.net/v5gSt/

<!DOCTYPE html>
<html>
    <head>
        <title>Two Column Layout</title>
        <style type="text/css">
            body { 
                width: 960px;
                font-family: Arial, Verdana, sans-serif;
                color: #665544;
                border: solid;
                }
            .column1of2 {
                float: left;
                width: 620px;
                margin: 10px;}
            .column2of2 {
                float: left;
                width: 300px;
                margin: 10px;}
        </style>
    </head>
    <body>
        <h1>The Evolution of the Bicycle</h1>
        <div class="column1of2">
            <h3>The First Bicycle</h3>
            <p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
            <p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
            <h3>Further Innovations</h3>
            <p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since it's wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
            <p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
        </div>
        <div class="column2of2">
            <h3>Bicycle Timeline</h3>
            <ul>
                <li>1817: Draisienne</li>
                <li>1865: Velocipede</li>
                <li>1870: High-wheel bicycle</li>
                <li>1876: High-wheel safety</li>
                <li>1885: Hard-tired safety</li>
                <li>1888: Pneumatic safety</li>
            </ul>
        </div>

    </body>
</html>

Upvotes: 1

Views: 240

Answers (4)

mesut
mesut

Reputation: 2177

put this line before body's end tag

<div style="clear:both "></div>


<html>
<head>
    <title>Two Column Layout</title>
    <style type="text/css">
        body {      
        width: 970px;
        font-family: Arial, Verdana, sans-serif;
        color: #665544;
        border:medium black inset;
        }           
        .column1of2 {
        float: left;
        width: 620px;
        margin: 10px;
    }
        .column2of2 {
        float: left;
        width: 300px;
        margin: 10px;
    }
    </style>
</head>

<body>    
    <h1>The Evolution of the Bicycle</h1>
    <div class="column1of2">        
        <h3>The First Bicycle</h3>
        <p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
        <p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
        <h3>Further Innovations</h3>
        <p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since it's wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
        <p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
    </div>
    <div class="column2of2">
        <h3>Bicycle Timeline</h3>
        <ul>
            <li>1817: Draisienne</li>
            <li>1865: Velocipede</li>
            <li>1870: High-wheel bicycle</li>
            <li>1876: High-wheel safety</li>
            <li>1885: Hard-tired safety</li>
            <li>1888: Pneumatic safety</li>
        </ul>            
    </div>        
    <div style="clear:both "></div> 
</body>

Upvotes: 1

Satevis
Satevis

Reputation: 1348

Actually your border: solid; works :) but the two div are set to float: left so there are remove of the document flow, you have to use the clear CSS property on a element after the last div.

The very basic example which is far from perfect but works : 

<style type="text/css">
clear
{
  clear: both;
}
</style>
<div class="column2of2">
...
</div>
<br class="clear"></span>

There a lot of solution out there for create a clearer you can view some of them on Quirksmode

Upvotes: 1

James
James

Reputation: 1003

Floated elements are taken out of the document flow, and as a result their containers don't know anything about their width or height unless they are floated.

Think of it as if they are 2D and were literally floating on top of the container.

You have two main options to get round this:

  • Float the body.
  • Wrap the divs in a page container div and float that.

Upvotes: -1

j08691
j08691

Reputation: 207901

While not semantic, adding an empty div before the closing body tag with the style clear:both fixes it.

jsFiddle example

Upvotes: 1

Related Questions