0

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

Edited by loligator: clarification

2
Contributors
3
Replies
4
Views
5 Years
Discussion Span
Last Post by Helianthus
1

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

0

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!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.