Solved

top & bottom margin problem with nested divs

Posted on 2004-08-31
16
459 Views
Last Modified: 2012-08-14
Hi Experts!

I'm creating my website layout using CSS, I want it to look like a standard 3 columns portal with graphic modules inside. Each module is composed by 3 different parts (divs):

- top: the module title
- mid:the module content
- bot: the module bottom (background-image)

I need compatibility with new and old browsers (NS, Opera, IE 5.01, 5.5, 6...), so I avoid borders and just use background-images. The mid divs have a different left & right padding that allows their content not to overlap the graphic left & right borders.

All seemed to be ok but when I tried to put some content inside my modules I noticed a strange behavior with elements having top & bottom margins > 0. You can find my layout here:

http://www.kupido.net/bug

In this demo template you can see what I mean (I used different colors to evidence different behaviors):

- the first left module (gray) shows my problem, the mid div is far from both the top div and the bot div because of the top & bottom margins of its content; the second is the same situation but without margins; this is how I'd like every module to be so, if possible, please find a solution here!!
- in the center modules (red) the mid div has 1px padding on each side (plus the left & right padding), this partially solves my problem (not with IE 5.01) but doing this I have a 1px frame around the content... and I don't like it!
- in the right modules (blue) I use paddings instead of margins and this solves the problem... but this requires nested divs.

Since I need to put into some modules a series of elements having the same distance on each side, I'd prefer to use margins instead of paddings... they will merge and I won't need to specify different paddings!

Please tell me that there's a way to workaround this!!

Kupi
0
Comment
Question by:Kupi
  • 8
  • 5
16 Comments
 
LVL 2

Expert Comment

by:Epistemo
ID: 11942198
The surounding div .... ad :  "overflow:hidden" to the styles, but I noticed that you diod some of that.

And after ending the surounding div ... insert the folowing.
<div style="clear:both"></div>
This sometimes resolves the problem with div's not connecting.

----
See this in your top grey block?
<div style="margin: 10px; background-color: #AAA;">

The margin will go around your text! And so push the whole thing down 10px. and leave 10px on the bottom too, thus the top and bottom div's won't connect.
Change it to:

<div style="margin-right: 10px; margin-left:10px; background-color: #AAA;">
----
The padding = margin issue ... I agree ... when you use box models this could be a nightmare in certain browsers.
Give it a try ...
0
 
LVL 3

Author Comment

by:Kupi
ID: 11945679
Epistemo, I tried what you suggested but it didn't work...

Here is a screenshot of what I EXACTLY NEED and of what I ABSOLUTELY DON'T WANT:

http://www.kupido.net/bug/sample.jpg

I'm able to do this using paddings and nested divs... what I really need is to get the same result using margins!!
0
 
LVL 2

Expert Comment

by:Epistemo
ID: 11945787
IF you want to use margins then remember this:

Padding is on the inside of the div. Margin is on the outside.
So by putting another div inside the div ... and have this new div do the margins, it should take care of the issue.

 ----------------------
|   ORIGINAL         |
|   --------------     |
|  | new one   |    |      
|  | w margin  |    |
|  |                 |   |
|  ---------------    |
|                         |
----------------------
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11945852
Hi Kupi,

What you need to do here is add the padding to the container, not the margin to the containee, like this:

div#left div.module div.mid {
      padding: 10px 12px 10px 18px;
      background-image: url('images/modules/left/mid.gif');
      background-repeat: repeat-y;
}

and then:

<div class="mid">
<div style="padding:2px; background-color: #AAA;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam posuere nunc vitae diam. Praesent augue augue, imperdiet laoreet, congue at, feugiat ut, metus. Mauris interdum orci vitae libero. Nunc convallis tellus facilisis justo. Praesent quis enim ac lectus aliquet faucibus. Vivamus libero leo, auctor sit amet, tempus eget, euismod vel, sem. In hac habitasse platea dictumst. Duis magna nisl, elementum non, laoreet a, mattis vel, justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam est. Mauris tincidunt semper nulla. Pellentesque a enim.</div>
</div>

Thanks,
Sean
0
 
LVL 3

Author Comment

by:Kupi
ID: 11945966
Not always... take a look at this:

---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<title>Test</title>

</head>

<body>

<h2>Margin<h2>

<div style="width: 200px;">
  <div style="overflow: hidden; background-color: #AAA; height: 10px;"></div>
  <div style="background-color: #CCC;">
    <div style="margin: 10px; background-color: #000; height: 100px;"></div>
  </div>
  <div style="overflow: hidden; background-color: #AAA; height: 10px;"></div>
