CODEWITHSUNDEEP
htmlcss
user1509217
user1509217

Reputation: 1

creating two floating divs side by side with 100% height

I'm try to create a side by side div that have 100% height, i manage to get the first div working but the second one is cause problem, been trying to do this for the last 3 hours.

#mainWrapper{
    width: 900px;
    margin:0px auto;
    background:#fff;
}

/*leftColumn */
.leftColumn {
    float:left;
    width:250px;
    height:100%;
    background:#fafafa;
    border-left:solid 1px #dedede;
    position:fixed;
    top:0px;
}

/* Content */
.mainContent {
    float: left;
    width: 650px;
    height:100%;
    background:#fff;
    margin-left:252px;
    padding-bottom: 50px;
}

example of how it's supposed to look like http://i49.tinypic.com/ycef7.jpg

how it looks like at the moment.(tried everything dunno how to fix it) http://i49.tinypic.com/2ryk5eo.png

Upvotes: 0

Views: 754

Answers (2)

defau1t
defau1t

Reputation: 10619

Rather than giving explicit height to both the inner divs floated left, you should use overflow:hidden; on parent div, e-g:

#mainWrapper{
    width: 900px;
    margin:0px auto;
    background:#fff;
    overflow:hidden;
}

Upvotes: 1

Waleed Khan
Waleed Khan

Reputation: 11467

Add

html, body {
    height: 100%;
}

(http://jsfiddle.net/zYWjJ/2/)

Upvotes: 0

Related Questions