Nested div margin problem

HTML & CSS
1

my objective is to put a 5px height green strip at the bottom of a div.

here is my code ( this is part of bigger code). This does not work


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  
 .box2 {
	width: 370px;
	height:300px;
	border:2px solid #660000;
	float:left;
	margin-top:10px;
	margin-left:10px;
	background-color:red;
 }

 .box2tab {
 background-color:green;
 clear:both;
 width:100%;
 height:5px;

 }

  </style>
 </HEAD>

 <BODY>
  <div class="box2">
   <span class="spanbox2">tutuututu<span>
   <ul>
	<li>abcd</li>
	<li>fghj iklop mnkjo</li>
	<li>gfhfj  rtryryr werty</li>
	<li>tryrywiwo ewrwrwrwtw</li>
	<li>wqewtyey retet outyut</li>
	<li>qwerete gfh tutuuyner</li>
	<li>fhhghg and hghjhk kgkglglg</li>
	</ul>
	<div class="box2tab">
	x
	</div>
   </div>
 </BODY>
</HTML>

I’m need a look something like this

What changes I need ?

2

my objective is to put a 5px height green strip at the bottom of a div.
Hi,
If it’s just a green strip you are wanting that could be done with a bottom border. Since you have placed text in that div I assume you are wanting content in it which would warrant the need for a box.

There are two ways you can get it at the bottom.

  1. Place that bottom div outside of that .box2 div and drag it back in with a negative top margin.

  2. Absolute position the bottom div in the .box2 div. You will need to set position:relative on the parent so it becomes the Containing Block.

Using either one of those methods you will need to set a bottom padding on the parent to keep the list items away from the content in the bottom div.

Here is the AP method:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
}
.box2 {
    position:relative;
    float:left; 
    width: 370px;
    min-height:300px;
    margin:10px 0 0 10px;
    padding: 0 0 30px 0;
    background:red;
    border:2px solid #660000;
}

.box2tab {
    position:absolute;
    left:0;bottom:0;
    width:100%;
    min-height:20px;
    background:green;
}

</style>

</head>
<body>

<div class="box2">
    <span class="spanbox2">tutuututu</span>
    <ul>
        <li>abcd</li>
        <li>fghj iklop mnkjo</li>
        <li>gfhfj  rtryryr werty</li>
        <li>tryrywiwo ewrwrwrwtw</li>
        <li>wqewtyey retet outyut</li>
        <li>qwerete gfh tutuuyner</li>
        <li>fhhghg and hghjhk kgkglglg</li>
    </ul>
    <div class="box2tab">x</div>
</div>

</body>
</html>
3

No, I can not use your code because you are changing css .box2 .

I can not change css .box2 …because its part of the page.

But I’m open to change css for .box2tab.

please suggest what changes I can do only in .box2tab to get a green strip(of height say 5px) at the bottom as shown in the figure.

4

Did you actually tried Rayurs example. The only things I see different to the original box2 are the position relative, which can never be bad and a padding? So the question is what is it that will mess up the css when using it

5

No, I can not use your code because you are changing css .box2 .
All I did was add position:relative and a bottom padding, how can that break your existing page? If it has to be a fixed height then just allow for the padding as it will be included in the height.

height:270px; /300px total w/ 30px bottom padding/

The relative position might cause some layering changes but that could be fixed with z-index.

please suggest what changes I can do only in .box2tab to get a green strip(of height say 5px) at the bottom as shown in the figure.
I already explained the only two ways it can be done with CSS.

If I drag the bottom div up with a negative margin I will have to alter your html.

If your asking me to put the div at the bottom without changing your code then I can’t help you. :slight_smile:

6

when I look at your code , I see you have

.box2tab {
position:absolute;
left:0;bottom:0;
width:100%;
min-height:20px;
background:green;
}

This is ok . This sets the strip at the bottom of the div.

But why you are using …
.box2 {
position:relative; //why ? this I don’t understand.
float:left;
width: 370px;
min-height:300px;
margin:10px 0 0 10px;
padding: 0 0 30px 0;
background:red;
border:2px solid #660000;
}

7

But why you are using … position:relative; //why ? this I don’t understand.

Since the bottom div is Absolute Positioned to the bottom of the parent div we must establish the [URL=“http://reference.sitepoint.com/css/containingblock”]Containing Block on the parent.

If we did not do that the AP element would be positioning from the viewport or the nearest positioned ancestor.

If the value of the position property is absolute, the containing block is the nearest positioned ancestor—in other words, the nearest ancestor whose position property has one of the values absolute, fixed, or relative. The containing block is formed by the padding edge of that ancestor.

The relative positioning on the parent should not cause any problems for you. If it does then you would need to control your stacking orders with z-index.

8

I find this difficult.

does that mean a absolute positioning element have to always accompanied by a parent relative positioned element ?

If we did not do that the AP element would be positioning from the viewport or the nearest positioned ancestor.

But in this case, we only had the parent <div> …so AP element should be from the nearest parent <div> … is not it ?

9

It means that if you want an AP child to position within it’s parent that parent must have positioning (other than the default of static) applied to it. It can be position:fixed; position:absolute; or position:relative;

But in this case, we only had the parent <div> …so AP element should be from the nearest parent <div> … is not it ?
If that parent div was the only div on the page and you do not use position:relative on it then the AP element would position from the viewport (the html element) if you try to set any offset properties on it (left:0; etc.).

Did you read the links I gave in my previous post? Once you understand how positioning works you will see why you need to define the containing block.