</div>

<h2>Padding<h2>

<div style="width: 200px;">
  <div style="overflow: hidden; background-color: #AAA; height: 10px;"></div>
  <div style="background-color: #CCC;">
    <div style="padding: 10px;">
      <div style="background-color: #000; height: 100px;"></div>
    </div>
  </div>
  <div style="overflow: hidden; background-color: #AAA; height: 10px;"></div>
</div>

</body>

</html>
---
0
 
LVL 2

Expert Comment

by:Epistemo
ID: 11946012
Like I said ... div within a div ... both seanpowell and kipu do it different ways but with the same effect.
You should have enough info now ... lol
0
 
LVL 3

Author Comment

by:Kupi
ID: 11946081
Hi seanpowell,
using padding instead of margin wouldn't be a solution because I need to put more than one block into a module and I need all these blocks to have the same distance, like this:
_____________
|  _________   |
|  |              |  |
|  |________|  |
|  _________   |
|  |              |  |
|  |________|  |
|  _________   |
|  |              |  |
|  |________|  |
|____________|

Using padding I'd have to define a class for the first block container with "padding: 10px 10px 5px 10px;", one for the last block with "padding: 5px 10px 10px 10px;" and one for all the other blocks with "padding: 5px 10px 5px 10px;".

Instead I could define just one class with "margin: 10px;" because margins will merge...
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 3

Author Comment

by:Kupi
ID: 11946122
Epistemo, both you and seanpowell told me to use padding, but if you read my question you'll find I said I'm able to solve the problem using padding and nested divs... but what I need is to understand why margins mess up my modules and workaround the problem using MARGINS... if possible!

Kupi
0
 
LVL 2

Expert Comment

by:Epistemo
ID: 11946264
... what browser? Because there are more issues concerning padding then margins.
0
 
LVL 3

Author Comment

by:Kupi
ID: 11946589
Opera, Mozilla, Explorer (from 5.x on)...
0
 
LVL 2

Expert Comment

by:Epistemo
ID: 11949818
Not padding ... margins are easier I think.
See example.

css style

<style>
#leftside {width:200px; background:#f00;float:left;text-align:left; color:f00;}
#collumn1, #collumn2, #collumn3 {width:180px; margin-left: 10px; background:#ff0; color:#000; margin-bottom:10px;}
</style>

then

<div id="leftside">
<div id="collumn1">
insert anything you like including another div if needed.
</div>
<div id="collumn2">
insert anything you like including another div if needed.
</div>
<div id="collumn2">
insert anything you like including another div if needed.
</div>
</div>

That's what you mean, right?
0
 
LVL 3

Author Comment

by:Kupi
ID: 11956437
Not right... look:

div#box {
  width: 200px;
  background-color: #F00;
}

div.top, div.bot {
  overflow: hidden;
  background-color: #CCC;
  height: 5px;
}

div.block {
  margin: 10px;
  background-color: #FF0;
  color:#000;
  height: 40px;
}

<div id="box">
  <div class="top"></div>

  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>

  <div class="bot"></div>
</div>

This is not ok because my "block" divs are contained into a "mid" div that has a background-image... if you add a surrounding div you'll see what I mean:

<div id="box">
  <div class="top"></div>

  <div style="background-color: #000;">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>

  <div class="bot"></div>
</div>

This strange behavior is my problem!
0
 
LVL 3

Author Comment

by:Kupi
ID: 11956450
Notice:

margin: 10px;

just one declaration... same effect!
0
 
LVL 3

Accepted Solution

by:
Kupi earned 0 total points
ID: 11958956
Testing and testing I found a solution... but I don't think it's very nice:

div.box {
    width: 200px;
}

div.top {
    overflow: hidden;
    background-color: #888;
    height: 10px;
}

div.mid {
    float: left;
    background-color: #BBB;
    width: 200px;
}

div.bot {
    overflow: hidden;
    clear: both;
    background-color: #888;
    height: 10px;
}

div.block {
    margin: 10px;
    background-color: #DDD;
    height: 50px;
}

<div class="box">
    <div class="top"></div>
    <div class="mid">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="bot"></div>
</div>

I gave the "mid" div a fixed width (= box width) and made it float to the left, then I cleared floating in the "bot" div... this works ok on IE 5.01, 5.5, 6, Opera 7.23 and Mozilla 1.7!

I'd like to know what do you think about this workaround... is it so bad? Does it work on other browsers I didn't mention?

If you know a better way to do the same thing (still using margins)... please let me know!!

Kupi
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now