...

View Full Version : Spacing between divs



netinho
06-07-2007, 07:14 PM
Hello - I would be extremely grateful anyone could spare the time to help me with this little problem. This is my first attempt at hand-coding so please excuse the ugly code and gaps in my knowledge.

I have the following CSS to control dotted boxes on my web page which are stacked on top of another. I want them to be evenly spaced out with a 30 pixel gap in between but they overlap one another in pretty much every browser. The only way I can get the spaces in is to use <br/> a few times and even that only works in IE7.

I've tried adding in margin-bottom: and defining the height of coursearea1 but neither have worked. Is there anything obvious that I'm missing? Thanks very much for your time ...

#coursearea1 {
position:absolute;
left:120px;
width:300px;
padding:10px 40px 10px 40px;
background-color: white;
border:1px dashed #999;
line-height:17px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}

body>#Menu {width:300px;}

sdcomputerz
06-07-2007, 07:52 PM
You set the "margin-bottom: 30px;". That should do it.

VIPStephan
06-07-2007, 07:59 PM
Of course they are on top of another, and of course a margin doesnít do anything because you have positioned them absolutely without specifying any position (top/left/right/bottom).

Show us your entire code (i.e. HTML & CSS) and we can tell you what to do. But I can tell you already that absolute positioning isnít needed in 90% of all cases.

And by the way: If you have more than one box called ďcourseareaĒ you canít do that with an ID, you must use a class then.

netinho
06-07-2007, 08:25 PM
Hi both, thanks for your replies.

VIP Stephan - I know what you mean with the classes and yes, I have got more than 1 box where I have just re-named the ID but just reused the same code each time. That was the only way I could get it to validate. I am a newbie - please forgive the ignorance.

Here is the HTML:



<div id="coursearea1">

<h2>Area 1: Team building</h2>

<p>You will learn to climb, abseil, mountaineer and cave. Through these activities, you will learn to work as a team, gain confidence and self-sufficiency.</p>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div id="coursearea2">
<h2>Area 2: Practical workshops</h2>
<p>In the central training rooms you will learn the theory behind the practices. This includes care of equipment, navigation skills and communication skills. All workshops are carried out in a relaxed atmosphere and practical manner.</p>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div id="coursearea3">
<h2>Area 3: Fitness</h2>
<p>Qualified Fitness Instructors will take you from whatever your starting point to the next level needed for basic training. Fitness sessions are carried out both in the gym and in 'open air'. Sessions include cross-country runs, spinning, swimming, circuits and strength training.</p>

</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div id="coursearea4">
<h2>Area 4: Field craft</h2>
<p>In practical situations, you will learn about living in the outdoors, basic survival, navigation and taking care of yourself and equipment.</p>
</div>

And here's the CSS



#sticker {
margin: 0px 0px 120px 0px;
padding: 0px 0px 0px 0px;
height:150px;
z-index:2;
float:right;
}

img { border:0px;}

body {
height:100%;
margin: 0px 50px 0px 50px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background: url(images/crosshatch.gif);
background-repeat: repeat-x;
}

#whitebg {
height:100%;
background:#fff;
border-left:1px solid #999;
border-right:1px solid #999;
z-index:1;
}

h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#00253F;
}

h2 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:20px;
line-height:28px;
font-weight:900;
color:#00253F;
}


p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 0px 0px;
padding:0px;
}

#Content>p {
margin:0px;
}

#Content a {
font:11px/20px verdana, arial, helvetica, sans-serif;
color:blue;
text-decoration: underline;
padding:0px 0px 0px 0px;
}


#Content>p+p {
text-indent:30px;
}


p#Footertext {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 0px 50px;
padding:0px;
color: white;
}

#QPD {
margin:0px 0px 0px 0px;
float: left;
padding: 20px 20px 20px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:0px; /* 14px + 17px + 2px = 33px */
border-width:0px 0px;
z-index:1;
}

#Logo {
margin:0px 0px 0px 0px;
padding:45px 0px 0px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:0px; /* 14px + 17px + 2px = 33px */
border-width:0px 0px;
background: url(images/header.gif);
background-repeat: repeat-x;
z-index:1;
}

#Forceslogos {
margin:0px 0px 0px 0px;
padding:0px 0px 10px 0px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:110px; /* 14px + 17px + 2px = 33px */
border-width:0px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
background-color:white;
z-index:0;
}


/* ------ NAVIGATION ----- */

