/    Sign up×
Community /Pin to ProfileBookmark

New to positioning: how do I shorten a div height?

Copy linkTweet thisAlerts:
Apr 08.2008

I’m trying to get six different colored divs (2 to a line) aligned in a hexagon.

I’ve created three divs (width:100%), each with two colored divs (width:25%) and using “position:relative” I’ve got the horizontal spacing okay.

But I can’t decrease the vertical spacing.

[CODE]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<style type=”text/css”>
div {width:100%}
.stripped { margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border-top:0px; border-bottom:0px;}
.stripped1 {background-color:black; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border-top:0px; border-bottom:0px;}
.stripped2 {background-color:gray; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border-top:0px; border-bottom:0px;}
.dRed {position:relative; top:0em; left:22%; background-color:#ff0000; height:1.5em; width:25%; text-align:center; valign:middle; font-size:12pt;}
.dGreen {position:relative; top:-1.5em; left:53%; background-color:#00ff00; height:1.5em; width:25%; text-align:center; valign:middle; font-size:12pt;}
.dOrange {position:relative; top:0em; left:12%; background-color:orange; height:1.5em; width:25%; text-align:center; valign:middle; font-size:12pt;}
.dBlue {position:relative; top:-1.5em; left:58%; background-color:#6868ff; height:1.5em; width:25%; text-align:center; valign:middle; font-size:12pt;}
.dYellow {position:relative; top:0em; left:22%; background-color:#ffff00; height:1.5em; width:25%; text-align:center; valign:middle; font-size:12pt;}
.dViolet {position:relative; top:-1.5em; left:53%; background-color:#ff00ff; height:1.5em; width:25%; text-align:center; valign:middle; font-size:12pt;}
</style>
</head>
<body>

<div class=”stripped1″>
<div class=”dRed stripped”>XXX</div>
<div class=”dGreen stripped”>XXX</div>
</div>
<div class=”stripped2″>
<div class=”dOrange stripped”>XXX</div>
<div class=”dBlue stripped”>XXX</div>
</div>
<div class=”stripped1″>
<div class=”dYellow”>XXX</div>
<div class=”dViolet”>XXX</div>
</div>

</body>
</html>[/CODE]

.stripped eliminates all extra space, top and bottom (I used 1 and 2 to show where the containing divs end) but I still have more space than I want between each “line” (i.e., two colored boxes.)

Setting “height” for the three outer divs doesn’t seem to do anything.

TIA for any suggestions.

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriApr 09.2008 — This is due to misunderstanding relative positioning. Relative position only offsets the [B][I]display[/I][/B] of the element from its normal position - the element still actually [B]occupies[/B] the original space. Therefore, the green div is still actually [B]below[/B] the red one, just [B]displayed[/B] beside it - hence the extra space.

This can be done easily by floating the coloured divs left and right, and using margins for the horizontal position :[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.stripped {
font-size: 12pt;
height: 1.5em;
line-height: 1.5em;
text-align: center;
width: 25%;
display: inline;
}
.stripped1 {
background-color:black;
height: 1.5em;
}
.stripped2 {
background-color:gray;
height: 1.5em;
}
.dRed {
background-color:#ff0000;
float: left;
margin-left: 22%;
}
.dGreen {
background-color:#00ff00;
float: right;
margin-right: 22%;
}
.dOrange {
background-color:orange;
float: left;
margin-left: 12%;
}
.dBlue {
background-color:#6868ff;
float: right;
margin-right: 12%;
}
.dYellow {
background-color:#ffff00;
float: left;
margin-left: 22%;
}
.dViolet {
background-color:#ff00ff;
float: right;
margin-right: 22%;
}
</style>
</head>
<body>

<div class="stripped1">
<div class="dRed stripped">XXX</div>
<div class="dGreen stripped">XXX</div>
</div>
<div class="stripped2">
<div class="dOrange stripped">XXX</div>
<div class="dBlue stripped">XXX</div>
</div>
<div class="stripped1">
<div class="dYellow stripped">XXX</div>
<div class="dViolet stripped">XXX</div>
</div>

</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@jackacohenauthorApr 10.2008 — Thank you for both a very clean solution and a very clear explanation of the problem I was having.

I now understand why none of the workarounds I was trying worked (or could have worked.)

What I had read about "float" (viz., that other text wrapped around floated items) led me to perceive it as intended for images and similar items.

But now that I understand it better, and have seen the orderliness of your CSS, I am motivated to try to clean up my style declarations (rather than creating them ad-hoc and ending up with a cluttered - and sledom re-usable - style sheet.

Thanks again!
×

Success!

Help @jackacohen 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.17,
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,
)...