CSS, how to put a div inside a div that is responsive?


Tags: css,html

Problem :

I am trying to create a box with 2 contents side by side that is responsive. I want the divs to have separate classes so when I add the javascript, each content will be unique from the other. Can somebody help me out?

html:

<head>
    <meta charset="utf-8">
</head>

<body>

    <style type="text/css">
        .outer {
            border: 1px solid black;
            }
        .inner-top {
            float:center;
            text-align: center;
            }
        .inner-left {
            border: 1px solid black;
            text-align: center;
            }
        .inner-right {
            border:1px solid black;
            text-align: center;
            }
    </style>

    <div class="outer">
        <div class="inner-top">
            <div class="inner-left">
                <p>
                inner left
                </p>        
            </div>
            <div class="inner-right">
                <p>
                inner right
                </p>
            </div>
        </div>
    </div>

</body>
</html>

EDIT: I should explain myself a bit more in detail, I want to keep the outer class as a container, use the inner-top class as the inner container for the inner-left and inner-right classes.



Solution :

Is this the effect that you're going for?

http://jsfiddle.net/psLu7/

enter image description here

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.outer {
  border: 1px solid black;
}

.inner-top {
  /* float:center; */
  text-align: center;
  overflow: auto;
 }

 .inner-left {
   border: 1px solid black;
   text-align: center;
   float: left;
   width: 50%;
 }

 .inner-right {
   border:1px solid black;
   text-align: center;
   float: left;
   width: 50%;
 }

    CSS Howto..

    How to vertically center links in a menu?

    How to make circles repeat in the background of an element in full CSS?

    How to maximum size without exceed the size?

    How to add jQuery function to hover (show) and then click to show another menu

    How to add scrollbar in this CSS javascript pop up window?

    My slideshow only cycles through one picture

    How to restrict Visual Studio 2012.2 from generating .css files in LESS editor?

    How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true?

    How do three.js transforms and CSS3 3D-transforms correspond?

    how to resize background image of body in aspx page

    How to make a photo collage using html and css? [closed]

    How can I create HTML/CSS responsive tile?

    How to use JSF generated HTML element ID with colon “:” in CSS selectors?

    How to wrap or label all divs like files in opertaing systems (jQuery) [closed]

    How to put a
  • over an
    • How can I force clients to refresh JavaScript/CSS files rendered with Jade in Node.js?

      how to keep table 100% wide?

      How to prevent division when using variables separated by a slash in CSS property values

      Hide and show when click a button

      how to use the CSS contains-element selector with input elements?

      How to overwrite styling in Twitter Bootstrap

      How can I make a CSS Wrapper adjust height automatically?

      How to add label to percentage bar in css and html?

      How to make text go over a CSS background img

      How can I make my form take only a limited space?

      Angularjs hide and show according to screen size responsive

      how to add dots (…) with the same width?

      How do I select immediate children in jQuery [closed]

      How to prioritize custom css over the default Angular-material css

      CSS animation - How to fill in “starting from border”?