CODEWITHSUNDEEP
csshtmlheightwidthparent-child
8bitcartridge
8bitcartridge

Reputation: 1721

CSS: Making a child-div element's height and width X pixels smaller than the parent element's

I'm making a template for a website and I'm getting some issues with some very basic CSS.

Basically, I'm trying to divide the site up into sections using div elements, and I want each section to contain a semi-transparent black background with a completely transparent border around it.

The idea is that there is a background image and there would be news-items sectioned off into black blocks that don't actually touch or overlap each other (that is to say, they have margins around them). The black blocks are slightly see-through and the areas between them (which will be a few pixels in size) are empty of content and you can just see the background.

What I have so far is as follows:

The site:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="mainPage.css" />
    <title>Some site</title>
</head>

<body>
    <div class="container">
        <div class="header">
            <img src="images/SomeImage.bmp" alt="ImageName"/>
        </div>
        <div class="latestBlockLeft">
            <div class="transDiv">
                <p> latestBlockLeft1 </p>
            </div>
        </div>
        <div class="randomBlockRight">
            <h1> Heading test</h1>
            <p> randomBlockRight </p>
        </div>
        <div class="latestBlockLeft">
            <div class="transDiv">
                <p> latestBlockLeft2 </p>
            </div>
        </div>
        <div class="latestBlockLeft">
            <div class="transDiv">
                <p> latestBlockLeft3 </p>
            </div>
        </div>
        <div class="menuStrip">
            <p> menuStrip </p>
        </div>
        <div class="sectionedNews">
            <p> sectionedNews </p>
        </div>
        <div class="disclaimer">
            <p> disclaimer </p>
        </div>
    </div>
</body>

The relevant CSS code:

html, body {padding: 0px; margin: 0px; height: 100%;}

body
{
    background-color:white;
    font-size:100%;
    background-image:url('images/Famicom cartridges.jpg');
    background-attachment:fixed;
}

h1
{
    background-color:transparent;
    color:#8B0000;
}

/* Link style */

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

/* Classes */
.container
{
    background-color:beige;
    width: 1020px;
    margin: 0 auto;
}

.transDiv
{
    position:relative;
    float:left;
    color:white;
    width:100%;
    height:100%;
    background-color: black;
    opacity: 0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
}

.header
{
    height: 120px;
    width: 100%;
    background-color: black;
margin: 0 auto;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

.latestBlockLeft
{
/*  padding-top:3px;
padding-right:3px; */
    height: 170px;
    width: 70%;
   /* background-color: yellow;*/
    float: left;
}

.randomBlockRight       ........... and so on

What keeps happening if I try and use margins is that the margin goes around the div division and pushed my other elements all over the place on the page. I could make this using exact pixel sizes for each element, but I want to be able to say that a div block takes up 70% of my main container div width and has Xpix empty see through margins inside that box. I don't want my transparent background appearing in these places. How does one do this? Am I even taking the correct design approach altogether?

Thanks!

Upvotes: 7

Views: 11449

Answers (1)

peterh
peterh

Reputation: 1

<div id="parent">
    <div id="child">
    </div>
</div>
  1. The parent div must have position: absolute or position: relative. Then you can do this:
#parent {
    display: block;
    position: relative;
}

#child {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: -10px; // HERE IS THE TRICK!
    left: 0;
}

With this solution, the size of the parent will set the size of the child!

If you want the child to have a relative height to the parent, you can give him height:, etc params just so as here.

Upvotes: 4

Related Questions