CODEWITHSUNDEEP
htmlcss
user4221591
user4221591

Reputation: 2150

placing a div inside another div keeping spaces between the two divs

I've placed one div inside another div (main_content inside content). I want to have some spaces between the two divs, I tried using padding property but the main_content filled all the spaces of content div.

How can I make main_content div fit inside the div content with some spaces (top, left, bottom, right) between the two divs in all type of displays?

body {background-color:#eaeaea; color:#303030;}
#container {width:100%;height:100%;}
#tray {padding:20px 15px; font:85%/1.2 "tahoma",sans-serif;}
#tray {background-color:#36648B; color:#cfcfcf;}
#cols {position:relative; margin:15px 0; padding-right:15px;}
#aside {float:left; width:215px; margin-right:0;}
#content { margin-left:232px; overflow:visible;background-color: #ffffff; }
#main_content
{
    padding-right:10px;
    padding-left:10px;
    padding-top:10px;
    padding-bottom:10px;
    background-color:#8BC735;
}
<body lang="en">
    <div id="container">
        <div id="tray">
        testing
        </div>
            <div id="cols">
                <div id = "aside">
                temp
                </div>
                <div id = "content">
                    <div id="main_content">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                </div>                              
            </div>     
    </div>
</body>

Upvotes: 0

Views: 1668

Answers (4)

user247217
user247217

Reputation: 394

Try this hope this helps.

#aside {float:left; width:45%;background-color: #ffffff; margin:5px;padding:5px;}
#content {float:left;width:50%; overflow:visible;background-color: #ffffff; }
#main_content
{  
    margin:10px;
    padding:10px;
    background-color:#8BC735;


}

Upvotes: 0

Vikrant
Vikrant

Reputation: 5036

Working Code snippet:

body {background-color:#eaeaea; color:#303030;}
#container {width:100%;height:100%;}
#tray {padding:20px 15px; font:85%/1.2 "tahoma",sans-serif;}
#tray {background-color:#36648B; color:#cfcfcf;}
#cols {position:relative; margin:15px 0; padding-right:15px;}
#aside {float:left; width:215px; margin-right:0;}
#content {
    overflow: hidden;
    background-color: white;
}
#main_content
{
    padding-right:10px;
    padding-left:10px;
    padding-top:10px;
    padding-bottom:10px;
    background-color:#8BC735;
    margin:10px;
}
<div id="container">
        <div id="tray">
        testing
        </div>
            <div id="cols">
                <div id = "aside">
                temp
                </div>
                <div id = "content">
                    <div id="main_content">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                </div>                              
            </div>     
    </div>

Upvotes: 1

Navaneeth
Navaneeth

Reputation: 2584

You can either set padding to the parent. Or, set margin to the child

#content {
    padding: 10px;
}


Or

#main_content {
    margin: 10px;
}

Upvotes: 0

user5681611
user5681611

Reputation:

You need to set the padding properties for the #content div instead of the #main_content div.

#content {
    padding: 10px 10px 10px 10px;
    background-color: red;
}

#main_content {
    background-color: #8BC735;
}

Upvotes: 3

Related Questions