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