2 column layout issue when using borders

[loligator]

Hello all,

I'm new to CSS layouts and am trying to create a two column layout within a wordpress page. The left and right column line up as expected until I add border-left and padding into the mix found within div#mediaPhotos. After adding it, the right div is still on the right but isn't aligned with the top of the page. It's found all the way at the bottom. Here's the HTML:

<div id="mediaContent">
    <div id="mediaVideos">
        a bunch of text and videos can be found here
    </div> <!-- end id=mediaVideos -->

    <div id="mediaPhotos">
        a bunch of text and images are found here
    </div> <!-- end id=mediaPhotos -->

    <div class="mediaCleared"></div>

</div> <!-- end id=mediaContent -->

Here's the CSS:

div#mediaContent {
    height:100%;
    width:100%;
}

div#mediaVideos {
    display:inline-block;
    height:100%;
    width:70%; 
    float:left;
}

div#mediaPhotos {
    display:inline-block;
    width:30%; 
    height:100%;
    float:right;
    border-left: 2px dotted #51303f;
    padding: 15px;
}

div.mediaCleared {
    clear: both;
}

Thanks guys

[Helianthus]

Did you remember to increase the width of the column to compensate for the additional 34px (border and padding)? Don't forget you boxmodel: Click Here

[loligator]

damn, i feel stupid. that's what the issue was. i assumed because i was using percentages it would have adjusted for that. i was wrong!

[Helianthus]

I doubt you are stupid :) Don't forget to close this discussion.