#Header {
margin:10px 0px 30px 0px;
text-align:center;
padding: 10px 0px 10px 0px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:40px; /* 14px + 17px + 2px = 33px */
border-style: solid;
border-color: grey;
border-width:2px 0px; /* top and bottom borders: 3px; left and right borders: 0px */
line-height:14px;
background-color:#000066;
z-index:1;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Header {height:14px;}

ul {
display: inline;
}

li {
display: inline;
}


ul#whoshouldapplyul {
display: list-item;
}

li#whoshouldapplyul {
display: list-item;
}

#Header a {
color:white;
font-size:14px;
text-decoration:none;
font-weight:500;
font-family:verdana;
padding:0px 25px 0px 0px;
}

#Header a:link {color:white;}
#Header a:visited {color:white;}
#Header a:hover {text-decoration:underline;}

a#Footernav {
color:#white;
font-size:13px;
text-decoration:none;
font-weight:500;
font-family:georgia;
padding:0px 0px 0px 0px;
}

a:link#Footernav {color:white;}
a:visited#Footernav {color:white;}
a:hover#Footernav {background-color:#00253F;}

#Footer {
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:25px; /* 14px + 17px + 2px = 33px */
line-height:11px;
background: url(images/footer.gif);
background-repeat: repeat-x;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */


/* ------- MAIN CONTENT ----------- */


#Content {
margin:0px 400px 20px 20px;
padding:10px;
}

#SubContent {
margin:0px 200px 50px 20px;
padding:10px;
}

#SubContentFull {
margin:0px 20px 50px 20px;
padding:10px;
}

#SubContentAbout {
margin:0px 260px 250px 20px;
padding:10px;
}

#contact {
position:absolute;
left:120px;
width:250px;
padding:10px;
background-color:white;
border:1px dashed #999;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:250px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:250px;}

p#contacttext {
font:14px/20px verdana, arial, helvetica, sans-serif;
font-weight: bold;
margin:0px 0px 0px 0px;
padding:10px;
color: #000066;
}

#benefits {
position: absolute;
left: 13%;
width:550px;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:550px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:550px; }


#contactform {
position:absolute;
left:120px;
width:350px;
padding:10px 0px 10px 40px;
background-color: #CCCCFF;
border:1px dashed #999;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:350px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:350px;}

#whoshouldapply {
position:absolute;
left:120px;
width:250px;
padding:10px 20px 10px 20px;
background-color: white;
border:1px dashed #999;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:250px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:250px;}

#coursearea1 {
position:absolute;
left:120px;
width:300px;
padding:10px 40px 10px 40px;
background-color: white;
border:1px dashed #999;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:300px;}

#coursearea2 {
position:absolute;
left:120px;
width:300px;

padding:10px 40px 10px 40px;
background-color: white;
border:1px dashed #999;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:300px;}

#coursearea3 {
position:absolute;
left:120px;
width:300px;

padding:10px 40px 10px 40px;
background-color: white;
border:1px dashed #999;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:300px;}

#coursearea4 {
position:absolute;
left:120px;
width:300px;

padding:10px 40px 10px 40px;
background-color: white;
border:1px dashed #999;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:300px;}


/* -------- RIGHT HAND VIDEO AREA ---------- */

#google {
position:absolute;
top:250px;
right:70px;
width:300px;
padding:00px;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:300px;}

#trainingbanner {
position:absolute;
top:250px;
right:70px;
width:360px;
padding:00px;
background: url(images/videocrosshatch.gif);
background-repeat: repeat-x repeat-y;
border: 1px solid #FFFFFF;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:360px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:360px;}


#RightAbout {
position:absolute;
top:250px;
margin-top:50px;
right:70px;
width:250px;
padding:00px;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:250px;}


p#sidebar {
left: 0px;
width: 20px;
background-image: url(images/crosshatch.gif);
}

/* ----------------------- GOOGLE MAPS -------------- */

#popup {
background:#EFEFEF;
border:1px solid #999999;
margin:0px;
padding:7px;
width:270px;
}

VIPStephan
06-07-2007, 08:55 PM
So you want those divs spaced evenly across the screen? Then remove those IDs (except if you have specific styling for a specific div) and put a class instead, e.g. class="coursearea". Then in the CSS you would put something like:


.coursearea {
float: left;
margin-right: 30px;
width: 100px;
}


However, as Iím typing this I realize that you probably just want them spaced out vertically. A div is a block-level element and as such 100% wide by its nature, and on its own line (putting line break before and after itself). So to have them in the center you would assign a width (e.g. 300px) and center them with margin: auto;. Then, to space them you can put a top and/or bottom margin.

netinho
06-07-2007, 11:19 PM
Thanks very much for your help - I really appreciate it.

I'll try it.

John



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum