CODEWITHSUNDEEP
htmlcsslayout
Valamas
Valamas

Reputation: 24749

3 side by side divs with 100% height and scrolling layout is not cross browser

I have gathered up the following from samples found and managed to get something working well. I am using Chrome but my sample does not work in FireFox or IE.

I am trying to create 3 side by side divs 100% height and 30 odd percent width. The divs when their content exceeds their height should have a scroll bar.

So, besides some margin issues relating to floated divs, I mainly have this. However, it does not work with firefox and internet explorer so what is preventing my layout from being cross browser?

Secondary question. How can i equally spread the divs across the page? Currently I have a spacer divs. but there must be a better way.

http://jsfiddle.net/valamas/m68xchko/

html,body{
    height:100%;    
    margin:0;
    padding:0;
}

.content{
    display:table;
    width:100%;
    border-spacing:10px;
    border-collapse:separate;
    background:#A36;
    height:100%;
}

.Col
{
    float: left;
    border-radius:5px;
    background:#fff;
    width:31%;
    overflow: auto; 
    overflow-x:hidden;
    height:100%;
}

.spacer
{
    float: left;
    border-radius:5px;
    background:#ccc;
    width:2%;
    overflow: auto; 
    overflow-x:hidden;
    height:100%;
}
.clearfix
{
    display:block;
    clear: both;
    float:none;
}

HTML

<div class="content">
    <div class="Col">search</div>
    <div class="spacer"></div>
    <div class="Col"></div>
    <div class="spacer"></div>
    <div class="Col">
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
    <div class="clearfix"></div>
</div>

Upvotes: 0

Views: 173

Answers (1)

nunoarruda
nunoarruda

Reputation: 2924

You should only use HTML markup to semantically structure content and not use extra markup for styling/layout purposes, that's for CSS. I would suggest the following:

HTML

<div class="col col1">
  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>
</div>
<div class="col col2"></div>
<div class="col col3"></div>

CSS

html, body{
  height:100%;
  margin:0;
  padding:0;
}

body {
  overflow: auto; /* clear float */
}

.col {
  float: left;
  width: 30%;
  height: 100%;
  overflow: auto;
}

.col1 { background-color: red; }
.col2 { background-color: green; }
.col3 { background-color: blue; }

http://codepen.io/anon/pen/qAGFd

I also advise you to watch the great CSS tutorials lynda.com as to offer. They're great!

Upvotes: 1

Related Questions