How do I get two side by side divs displayed correctly inside a bordered, dynamic height content area?


Tags: css,html

Problem :

I have a main content area div that has a border. Inside this area I want to have 2 columns side by side. Right now my html/css looks like

<div id="main-area">
    <div class="left-subcontent">left content</div>
    <div class="right-subconent">right content</div>
</div>

#main-area 
{
    margin-left: 160px;
    border-left: solid;
    border-bottom: solid;
    border-right: solid;
    min-height: 250px;
    padding: 15px;
    border-color: #C9C299;
}

.left-subcontent { float: left; width: 200px; }
.right-subcontent { float: left; width: 200px; }

The problem is that with these both floated left, if the content in either left or right areas are longer than 250 pixels, than the main area's border flows in the middle of these content areas (and I have a feeling if I add a footer that will flow inside of these divs too). What I need is that the main area's border is around all the content inside.

Does anyone have any idea how I can accomplish the border around 2 dynamic sized columns (either of which can have more content than the other).



Solution :

You will have to add a float termination div:

<div id="main-area">
    <div class="left-subcontent">left content</div>
    <div class="right-subconent">right content</div>
    <div class="clear"></div>
</div>

#main-area 
{
    margin-left: 160px;
    border-left: solid;
    border-bottom: solid;
    border-right: solid;
    min-height: 250px;
    padding: 15px;
    border-color: #C9C299;
}

.left-subcontent { float: left; width: 200px; }
.right-subcontent { float: left; width: 200px; }
.clear { clear: both; }

This will do it.


    CSS Howto..

    how to create css shapes X which has to be background inside? [closed]

    How can I show a loading screen while a really large image is loading?

    How to align things responsive html CSS

    CSS table: How to position action buttons left to each row

    How to display only the
      that has a selected
    • in it, including all of the
    • s in that parent ul, not just the selected ones?

    How does this wheel menu get the name

    How to @import without including all CSS but just the @extends ones

    how to pass jquery variable value into css property value?

    How to add CSS class to password field using jquery in MVC?

    CSS: How can I set image size relative to parent height?

    CSS or Javascript href hover (or mouseover) showing additional clickable links

    how to draw a configurable pie chart in css

    how to change browsers default scrollbar using css or jquery

    Content property in CSS - how to put content into several paragraphs

    how to position an element right below an “absolute” div?

    How do you make something in the center of the page in CSS? [duplicate]

    Slideshow using background images with navigation and captions

    How do I use CSS to control which part of an image shows in mobile version of site?

    How to resolve css incompabilities/differences between different versions of IE?

    How to change CSS li tag in Bootstrap3 navigation when in and out or responsive view?

    how to gap a list in half

    How to use CSS function instead of LESS function?

    How do I tell a page to ignore internal CSS in favor of external CSS?

    HTML - How do css/javascript files get loaded?

    How to align content to the bottom of a div?

    How can I take pseudo:after { content: “Value”; } value dynamically in this snippet?

    How to hide a div based on its class

    How to draw mobile device edge using CSS?

    How can I use jQuery to create a csv of all checked checkboxes associated text?

    How to program a CSS3/JQuery/Flexslider carousel with visible sides