/    Sign up×
Community /Pin to ProfileBookmark

Equal spacing between DIV elements…How?

Copy linkTweet thisAlerts:
Mar 13.2009

If you go to [url]www.ebay.com[/url], you will see that their website shows equal spacing between each section/element on their page. There is about 20px worth of empty space seperating the borders of each area giving a more uniform look. How do you accomplish this in a DIV column for example? Do I need to add a “spacer DIV” that is 20px in width within the original DIV column to get that equal seperating between the borders of different sections?

Sorry if this is a n00b question, as I myself am a n00b to CSS. I am a <table> convert.

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@TheBearMayMar 13.2009 — In this case it's the margin-left:
[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

</script>
<style type="text/css">
.column {
width:100px;
margin-left:10px;
border:1px solid #000000;
height:600px;
float:left;
}
</style>
</head>

<body>

<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
<div class="column">Column 4</div>
<div class="column">Column 5</div>

</body>
</html>[/code]
Copy linkTweet thisAlerts:
@Mr__E__CrypticMar 13.2009 — Do I need to add a "spacer DIV"[/QUOTE]
Absolutely not.

The best process would ultimately depend on the rest of your page's layout (certain methods may conflict with existing layout techniques etc.)

However, the easiest way would be to add margins to divider elements in your CSS sheet:

[CODE]div{
margin-right: 20px;
margin-bottom: 20px;}[/CODE]

edit: beaten to it.
Copy linkTweet thisAlerts:
@il_devoauthorMar 13.2009 — In this case it's the margin-left:
[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

</script>
<style type="text/css">
.column {
width:100px;
margin-left:10px;
border:1px solid #000000;
height:600px;
float:left;
}
</style>
</head>

<body>

<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
<div class="column">Column 4</div>
<div class="column">Column 5</div>

</body>
</html>[/code][/QUOTE]

How do the margins affect backgraound images/borders?

Ebay elements contain background borders and headers that enclose each section. If you add a background image (such as a curved corner) to the top-right for example, wont it place that image at the very edge of the DIV area? Will the margin value push the background image away from the edge?
Copy linkTweet thisAlerts:
@KelonMar 13.2009 — I don't believe a background image inherits the above rule as it is a property of the div rather than an independant item. That's regardless of whether your CSS rule is defined as an id or class. I'm pretty confident I'm right on this, someone more experienced will soon correct me (and they will be welcome to do so). Easy to test out...
×

Success!

Help @il_devo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.10,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...